import { InfoCircle } from 'iconsax-react'
import { FC, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useMoveToJunk, useMoveToNotJunk } from '../hooks/useEmailData'

const MessageSpam: FC<{ isActiveSpam: boolean }> = ({ isActiveSpam }) => {

    const navigate = useNavigate()
    const [isSpam, setIsSpam] = useState<boolean>(isActiveSpam)
    const { id, mailbox } = useParams<{ id: string, mailbox: string }>()
    const { mutate: moveToSpam } = useMoveToJunk()
    const { mutate: moveToNotSpam } = useMoveToNotJunk()

    return (
        <InfoCircle onClick={() => {
            if (isSpam) {
                moveToNotSpam({ messageId: id || '', mailbox: mailbox || '' }, {
                    onSuccess: () => {
                        navigate(-1)
                    }
                })
            } else {
                moveToSpam({ messageId: id || '', mailbox: mailbox || '' }, {
                    onSuccess: () => {
                        navigate(-1)
                    }
                })
            }
            setIsSpam(!isSpam)
        }} className='lg:size-[18px] size-[20px]' variant={isSpam ? 'Bold' : 'Outline'} color='black' />
    )
}

export default MessageSpam