import type { IconButtonProps } from '@mui/material'
import type { ReactNode } from 'react'
import type { BaseWidgetState } from '../../stores/types'

/**
 * State stored in widget store for zoom functionality
 */
export interface ZoomConfig {
  zoom?: boolean
  /** Start percentage for zoom range (0-100) */
  zoomStart?: number
  /** End percentage for zoom range (0-100) */
  zoomEnd?: number
}

export type ZoomState<T = unknown> = BaseWidgetState<T & ZoomConfig>

export interface ZoomToggleProps {
  /** Widget ID to update zoom state in the widget store */
  id: string
  /** Initial zoom state - when true, zoom is enabled */
  defaultZoom?: boolean
  /** Initial start percentage for zoom range (0-100) */
  defaultZoomStart?: number
  /** Initial end percentage for zoom range (0-100) */
  defaultZoomEnd?: number
  /** Custom labels for the action */
  labels?: {
    /** Tooltip when zoom is disabled (button will enable zoom) */
    enable?: string
    /** Tooltip when zoom is enabled (button will disable zoom) */
    disable?: string
    /** Tooltip for reset button */
    reset?: string
    /** Accessibility label */
    ariaLabel?: string
  }
  /** Props passed to the IconButton component */
  IconButtonProps?: IconButtonProps
  /** Custom icon to display for zoom toggle */
  Icon?: ReactNode
  /** Custom icon to display for reset button */
  ResetIcon?: ReactNode
}