import { ReactNode } from 'react'
import { SelectableState } from 'src/state/SelectionState'
import { EventHandlerArg } from 'typings/generic'
import { OptionType } from '../Option/typings'
import { OptionProps } from '../typings'

// @todo should .find it
export type SelectValue = string | number | boolean

export type OnSelectChangeArgs = EventHandlerArg<OptionType, SelectableState>
export interface OnSelectChange {
  (args: OnSelectChangeArgs): void
}

// @todo @tired
export interface RenderActiveItemProp {
  (props: any, state: any): ReactNode
}

export interface SelectRenderItemProps extends SelectProps {
  // @todo
  onClick?: OnSelectChange
}
export interface SelectRenderProp {
  (
    props: SelectRenderItemProps,
    state: SelectableState,
    index?: number
  ): ReactNode
}
export interface SelectProps {
  /**
   * @todo @name list
   */
  options?: Array<OptionType>
  list: Array<OptionType>

  /**
   * @alias onDropDownStateChange
   */
  onChange?: OnSelectChange
  onClickOutside?: OnSelectChange
  onBlur?: () => void
  onFocus?: () => void

  /**
   * @todo @deprecated move colour outside into preset
   */
  type?: string

  state?: SelectableState

  renderItem?: SelectRenderProp
  renderList?: SelectRenderProp
  renderActiveItem?: RenderActiveItemProp

  // mapped to disabled in dom
  isDisabled?: boolean

  label?: string | number | ReactNode

  className?: string
  // @todo seems like a preset of styles only...
  shouldBeAbsolute?: boolean
  // @todo what is this even? take it out!
  dropDownAlignmentType?: string
}