import { CloseCircle, Paperclip2 } from 'iconsax-react'
import { FC, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useDropzone } from 'react-dropzone'


type Props = {
    title?: string
    onChange?: (files: File[]) => void
    onRemove?: (files: File[]) => void
}

const UploadButton: FC<Props> = (props) => {

    const { t } = useTranslation()
    const { title, onChange, onRemove } = props

    const [files, setFiles] = useState<File[]>([])

    const onDrop = useCallback((acceptedFiles: File[]) => {
        const updatedFiles = [...files, ...acceptedFiles]
        setFiles(updatedFiles)
        onChange?.(updatedFiles)
    }, [files, onChange])

    const { getRootProps, getInputProps } = useDropzone({ onDrop })

    const handleRemove = (index: number) => {
        const updatedFiles = files.filter((_, i) => i !== index)
        setFiles(updatedFiles)
        onRemove?.(updatedFiles)
    }




    return (
        <div className='flex flex-col gap-4 sm:flex-row'>
            <div {...getRootProps()} className='h-10 bg-[#ECEEF5] rounded-full flex gap-2 items-center px-3 cursor-pointer'>
                <input {...getInputProps()} />

                <Paperclip2 size={20} color='#000' />
                <div className='text-xs'>{title ? title : t('attachment_select')}</div>
            </div>

            {files.map((file, index) => (
                <div key={file.name} className='bg-[#EBEDF5] text-xs flex gap-2 h-10 rounded-full items-center px-3'>
                    <span>{file.name}</span>
                    <CloseCircle size={19} color='#D52903' className='cursor-pointer' onClick={() => handleRemove(index)} />
                </div>
            ))}
        </div>
    )
}

export default UploadButton