import { IconProp, IconProps } from '../icon'
import { SystemProps } from '../system'
import { ThemingProps } from '../theme'
import { AnyString } from '../utils'

export type ButtonProps = SystemProps &
  ThemingProps<'Button'> & {
    /** Deprecated. Please use variant instead. @deprecated  */
    colorScheme?: string
    /** Icon for the drop-down element. @default falAngleDown */
    dropDownIcon?: IconProp
    /** Icon that replaces any other content. */
    icon?: IconProp | JSX.Element
    /** Socket displaying icon on the left side. */
    iconLeft?: IconProp | JSX.Element
    /** Socket displaying icon on the right side. */
    iconRight?: IconProp | JSX.Element
    /** Adds an active class name for further handling. */
    isActive?: boolean
    /** Adds an drop down pointer to the left. */
    isDropDown?: boolean
    /** Adds box shadow style. @default false */
    isElevated?: boolean
    /** Makes the button take full width of the container. @deprecated */
    isFullWidth?: boolean
    /** Replaces content with a loading spinner. @default false */
    isLoading?: boolean
    /** Rounds the borders. @default false */
    isRound?: boolean
    /** Separates right icon from the content. @deprecated */
    isSplit?: boolean
    /** Modifies Button style and content based on the given state. */
    state?: ButtonState
    /** Object definition of styles and content for each state. */
    stateMapping?: ButtonStateMapping
    /** Socket placing text as alternative to children. */
    text?: React.ReactNode
  }

export type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString

export type ButtonStateMapping = Record<string, SystemProps & { variant: ButtonProps['variant']; iconProps: IconProps }>

/** Narrower prop definition for IconButton component */
export type IconButtonProps = Omit<ButtonProps, 'iconLeft' | 'iconRight' | 'text'>
