import { Star1 } from 'iconsax-react'
import { getIconColor } from '@/utils/colorUtils'
import { FC, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useMoveToFavorite, useUnFavoriteMessage } from '../hooks/useEmailData'

const MessageFavorite: FC<{ flagged: boolean }> = ({ flagged }) => {
    const [isFavorite, setIsFavorite] = useState<boolean>(flagged)
    const { id, mailbox } = useParams<{ id: string, mailbox: string }>()
    const { mutate: moveToFavorite } = useMoveToFavorite()
    const { mutate: unFavoriteMessage } = useUnFavoriteMessage()
    const navigate = useNavigate()
    return (
        <Star1 onClick={() => {
            if (isFavorite) {
                unFavoriteMessage({ messageId: id || '', mailbox: mailbox || '' }, {
                    onSuccess: () => {
                        navigate(-1)
                    }
                })
            } else {
                moveToFavorite({ messageId: id || '', mailbox: mailbox || '' }, {
                    onSuccess: () => {
                        navigate(-1)
                    }
                })
            }
            setIsFavorite(!isFavorite)
        }} className='lg:size-[18px] size-[20px]' variant={isFavorite ? 'Bold' : 'Outline'} color={isFavorite ? '#FFC107' : getIconColor('primary')} />
    )
}

export default MessageFavorite