import * as React from 'react';
import { Stack } from '../Layout';
import { node, bool, string } from 'prop-types';
import flatMap from 'lodash/flatMap';
import AccordionItem from './AccordionItem/index';
import style from './Accordion.module.scss';

const Accordion = ({ children, allowMultiple = true, defaultOpenIndex, gap }) => {
  const childArray = flatMap(React.Children.toArray(children), (child) =>
    child.type === React.Fragment ? React.Children.toArray(child.props.children) : child,
  );
  const [openIndex, setOpenIndex] = React.useState(defaultOpenIndex);

  return (
    <Stack gap={gap} dividers className={style.accordion}>
      {childArray.map((child, i) =>
        allowMultiple
          ? React.cloneElement(
              child,
              { defaultOpen: i === defaultOpenIndex },
              { key: i.toString() },
            )
          : React.cloneElement(
              child,
              {
                open: openIndex === i,
                onChange: () => setOpenIndex((prev) => (prev === i ? null : i)),
              },
              { key: i.toString() },
            ),
      )}
    </Stack>
  );
};

Accordion.propTypes = {
  children: node.isRequired,
  allowMultiple: bool,
  gap: string,
};

Accordion.Item = AccordionItem;

export default Accordion;