import type { FC } from 'react'
import type { ImageFile, VisionSettings } from '@/types/app'
import { cn } from '@langgenius/dify-ui/cn'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { TransferMethod } from '@/types/app'
import ImageLinkInput from './image-link-input'
import Uploader from './uploader'

type UploadOnlyFromLocalProps = {
  onUpload: (imageFile: ImageFile) => void
  disabled?: boolean
  limit?: number
}
const UploadOnlyFromLocal: FC<UploadOnlyFromLocalProps> = ({
  onUpload,
  disabled,
  limit,
}) => {
  return (
    <Uploader onUpload={onUpload} disabled={disabled} limit={limit}>
      {hovering => (
        <div
          className={`
            relative flex size-8 cursor-pointer items-center justify-center rounded-lg
            ${hovering && 'bg-gray-100'}
          `}
        >
          <span className="i-custom-vender-line-images-image-plus size-4 text-gray-500" />
        </div>
      )}
    </Uploader>
  )
}

type UploaderButtonProps = {
  methods: VisionSettings['transfer_methods']
  onUpload: (imageFile: ImageFile) => void
  disabled?: boolean
  limit?: number
}
const UploaderButton: FC<UploaderButtonProps> = ({
  methods,
  onUpload,
  disabled,
  limit,
}) => {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)

  const hasUploadFromLocal = methods.find(
    method => method === TransferMethod.local_file,
  )

  const handleUpload = (imageFile: ImageFile) => {
    onUpload(imageFile)
  }

  const closePopover = () => setOpen(false)

  return (
    <Popover
      open={open}
      onOpenChange={(nextOpen) => {
        if (disabled)
          return
        setOpen(nextOpen)
      }}
    >
      <PopoverTrigger
        render={(
          <button
            type="button"
            disabled={disabled}
            className="relative flex size-8 items-center justify-center rounded-lg enabled:hover:bg-gray-100 disabled:cursor-not-allowed"
          >
            <span className="i-custom-vender-line-images-image-plus size-4 text-gray-500" />
          </button>
        )}
      />
      <PopoverContent
        placement="top-start"
        sideOffset={0}
        popupClassName="border-none bg-transparent shadow-none"
      >
        <div className="w-[260px] rounded-lg border-[0.5px] border-gray-200 bg-white p-2 shadow-lg">
          <ImageLinkInput onUpload={handleUpload} disabled={disabled} />
          {!!hasUploadFromLocal && (
            <>
              <div className="mt-2 flex items-center px-2 text-xs font-medium text-gray-400">
                <div className="mr-3 h-px w-[93px] bg-linear-to-l from-[#F3F4F6]" />
                OR
                <div className="ml-3 h-px w-[93px] bg-linear-to-r from-[#F3F4F6]" />
              </div>
              <Uploader
                onUpload={handleUpload}
                limit={limit}
                closePopover={closePopover}
              >
                {hovering => (
                  <div
                    className={cn(
                      'flex h-8 cursor-pointer items-center justify-center rounded-lg text-[13px] font-medium text-[#155EEF]',
                      hovering && 'bg-primary-50',
                    )}
                  >
                    <span className="mr-1 i-custom-vender-line-general-upload-03 size-4" />
                    {t('imageUploader.uploadFromComputer', { ns: 'common' })}
                  </div>
                )}
              </Uploader>
            </>
          )}
        </div>
      </PopoverContent>
    </Popover>
  )
}

type ChatImageUploaderProps = {
  settings: VisionSettings
  onUpload: (imageFile: ImageFile) => void
  disabled?: boolean
}
const ChatImageUploader: FC<ChatImageUploaderProps> = ({
  settings,
  onUpload,
  disabled,
}) => {
  const onlyUploadLocal
    = settings.transfer_methods.length === 1
      && settings.transfer_methods[0] === TransferMethod.local_file

  if (onlyUploadLocal) {
    return (
      <UploadOnlyFromLocal
        onUpload={onUpload}
        disabled={disabled}
        limit={+settings.image_file_size_limit!}
      />
    )
  }

  return (
    <UploaderButton
      methods={settings.transfer_methods}
      onUpload={onUpload}
      disabled={disabled}
      limit={+settings.image_file_size_limit!}
    />
  )
}

export default ChatImageUploader