import React from 'react'
import { useTranslation } from 'react-i18next'
import { useUpload } from '../hooks/use-upload'
import { ACCEPT_TYPES } from '../constants'
import { useFileStoreWithSelector } from '../store'
import { RiImageAddLine } from '@remixicon/react'
import Tooltip from '@/app/components/base/tooltip'

const ImageUploader = () => {
  const { t } = useTranslation()
  const files = useFileStoreWithSelector(s => s.files)

  const {
    fileUploadConfig,
    uploaderRef,
    fileChangeHandle,
    selectHandle,
  } = useUpload()

  return (
    <div>
      <input
        ref={uploaderRef}
        id='fileUploader'
        className='hidden'
        type='file'
        multiple
        accept={ACCEPT_TYPES.map(ext => `.${ext}`).join(',')}
        onChange={fileChangeHandle}
      />
      <div className='flex flex-wrap gap-1'>
        <Tooltip
          popupContent={t('datasetHitTesting.imageUploader.tooltip', {
            size: fileUploadConfig.imageFileSizeLimit,
            batchCount: fileUploadConfig.imageFileBatchLimit,
          })}
          popupClassName='system-xs-medium p-1.5 rounded-lg text-text-secondary'
          position='top'
          offset={4}
          disabled={files.length === 0}
        >
          <div
            className='group flex cursor-pointer items-center gap-x-2'
            onClick={selectHandle}
          >
            <div className='flex size-8 items-center justify-center rounded-lg border-[1px] border-dashed border-components-dropzone-border bg-components-button-tertiary-bg group-hover:bg-components-button-tertiary-bg-hover'>
              <RiImageAddLine className='size-4 text-text-tertiary' />
            </div>
            {files.length === 0 && (
              <span className='system-sm-regular text-text-quaternary group-hover:text-text-tertiary'>
                {t('datasetHitTesting.imageUploader.tip', {
                  size: fileUploadConfig.imageFileSizeLimit,
                  batchCount: fileUploadConfig.imageFileBatchLimit,
                })}
              </span>
            )}
          </div>
        </Tooltip>
      </div>
    </div>
  )
}

export default React.memo(ImageUploader)