import * as React from 'react';

type Props = {
  onAccordionPress?: (expandedId: string | number) => void;
  expandedId?: string | number;
  children: any;
};

export type ListAccordionGroupContextType = {
  expandedId: string | number | undefined;
  onAccordionPress: (expandedId: string | number) => void;
} | null;

export const ListAccordionGroupContext =
  React.createContext<ListAccordionGroupContextType>(null);

const ListAccordionGroup = ({
  expandedId: expandedIdProp,
  onAccordionPress,
  children,
}: Props) => {
  const [expandedId, setExpandedId] = React.useState<
    string | number | undefined
  >(undefined);

  const onAccordionPressDefault = (newExpandedId: string | number) => {
    setExpandedId((currentExpandedId) =>
      currentExpandedId === newExpandedId ? undefined : newExpandedId
    );
  };

  return (
    <ListAccordionGroupContext.Provider
      value={{
        expandedId: expandedIdProp || expandedId,
        onAccordionPress: onAccordionPress || onAccordionPressDefault,
      }}
    >
      {children}
    </ListAccordionGroupContext.Provider>
  );
};

ListAccordionGroup.displayName = 'List.AccordionGroup';

export default ListAccordionGroup;