import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Logout, TickCircle } from 'iconsax-react'
import Button from '@/components/Button'
import Input from '@/components/Input'
import { clx } from '@/helpers/utils'
import { toast } from '@/components/Toast'
import { ErrorType } from '@/helpers/types'
import { useDisableTwoFactor } from '../hooks/useSettingData'

const Enabled: FC = () => {

    const { t } = useTranslation()
    const [show, setShow] = useState(false)
    const [token, setToken] = useState('')
    const { mutate: disableTwoFactor } = useDisableTwoFactor()

    const handleDisableTwoFactor = () => {
        if (token.length !== 6) {
            toast(t('setting.invalid_code_length'), 'error')
            return
        }

        disableTwoFactor(token, {
            onSuccess: () => {
                setShow(false)
                setToken('')
                window.location.reload()
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error?.message[0] || t('setting.2fa_disabled_failed'), 'error')
            }
        })
    }

    return (
        <div>
            <div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
                <div className='text-center py-8'>
                    <div className='inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4'>
                        <TickCircle size={32} color='#22c55e' />
                    </div>
                    <h2 className='text-lg font-semibold text-green-600 mb-2'>
                        {t('setting.2fa_enabled_successfully')}
                    </h2>
                </div>

                {
                    show && (
                        <div className='px-10 mt-10'>
                            <Input
                                label={t('setting.enter_2fa_code')}
                                placeholder={t('setting.enter_2fa_code')}
                                value={token}
                                onChange={(e) => setToken(e.target.value)}
                                maxLength={6}
                            />
                        </div>
                    )
                }

                <div className={clx(
                    'flex justify-center mt-10',
                    !show && '-mt-5'
                )}>
                    {!show ? (
                        <Button
                            onClick={() => setShow(true)}
                            className='w-fit px-6'
                        >
                            <div className='flex items-center gap-2'>
                                <Logout size={20} color='white' />
                                <span>{t('setting.disable_2fa')}</span>
                            </div>
                        </Button>
                    ) : (
                        <div className='flex gap-3'>
                            <Button
                                onClick={() => {
                                    setShow(false)
                                    setToken('')
                                }}
                                variant='secondary'
                                className='w-fit px-6'
                            >
                                {t('setting.cancel')}
                            </Button>
                            <Button
                                onClick={handleDisableTwoFactor}
                                className='w-fit px-6'
                                disabled={token.length !== 6}
                            >
                                {t('setting.confirm_disable')}
                            </Button>
                        </div>
                    )}
                </div>
            </div>
        </div>
    )
}

export default Enabled