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

export interface ShortcutsProps {
  /**
   * ShortcutsItem components to render as shortcuts.
   */
  children: ReactNode
  /**
   * Shortcuts variant options.
   */
  variant?: ShortcutsVariant
  /**
   * Custom tokens for styling the Shortcuts container.
   */
  tokens?: ShortcutsTokens
  /**
   * Hide labels for all shortcuts items globally.
   * Can be overridden by individual ShortcutsItem hideLabel prop.
   */
  hideLabels?: boolean
  /**
   * Icon variant to apply to all shortcuts items.
   * Can be overridden by individual ShortcutsItem iconVariant prop.
   */
  iconVariant?: IconVariant
}

export type ShortcutsVariant = {
  /**
   * Width distribution of shortcuts items.
   * - 'equal': All items have equal width (default)
   * - 'dynamic': Items size based on content
   */
  width?: 'equal' | 'dynamic'
}

export interface ShortcutsTokens {
  mainContainerGap?: number
  mainContainerPaddingHorizontal?: number
  mainContainerPaddingVertical?: number
  itemContainerMinHeight?: number
  itemContainerPaddingHorizontal?: number
  itemContainerPaddingVertical?: number
  itemContainerBackgroundColor?: string
  itemContainerBorderRadius?: number
  labelFontColor?: string
  labelFontSize?: number
  labelFontWeight?: number
  labelLineHeight?: number
  labelMarginTop?: number
}

export interface ShortcutsItemProps {
  /**
   * Label text for the shortcut item.
   */
  label: string
  /**
   * Icon component to display.
   */
  icon?: ComponentType<any>
  /**
   * Image to display instead of icon.
   */
  image?: ShortcutsItemImage
  /**
   * URL to navigate to when pressed.
   */
  href?: string
  /**
   * Function to call when the item is pressed.
   */
  onPress?: () => void
  /**
   * Hide the label for this specific item.
   * Overrides parent Shortcuts hideLabels prop.
   */
  hideLabel?: boolean
  /**
   * Icon variant for this specific item.
   * Overrides parent Shortcuts iconVariant prop.
   */
  iconVariant?: IconVariant
  /**
   * Custom tokens for styling this item.
   */
  tokens?: ShortcutsItemTokens
  /**
   * Variant options for this item.
   */
  variant?: ShortcutsItemVariant
  /**
   * Callback function that receives the pressable state.
   * Can be used to dynamically set iconVariant based on press state.
   */
  onPressableStateChange?: (state: PressableState) => IconVariant | void
}

export type ShortcutsItemImage = {
  src: string
  alt: string
}

export type ShortcutsItemVariant = {
  /**
   * Whether the item is in a pressed state.
   */
  pressed?: boolean
}

export interface ShortcutsItemTokens {
  containerMinHeight?: number
  containerPaddingHorizontal?: number
  containerPaddingVertical?: number
  containerBackgroundColor?: string
  containerBorderRadius?: number
  labelFontColor?: string
  labelFontSize?: number
  labelFontWeight?: number
  labelLineHeight?: number
  labelMarginTop?: number
  iconSize?: number
}

export type PressableState = {
  pressed: boolean
  hovered?: boolean
  focused?: boolean
}

declare const Shortcuts: ComponentType<ShortcutsProps>
declare const ShortcutsItem: ComponentType<ShortcutsItemProps>

export { Shortcuts, ShortcutsItem }