import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '../../basic/dropdown-menu'
import { ArrowDownSLine, CheckLine } from '../../basic/icons-inline'
import type { FooterLeftModelSwitchConfig } from './types'

export interface ChatInputModelSwitcherProps {
  config: FooterLeftModelSwitchConfig
  disabled: boolean
  arrowDownIcon?: React.ReactNode
  dataStyle?: string
  dataTheme?: string
}

export function ChatInputModelSwitcher({
  config,
  disabled,
  dataStyle,
  dataTheme,
  arrowDownIcon = <ArrowDownSLine className="h-3.5 w-3.5 shrink-0 text-text-secondary" />,
}: ChatInputModelSwitcherProps) {
  const currentModeOption = config.modeSwitch.options.find((o) => o.value === config.modeSwitch.value)
  const modeTriggerIcon = currentModeOption?.icon ?? config.modeSwitch.icon

  return (
    <div className="flex items-center gap-3 text-sm leading-sm text-text-secondary">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            type="button"
            className="inline-flex items-center gap-1.5 rounded-md bg-fill-secondary px-2.5 py-1.5 text-sm leading-sm text-text hover:bg-fill focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border disabled:opacity-50"
            disabled={disabled}
          >
            {modeTriggerIcon != null && (
              <span className="flex shrink-0 items-center [&>*]:block [&>*]:leading-none">
                {modeTriggerIcon}
              </span>
            )}
            <span>{config.modeSwitch.label}</span>
            {arrowDownIcon}
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" side="top" className="min-w-30" dataStyle={dataStyle} dataTheme={dataTheme}>
          {config.modeSwitch.options.map((opt) => (
            <DropdownMenuItem
              key={opt.value}
              onClick={() => config.modeSwitch.onChange(opt.value)}
              className="flex items-center justify-between gap-2"
            >
              <span className="flex items-center gap-2">
                {opt.icon != null && (
                  <span className="flex shrink-0 [&>*]:block [&>*]:leading-none [&>*]:size-4">
                    {opt.icon}
                  </span>
                )}
                {opt.label}
              </span>
              {config.modeSwitch.value === opt.value && (
                <CheckLine className="h-4 w-4 shrink-0 text-primary" />
              )}
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            type="button"
            className="inline-flex items-center gap-1 text-text-secondary hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border rounded px-1 py-0.5 disabled:opacity-50"
            disabled={disabled}
          >
            <span>{config.modelSwitch.label}</span>
            {arrowDownIcon}
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" side="top" className="min-w-25" dataStyle={dataStyle} dataTheme={dataTheme}>
          {config.modelSwitch.options.map((opt) => (
            <DropdownMenuItem
              key={opt.value}
              onClick={() => config.modelSwitch.onChange(opt.value)}
              className="flex items-center justify-between gap-2"
            >
              {opt.label}
              {config.modelSwitch.value === opt.value && (
                <CheckLine className="h-4 w-4 shrink-0 text-primary" />
              )}
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>

      {config.consumptionMultiplier.options != null &&
      config.consumptionMultiplier.options.length > 0 &&
      config.consumptionMultiplier.onChange != null ? (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className="inline-flex items-center text-text-secondary hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border rounded px-1 py-0.5 disabled:opacity-50"
              disabled={disabled}
            >
              {config.consumptionMultiplier.value}
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" side="top" className="min-w-20" dataStyle={dataStyle} dataTheme={dataTheme}>
            {config.consumptionMultiplier.options.map((opt) => (
              <DropdownMenuItem
                key={opt.value}
                onClick={() => config.consumptionMultiplier.onChange?.(opt.value)}
                className="flex items-center justify-between gap-2"
              >
                {opt.label}
                {config.consumptionMultiplier.value === opt.value && (
                  <CheckLine className="h-4 w-4 shrink-0 text-primary" />
                )}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      ) : (
        <span className="text-text-secondary">{config.consumptionMultiplier.value}</span>
      )}
    </div>
  )
}

ChatInputModelSwitcher.displayName = 'ChatInputModelSwitcher'