import * as React from 'react';
import cx from 'classnames';
import { node, bool, func, string, oneOfType, element } from 'prop-types';
import { Text } from '../../Text/index';
import { Stack } from '../../Layout/index';
import style from './AccordionItem.module.scss';
import useControlProp from '../../../hooks/useControlProp';

const createContent = (content) => {
  if (typeof content === 'string') return <Text>{content}</Text>;
  return content;
};

function createHeader(header, open) {
  if (typeof header === 'function') return header({ open });
  if (typeof header === 'string') return <Text weight="bold">{header}</Text>;
  return header;
}

const AccordionItem = ({ header, content, open: openProp, onChange, defaultOpen = false }) => {
  const [open, setOpen] = useControlProp(openProp, onChange, defaultOpen);

  return (
    <Stack gap="xsmall" className={cx(style.accordionItem, open && style.open)}>
      <button type="button" onClick={() => setOpen(!open)} className={style.header}>
        {createHeader(header, open)}
      </button>
      {open && <div className={style.content}>{createContent(content)}</div>}
    </Stack>
  );
};

AccordionItem.propTypes = {
  header: oneOfType([node, string, element, func]).isRequired,
  content: node.isRequired,
  open: bool,
  onChange: func,
  defaultOpen: bool,
};

export default AccordionItem;