import { ReactNode } from 'react'

type Identifier = string | number | Symbol

export interface ToggleItemRenderProp extends Function {
  (props: ToggleItemProps): ReactNode
}

export interface OnClickEvent extends Function {
  (props: ToggleItemProps): any
}

export interface ToggleItemProps {
  className?: string
  children?: ReactNode
  borderColor?: string
  bgColor?: string
  tickColor?: string

  // commonstate
  isSelected?: boolean
  isDisabled?: boolean

  // displayed in ui
  label: string | object

  // used for non-ui
  value: string | object

  // for identifying
  identifier?: Identifier

  // where the onclcik event will be called
  onClick?: OnClickEvent

  /**
   * Render Props
   */
  renderIcon?: ToggleItemRenderProp
  renderText?: ToggleItemRenderProp
  renderBox?: ToggleItemRenderProp
  renderWrap?: ToggleItemRenderProp

  /**
   * Toggle breedType
   */
  isRadio?: boolean
  isCheckBox?: boolean
}