import type {
  AlertColor,
  AlertProps,
  Box,
  ChipProps,
  DialogProps,
  Paper,
  SnackbarProps,
  TooltipProps,
} from '@mui/material'
import type { ComponentProps, ComponentType, ReactNode } from 'react'
import type {
  LassoToolsMode,
  LassoToolsModes,
  LassoToolOptionsMode,
  LassoToolsModesMapping,
} from '../types'

export interface LassoToolsData {
  id: string
  label: string
  visible?: boolean
}

interface LassoToolsComponentBaseProps<M extends string = LassoToolsMode> {
  enabled: boolean
  modes: Partial<LassoToolsModes<M>>
  modesMapping: Partial<LassoToolsModesMapping<M>>
  values: LassoToolsData[]
  labels?: {
    action?: {
      tooltip?: {
        active?: string
        inactive?: string
      }
    }
    chip?: {
      tooltip?: {
        active?: string
        inactive?: string
      }
    }
    options?: {
      mode?: {
        title?: string
        options?: LassoToolOptionsMode<LassoToolsMode>
      }
      /** Label for the optional "Layer filters" menu item. */
      layerFilters?: string
    }
    noData?: {
      title?: string
      description?: string
    }
    actions: {
      toggleAll?: {
        active?: string
        inactive?: string
      }
      deleteAll?: string
    }
  }
  chipProps?: {
    TooltipProps?: Omit<TooltipProps, 'title'>
    ChipsProps?: Omit<ChipProps, 'label' | 'onDelete'>
  }
  modeSelected?: M | null
  onChangeMode: (mode: M) => void
  onChipToggle: (id: LassoToolsData['id'], data: boolean) => void
  onDelete: (id: LassoToolsData['id']) => void
  onAllChipToggle: () => void
  onAllDelete: () => void
  /**
   * When provided, the drawing-tool menu shows a "Layer filters" item at the
   * bottom that calls this (e.g. to open the {@link LassoLayerFiltersUI} dialog).
   * The trigger lives in the menu; the dialog is a separate component.
   */
  onLayerFilters?: () => void
}

export interface LassoToolsComponentProps<
  M extends string = LassoToolsMode,
> extends LassoToolsComponentBaseProps<M> {
  actionProps?: {
    TooltipProps?: Omit<TooltipProps, 'title'>
  }
  PaperProps?: ComponentProps<typeof Paper>
  onActionToggle: (data: boolean) => void
  ChipsSlot?: ComponentType<
    Partial<
      Omit<
        LassoToolsComponentProps,
        'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
      >
    >
  > | null
  ActionSlot?: ComponentType<
    Partial<
      Omit<
        LassoToolsComponentProps,
        'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
      >
    >
  > | null
  OptionsSlot?: ComponentType<
    Partial<
      Omit<
        LassoToolsComponentProps,
        'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
      >
    > &
      OptionsChildrenProps
  > | null
  SecondaryActionsSlot?: ComponentType<
    Partial<
      Omit<
        LassoToolsComponentProps,
        'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
      >
    >
  > | null
}

export interface LassoToolsInlineComponentProps<
  M extends string = LassoToolsMode,
> extends LassoToolsComponentBaseProps<M> {
  BoxProps?: ComponentProps<typeof Box>
}

export interface OptionsChildrenProps {
  onClose: () => void
}

export type LassoGeometryType = 'mask' | 'draw'

export interface LassoGeometryToolbarUIProps {
  /** Geometry type — `mask` clips layers, `draw` is annotation only. */
  type: LassoGeometryType
  /** Current geometry label, shown prefilled in the rename popover. */
  label: string
  /** When locked, every action but the unlock toggle is disabled. */
  locked?: boolean
  onToggleType: (type: LassoGeometryType) => void
  onRename: (label: string) => void
  onToggleLock: (locked: boolean) => void
  onDelete: () => void
  labels?: {
    toggleType?: { mask?: string; draw?: string }
    /** Tooltip/aria-label for the rename button. */
    rename?: string
    /** Label for the rename text input in the popover. */
    renameInput?: string
    lock?: { lock?: string; unlock?: string }
    delete?: string
  }
  PaperProps?: ComponentProps<typeof Paper>
}

export interface LassoMessageUIProps {
  /** Message from the lasso tools store (`LassoToolsMessage` in `@carto/ps-react-maps`). */
  message: {
    id: string
    title: string
    /** Body rendered under the title. */
    content?: ReactNode
    /** @default 'info' */
    severity?: AlertColor
    action?: ReactNode
  }
  onDismiss: () => void
  AlertProps?: Omit<AlertProps, 'severity' | 'onClose' | 'children' | 'action'>
  SnackbarProps?: Omit<SnackbarProps, 'open' | 'onClose' | 'children'>
}

export interface LassoLayerFilterItem {
  id: string
  label: string
  /** Whether the mask currently clips this layer. */
  checked: boolean
}

export interface LassoLayerFiltersUIProps {
  open: boolean
  onClose: () => void
  /** Layers the mask can apply to, with their current checked state. */
  layers: LassoLayerFilterItem[]
  /** Commit the new selection (called on Apply). */
  onApply: (selectedIds: string[]) => void
  labels?: {
    title?: string
    description?: string
    search?: string
    allSelected?: string
    cancel?: string
    apply?: string
    empty?: string
  }
  DialogProps?: Partial<Omit<DialogProps, 'open' | 'onClose'>>
}