import { ReactNode, ReactText } from 'react'
import { SelectableItem } from 'src/state/SelectionState'

export type OptionLabelValueType = '' | string | number | boolean | ReactText
/**
 * @todo keep consistent in event handlers
 * - so important to avoid issues like we had with toggle
 */
export interface OptionClick {
  // @todo !!! use this sig
  // (event: Event, item: OptionType): void
  (value: OptionLabelValueType): void
}
// @todo should be following standard
export interface OptionTypeCore {
  // compatibility
  label?: OptionLabelValueType
  value: OptionLabelValueType
  identifier?: string
  onClick?: OptionClick
}
export type OptionType = OptionTypeCore & SelectableItem

interface OptionRenderProp {
  // @todo state @tired
  (props: OptionProps, state: any): ReactNode
}

export interface OptionProps extends OptionType {
  index?: number
  value: string
  identifier?: string
  label?: string
  /**
   * @todo @name @deprecated use label only
   */
  text?: string

  /**
   * @todo @deprecated move colour out
   */
  image?: string
  /**
   * @todo @deprecated @invalid @name isDisabled
   */
  disabled?: boolean

  className?: string
  isSelected?: boolean
  isDisabled?: boolean

  children?: ReactNode
  // onClick
  // image
  // type
  // name?: string
  // optional?: any

  renderText?: OptionRenderProp
  renderBeforeText?: OptionRenderProp
  renderAfterText?: OptionRenderProp
}

// not sure it has state except as a prop
export type OptionState = OptionProps