import { useState, FC } from 'react';

import AccordionItem, { AccordionItemProps } from './AccordionItem';

export type AccordionItem = Omit<AccordionItemProps, 'onClick' | 'open' | 'theme'>;

export interface AccordionProps {
  /**
   * The index of the item that should be open by default.
   * @default -1
   */
  indexOpen?: number;
  /** An array of items to display in the accordion. */
  items: readonly AccordionItem[];
  /** A callback function that is called when an item is clicked. */
  onClick?: (index: number) => void;
  /**
   * @deprecated
   * @default 'light'
   */
  theme?: 'light' | 'dark';
}

/**
 * Accordion
 *
 * A simple accordion component that displays a list of items that can be expanded or collapsed.
 *
 * @component
 * @param {number} indexOpen - index of the item that should be open
 * @param {Array<AccordionItemProps>} items - array of items to display
 * @param {Function} onClick - callback function
 * @example
 * // Example usage:
 *
 * import Accordion from './Accordion';
 *
 * const items = [
 *   {
 *     id: 'item1',
 *     title: 'Item 1',
 *     content: 'This is the content for item 1.',
 *   },
 *   {
 *     id: 'item2',
 *     title: 'Item 2',
 *     content: 'This is the content for item 2.',
 *   },
 *   {
 *     id: 'item3',
 *     title: 'Item 3',
 *     content: 'This is the content for item 3.',
 *   },
 * ];
 *
 * function App() {
 *   const handleItemClick = (index) => {
 *     console.log(`Item ${index} was clicked.`);
 *   };
 *
 *   return (
 *     <Accordion items={items} onClick={handleItemClick} />
 *   );
 * }
 */
const Accordion: FC<AccordionProps> = ({ indexOpen = -1, items, onClick, theme = 'light' }) => {
  const [itemsOpen, setItemsOpen] = useState(() =>
    items.map((value, index) => index === indexOpen),
  );

  /**
   * Handles a click event on an accordion item.
   *
   * @param index The index of the item that was clicked.
   */
  const handleOnClick = (index: number) => {
    if (onClick) {
      onClick(index);
    }
    const newItems = [...itemsOpen];
    newItems[index] = !itemsOpen[index];
    setItemsOpen(newItems);
  };

  return (
    <>
      {items.map((item, index) => (
        <AccordionItem
          key={item.id || index}
          open={itemsOpen[index]}
          title={item.title}
          subtitle={item.subtitle}
          content={item.content}
          icon={item.icon}
          media={item.media}
          showMediaAtAllSizes={item.showMediaAtAllSizes}
          showMediaCircle={item.showMediaCircle}
          isContainerAligned={item.isContainerAligned}
          onClick={() => handleOnClick(index)}
        />
      ))}
    </>
  );
};

export default Accordion;