import { Trash } from 'iconsax-react'
import { FC, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useMoveToTrash, useRestoreMessage } from '../hooks/useEmailData'

const MessageTrash: FC<{ isActiveTrash: boolean }> = ({ isActiveTrash }) => {
    const [isTrash, setIsTrash] = useState<boolean>(isActiveTrash)
    const { id, mailbox } = useParams<{ id: string, mailbox: string }>()
    const { mutate: moveToTrash } = useMoveToTrash()
    const { mutate: restoreMessage } = useRestoreMessage()
    const navigate = useNavigate()
    return (
        <Trash variant={isTrash ? 'Bold' : 'Outline'} className='lg:size-[18px] size-[20px]' color='#CD0000' onClick={() => {
            setIsTrash(!isTrash)
            if (isTrash) {
                restoreMessage({ messageId: id || '', mailbox: mailbox || '' }, {
                    onSuccess: () => {
                        navigate(-1)
                    }
                })
            } else {
                moveToTrash({ messageId: id || '', mailbox: mailbox || '' }, {
                    onSuccess: () => {
                        navigate(-1)
                    }
                })
            }
        }} />
    )
};

export default MessageTrash;