import * as React from 'react';
import { AccordionItemCommonProps, AccordionItemProps } from './AccordionItem';
import {
  AccordionSectionItemCommonProps,
  AccordionSectionItemProps,
} from './AccordionSectionItem';

export type AccordionRenderOptionFn = (
  options: AccordionItemProps & AccordionSectionItemProps,
) => { render(): React.ReactNode };

export interface AccordionProps {
  /** Applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook?: string;
  /** allow multiple rows to be opened simultaneously */
  multiple?: boolean;
  /** accordion items nodes */
  items?: (AccordionItemCommonProps | AccordionRenderOptionFn)[];
   /** Accordion skin color */
  skin?: AccordionItemProps['skin'];
  /** Hide Accordion shadow effect */
  hideShadow?: AccordionItemProps['hideShadow'];
  /** Change items size */
  size?: AccordionItemProps['size'];
  /** Controls horizontal padding of Accordion items */
  horizontalPadding?: AccordionItemProps['horizontalPadding'];
  /** Change expand and collapse animation speed */
  transitionSpeed?: AccordionItemProps['transitionSpeed'];
  /** Callback fired immediately after the animation is started */
  onAnimationEnter?: AccordionItemProps['onAnimationEnter'];
    /** Callback fired immediately after the animation is ended */
  onAnimationExit?: AccordionItemProps['onAnimationExit'];
}

export default class Accordion extends React.Component<AccordionProps> {}

export const accordionItemBuilder: (
  props: AccordionItemCommonProps,
) => (options?: AccordionItemProps) => { render(): React.ReactNode };

export const accordionSectionItemBuilder: (
  props: AccordionSectionItemCommonProps,
) => (
  options?: AccordionSectionItemProps,
) => { render(): React.ReactNode };