import type { ComponentType, ReactNode } from 'react'
import { IconProps } from './Icon'

export type SelectTokens = {
  backgroundColor?: string
  color?: string
  borderWidth?: number | string
  borderColor?: string
  borderRadius?: number | string
  paddingTop?: number | string
  paddingBottom?: number | string
  paddingLeft?: number | string
  paddingRight?: number | string
  height?: number | string
  outerBackgroundColor?: string
  outerBorderWidth?: number | string
  outerBorderColor?: string
  fontSize?: number
  fontName?: string
  fontWeight?: number
  icon?: IconProps
  iconSize?: number | string
  iconColor?: string
  validationIcon?: IconProps
  validationIconSize?: number | string
  validationIconColor?: string
  feedbackBackgroundColor?: string
}

export interface SelectProps {
  children: string | ReactNode
  label: string
  initialValue?: string
  feedback?: string
  validation?: string
  value?: string
  onChange?: () => void
  nativeID?: string
  hint?: string
  hintPosition?: string
  tooltip?: string
  inactive?: boolean
  readOnly?: boolean
  placeholder?: string
  tokens?: SelectTokens
  testID?: string
  dataSet?: Record<string, any>
}

export interface SelectItemProps {
  children: string | ReactNode
  value: string
}

export interface SelectGroupProps {
  children: string | ReactNode
  label: string
}

declare const Select: ComponentType<SelectProps> & {
  Item: ComponentType<SelectItemProps>
  Group: ComponentType<SelectGroupProps>
}

export { Select }