import React from 'react';
import PropTypes from 'prop-types';
import cx from 'clsx';
import Link from 'rsg-components/Link';
import Styled from 'rsg-components/Styled';
import { useStyleGuideContext } from 'rsg-components/Context';

const styles = ({ color, fontFamily, fontSize, space, mq }) => ({
  list: {
    margin: 0,
  },
  item: {
    color: color.base,
    display: 'block',
    margin: '2px 0',
    padding: '5px 12px',
    fontFamily: fontFamily.base,
    fontSize: fontSize.base,
    listStyle: 'none',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    '.dark &': {
      isolate: false,
      color: '#eee'
    }
  },
  isChild: {
    [mq.small]: {
      isolate: false,
      display: 'inline-block',
      margin: [[0, space[1], 0, 0]],
    },
  },
  heading: {
    color: color.base,
    marginTop: space[1],
    fontFamily: fontFamily.base,
    fontWeight: 400,
  },
  link: {
    display: 'block !important',
    padding: '6px 4px 6px 16px !important',
    borderRadius: '4px !important',
    '&:visited': {
      isolate: false,
      display: 'block !important',
    },
    '&:hover': {
      isolate: false,
      '--opacity': '.3',
      background: 'rgba(200,200,200,var(--opacity))',
      '.dark &': {
        isolate: false,
        '--opacity': '.03',
      },
    },
    [mq.small]: {
      isolate: false,
      padding: '8px !important',
    },
  },
  isSelected: {
    fontWeight: 700,
  },
  details: {
    '&[open] svg': {
      isolate: false,
      transform: 'rotate(90deg)'
    },
  },
  summary: {
    marginBottom: '8px !important',
    listStyleType: 'none !important',
    fontWeight: 400,
    outline: 'none',
    userSelect: 'none',
    cursor: 'pointer !important',
    color: '#555',
    '&::-webkit-details-marker': {
      isolate: false,
      display: 'none'
    },
    '.dark &': {
      isolate: false,
      color: '#ccc'
    },
    'details[open] &': {
      isolate: false,
      fontWeight: 500,
      color: '#222',
      '.dark &': {
        color: '#eee'
      }
    }
  },
  arrow: {
    display: 'inline',
    width: '15px',
    height: '15px',
    marginRight: '5px',
    verticalAlign: 'middle',
    fill: 'currentColor',
    transition: 'transform .1s cubic-bezier(.5,0,.5,1)'
  }
});

export const ComponentsListRenderer = ({
  classes,
  items,
}) => {
  return (
    <ul className={classes.list}>
      {items.map(item => (
        <ComponentsListSectionRenderer key={item.slug} classes={classes} {...item} />
      ))}
    </ul>
  );
};

const ComponentsListSectionRenderer = ({
  classes,
  heading,
  visibleName,
  href,
  content,
  shouldOpenInNewTab,
  sections = [],
  components = [],
  selected,
  initialOpen,
  forcedOpen,
}) => {
  const { config } = useStyleGuideContext();

  const open = config.tocMode !== 'collapse' ? true : !!initialOpen;
  return (
    <li
      className={cx(classes.item, {
        [classes.isChild]: !content && !shouldOpenInNewTab,
        [classes.isSelected]: selected,
      })}
      key={href}
    >
      {
        (sections.length || components.length) ? (
          <details open={open || forcedOpen} className={classes.details}>
            <summary className={classes.summary}>
              <svg title="expand/collapse" aria-label="expand/collapse" viewBox="0 0 24 24" className={classes.arrow}>
                <path d="M9.707 18.707l6-6c0.391-0.391 0.391-1.024 0-1.414l-6-6c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>
              </svg>
              {visibleName}
            </summary>
            {content}
          </details>
        ) : (
            <Link
              className={cx(classes.link, heading && classes.heading)}
              href={href}
              target={shouldOpenInNewTab ? '_blank' : undefined}
              data-testid="rsg-toc-link"
            >
              {visibleName}
            </Link>
          )
      }
    </li>
  );
};

ComponentsListRenderer.propTypes = {
  classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
  items: PropTypes.array.isRequired,
};

export default Styled(styles)(ComponentsListRenderer);