/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-unused-vars */
/* eslint-disable react/no-array-index-key */
import classNames from 'classnames'
import { concat } from 'lodash'
import { useState } from 'react'
import { useDropzone } from 'react-dropzone'
import { useTranslation } from 'react-i18next'
import { AiOutlineCloudUpload } from 'react-icons/ai'
import { IoCloseCircle } from 'react-icons/io5'

export interface IFileUploadProps {
  files: any
  setFiles: (files: File[]) => void
  accept?: any
  max?: number
  error?: string
  disabled?: boolean
  typeErrorMessage?: string
  keepFilesOnError?: boolean
  onRemove?: (index: number) => void
}

export const FileUpload = (props: IFileUploadProps) => {
  const {
    files,
    setFiles,
    accept,
    max = 1,
    error,
    disabled,
    typeErrorMessage,
    keepFilesOnError = false,
    onRemove,
  } = props
  const [rejectedFiles, setRejectedFiles] = useState<any>(null)
  const { t } = useTranslation()

  const { getRootProps, getInputProps } = useDropzone({
    accept: accept || 'image/*',
    disabled,
    onDrop: (acceptedFiles: any, fileRejections: any) => {
      const currentFiles = files || []
      const totalFilesCount = currentFiles.length + acceptedFiles.length

      if (totalFilesCount > max || fileRejections.length > 0) {
        setRejectedFiles(fileRejections.length > 0 ? fileRejections : [{ errors: [{ code: 'too-many-files' }] }])
        if (!keepFilesOnError) {
          setFiles([])
        }
      } else {
        setRejectedFiles(null)
        if (totalFilesCount <= max) {
          setFiles(
            concat(
              currentFiles,
              acceptedFiles.map((image: any) =>
                Object.assign(image, {
                  preview: URL.createObjectURL(image),
                }),
              ),
            ),
          )
        }
      }
    },
    maxFiles: max,
  })

  return (
    <div
      {...getRootProps({
        className: `w-full dropzone border-primary rounded border-2 border-dashed flex justify-center align-middle items-center files-center  p-2 cursor-pointer ${
          error || disabled ? 'border-red-600' : 'border-base-300'
        } h-48`,
      })}
    >
      <div className="flex flex-col items-center w-full">
        <input {...getInputProps()} />

        {files && files.length > 0 ? (
          <div className="flex flex-col gap-2 items-center w-full">
            {files.map((file: any, index: number) => (
              <div key={file.name + index} className="flex gap-2 items-center w-full justify-center">
                <p className="break-words text-center">{file.name}</p>
                {onRemove && (
                  <IoCloseCircle
                    size={18}
                    className="text-error cursor-pointer shrink-0"
                    onClick={(e) => {
                      e.stopPropagation()
                      onRemove(index)
                    }}
                  />
                )}
              </div>
            ))}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center">
            <AiOutlineCloudUpload size={60} />
            {disabled && <span className="text-gray-400">{t('api.current_disabled')}</span>}
            <p className={classNames('text-info text-center', disabled && 'text-gray-400')}>
              {t('api.drag_and_drop_or_click_to_upload_file')}
            </p>
          </div>
        )}
        {rejectedFiles && rejectedFiles.length > 0 && (
          <div className="mt-2 text-center">
            <p className="text-error">
              {rejectedFiles[0].errors[0].code === 'file-invalid-type'
                ? typeErrorMessage || t('api.invalid_file_type') || 'Invalid file type'
                : `${t('message.exceeds_upload_limit')} ${max}`}
            </p>
          </div>
        )}
        {error && <p className="text-red-600 text-sm mt-1 text-center">{error}</p>}
      </div>
    </div>
  )
}