import { FC } from 'react'
import UploadButton from '@/components/UploadButton'
import { EmailAttachmentDto } from '@/pages/received/types/Types'
import { toast } from '@/components/Toast'

interface EmailAttachmentsProps {
    attachments: EmailAttachmentDto[]
    onAttachmentsChange: (attachments: EmailAttachmentDto[]) => void
}

const EmailAttachments: FC<EmailAttachmentsProps> = ({
    attachments,
    onAttachmentsChange
}) => {
    const convertFileToBase64 = (file: File): Promise<string> => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.onload = () => {
                const result = reader.result as string
                const base64 = result.split(',')[1]
                resolve(base64)
            }
            reader.onerror = reject
            reader.readAsDataURL(file)
        })
    }

    const handleFilesUpload = async (files: File[]) => {
        try {
            const newAttachments: EmailAttachmentDto[] = []

            for (const file of files) {
                const base64Content = await convertFileToBase64(file)
                const attachment: EmailAttachmentDto = {
                    filename: file.name,
                    contentType: file.type,
                    encoding: 'base64',
                    contentDisposition: 'attachment',
                    content: base64Content
                }
                newAttachments.push(attachment)
            }

            onAttachmentsChange([...attachments, ...newAttachments])
        } catch (error) {
            console.error('Error converting files to base64:', error)
            toast('خطا در آپلود فایل‌ها', 'error')
        }
    }

    const handleRemoveFile = (files: File[]) => {
        const currentFileNames = files.map(f => f.name)
        const updatedAttachments = attachments.filter(att =>
            currentFileNames.includes(att.filename || '')
        )
        onAttachmentsChange(updatedAttachments)
    }

    return (
        <div>
            <UploadButton
                onChange={handleFilesUpload}
                onRemove={handleRemoveFile}
            />
        </div>
    )
}

export default EmailAttachments