import { ReactNode } from 'react'

import { IconProps } from '../icon'
import { ListItemProps } from '../list'
import { SystemProps } from '../system'
import { ThemingProps } from '../theme'

export type AccordionOrientation = 'vertical' | 'horizontal'
export type AccordionIconPosition = 'end' | 'start'

export type AccordionProps = SystemProps &
  ThemingProps<'Accordion'> & {
    /** Items AccordionOrientation @default "vertical" */
    orientation?: AccordionOrientation
    /** Collection of Accordion items */
    items?: AccordionItemProps[]
    /** Icon position for vertical orientation @default "end" */
    iconPosition?: AccordionIconPosition
  }

export type AccordionItemId = string | number

export type AccordionOnToggleEvent = {
  id: AccordionItemId
  collapsed: boolean
}

export type AccordionItemProps = ListItemProps & {
  /** Unique ID */
  id: AccordionItemId
  /** Custom class name */
  className?: string
  /** Content */
  children?: ReactNode
  /** Alternative way to provide content */
  content?: ReactNode
  /** Control the padding of the content */
  contentPx?: string | number
  /** Collapsed state */
  collapsed?: boolean
  /** The icon position @default "end" */
  iconPosition?: AccordionIconPosition
  /** Title */
  title?: string | ReactNode
  /** Collapse change state */
  onToggle?: (event: AccordionOnToggleEvent) => void
}

export type AccordionItemArrowProps = IconProps & {
  collapsed?: boolean
  color?: string
  disabled?: boolean
  orientation?: AccordionOrientation
}
