import type { FC } from 'react'
import type { WriteMode } from '../types'
import type { Item } from '../utils'
import type { VarType } from '@/app/components/workflow/types'
import { cn } from '@langgenius/dify-ui/cn'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@langgenius/dify-ui/dropdown-menu'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { getOperationItems, isOperationItem } from '../utils'

type OperationSelectorProps = {
  value: string | number
  onSelect: (value: Item) => void
  placeholder?: string
  disabled?: boolean
  className?: string
  popupClassName?: string
  assignedVarType?: VarType
  writeModeTypes?: WriteMode[]
  writeModeTypesArr?: WriteMode[]
  writeModeTypesNum?: WriteMode[]
}

const OperationSelector: FC<OperationSelectorProps> = ({
  value,
  onSelect,
  disabled = false,
  className,
  popupClassName,
  assignedVarType,
  writeModeTypes,
  writeModeTypesArr,
  writeModeTypesNum,
}) => {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)

  const items = getOperationItems(assignedVarType, writeModeTypes, writeModeTypesArr, writeModeTypesNum)

  const selectedItem = items.find(item => item.value === value)

  return (
    <DropdownMenu
      open={open}
      onOpenChange={setOpen}
    >
      <DropdownMenuTrigger
        disabled={disabled}
        className={cn('group flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 data-popup-open:bg-state-base-hover-alt', disabled ? 'cursor-not-allowed bg-components-input-bg-disabled!' : 'cursor-pointer hover:bg-state-base-hover-alt', className)}
      >
        <div className="flex items-center p-1">
          <span
            className={`truncate overflow-hidden system-sm-regular text-ellipsis
                ${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
          >
            {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
          </span>
        </div>
        <span aria-hidden className={cn('i-ri-arrow-down-s-line size-4 text-text-quaternary group-data-popup-open:text-text-secondary', disabled && 'text-components-input-text-placeholder')} />
      </DropdownMenuTrigger>

      <DropdownMenuContent
        placement="bottom-start"
        sideOffset={4}
        popupClassName={cn('w-[140px]', popupClassName)}
      >
        <DropdownMenuGroup>
          <DropdownMenuLabel>{t('nodes.assigner.operations.title', { ns: 'workflow' })}</DropdownMenuLabel>
          {items.map(item => (
            !isOperationItem(item)
              ? (
                  <DropdownMenuSeparator key="divider" />
                )
              : (
                  <DropdownMenuItem
                    key={item.value}
                    className="gap-1 px-2 py-1"
                    onClick={() => onSelect(item)}
                  >
                    <div className="flex min-h-5 grow items-center gap-1 px-1">
                      <span className="flex grow system-sm-medium text-text-secondary">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
                    </div>
                    {item.value === value && (
                      <div className="flex items-center justify-center">
                        <span aria-hidden className="i-ri-check-line size-4 text-text-accent" />
                      </div>
                    )}
                  </DropdownMenuItem>
                )
          ))}
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export default OperationSelector
