import { FC, Fragment, useEffect, useState } from 'react'
import Input from '../../../components/Input'
import { Edit } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import Button from '../../../components/Button'
import { isEmail } from '../../../config/func'
import { useUpdateEmail } from '../hooks/useProfileData'
import { ErrorType } from '../../../helpers/types'
import { toast } from '../../../components/Toast'

type Props = {
    email: string | null,
    isVerified: boolean
}

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

    const { t } = useTranslation('global')
    const [email, setEmail] = useState<string>(props.email ? props.email : '')
    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
    const updateEmail = useUpdateEmail()

    useEffect(() => {
        setEmail(props.email ? props.email : '')
    }, [props.email])

    const handleSendVerification = () => {
        updateEmail.mutate({ email }, {
            onSuccess: () => {
                toast(t('profile.link_email'), 'success')
                setIsReadOnly(true)
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error?.message?.[0], 'error')
            }
        })
    }

    return (
        <Fragment>
            <div className='flex relative items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
                <Input
                    label={t('email')}
                    value={email}
                    readOnly={isReadOnly}
                    onChange={(e) => setEmail(e.target.value)}
                />
                {
                    !props.isVerified && isReadOnly &&
                    <div className='text-[10px] absolute left-24 text-red-400 top-[34px]'>
                        {t('profile.email_not_verified')}
                    </div>
                }
                {
                    isReadOnly ?
                        <div className='flex items-center gap-3 relative -top-3'>
                            {
                                !props.isVerified && !!email &&
                                <button
                                    type='button'
                                    onClick={handleSendVerification}
                                    disabled={updateEmail.isPending}
                                    className='text-[#0047FF] text-xs whitespace-nowrap disabled:opacity-50'
                                >
                                    {t('profile.resend_email')}
                                </button>
                            }
                            <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer gap-1 text-[#0047FF] text-xs items-center'>
                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                                <div>
                                    {t('edit')}
                                </div>
                            </div>
                        </div>
                        :
                        <Button
                            label={t('save')}
                            className='px-4 w-fit'
                            disabled={!isEmail(email)}
                            onClick={handleSendVerification}
                            isLoading={updateEmail.isPending}
                        />
                }
            </div>
        </Fragment>
    )
}

export default Email