'use client'
import type { FC } from 'react'
import { Checkbox } from '@langgenius/dify-ui/checkbox'
import { cn } from '@langgenius/dify-ui/cn'
import { noop } from 'es-toolkit/function'
import * as React from 'react'
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { FileTypeIcon } from '@/app/components/base/file-uploader'
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
import TagInput from '@/app/components/base/tag-input'
import { SupportUploadFileTypes } from '../../../types'

type Props = Readonly<{
  type:
    | SupportUploadFileTypes.image
    | SupportUploadFileTypes.document
    | SupportUploadFileTypes.audio
    | SupportUploadFileTypes.video
    | SupportUploadFileTypes.custom
  selected: boolean
  onToggle: (type: SupportUploadFileTypes) => void
  onCustomFileTypesChange?: (customFileTypes: string[]) => void
  customFileTypes?: string[]
}>

const FileTypeItem: FC<Props> = ({
  type,
  selected,
  onToggle,
  customFileTypes = [],
  onCustomFileTypesChange = noop,
}) => {
  const { t } = useTranslation()

  const handleOnSelect = useCallback(() => {
    onToggle(type)
  }, [onToggle, type])

  const isCustomSelected = type === SupportUploadFileTypes.custom && selected

  return (
    <div
      className={cn(
        'cursor-pointer rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg select-none',
        !isCustomSelected && 'px-3 py-2',
        selected &&
          'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg',
        !selected &&
          'hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover',
      )}
      onClick={handleOnSelect}
    >
      {isCustomSelected ? (
        <div>
          <div className="flex items-center border-b border-divider-subtle p-3 pb-2">
            <FileTypeIcon className="shrink-0" type={type} size="lg" />
            <div className="mx-2 grow system-sm-medium text-text-primary">
              {t(($) => $[`variableConfig.file.${type}.name`], { ns: 'appDebug' })}
            </div>
            <Checkbox
              className="shrink-0"
              checked={selected}
              aria-label={t(($) => $[`variableConfig.file.${type}.name`], { ns: 'appDebug' })}
            />
          </div>
          <div className="p-3" onClick={(e) => e.stopPropagation()}>
            <TagInput
              items={customFileTypes}
              onChange={onCustomFileTypesChange}
              placeholder={t(($) => $['variableConfig.file.custom.createPlaceholder'], {
                ns: 'appDebug',
              })!}
            />
          </div>
        </div>
      ) : (
        <div className="flex items-center">
          <FileTypeIcon className="shrink-0" type={type} size="lg" />
          <div className="mx-2 grow">
            <div className="system-sm-medium text-text-primary">
              {t(($) => $[`variableConfig.file.${type}.name`], { ns: 'appDebug' })}
            </div>
            <div className="mt-1 system-2xs-regular-uppercase text-text-tertiary">
              {type !== SupportUploadFileTypes.custom
                ? FILE_EXTS[type]!.join(', ')
                : t(($) => $['variableConfig.file.custom.description'], { ns: 'appDebug' })}
            </div>
          </div>
          <Checkbox
            className="shrink-0"
            checked={selected}
            aria-label={t(($) => $[`variableConfig.file.${type}.name`], { ns: 'appDebug' })}
          />
        </div>
      )}
    </div>
  )
}

export default React.memo(FileTypeItem)
