import { FC, Fragment, useState } from 'react'
import Input from '../../../components/Input'
import { Edit, TickCircle } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import Button from '../../../components/Button'
import DefaulModal from '../../../components/DefaulModal'
import OTPInput from 'react-otp-input'
import { useUpdatePhone, useVerifyPhone } from '../hooks/useProfileData'
import { ErrorType } from '../../../helpers/types'
import { toast } from 'react-toastify'
import { VerifyPhoneType } from '../types/ProfileTypes'

type Props = {
    phone: string,
}

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

    const { t } = useTranslation('global')
    const [phone, setPhone] = useState<string>(props.phone)
    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
    const [showModal, setShowModal] = useState<boolean>(false)
    const [code, setCode] = useState<string>('')
    const updatePhone = useUpdatePhone()
    const verifyPhone = useVerifyPhone()

    const handleShowModal = () => {
        updatePhone.mutate({ phone: phone }, {
            onSuccess: () => {
                setShowModal(true)
            },
            onError: (error: ErrorType) => {
                toast.error(error.response?.data?.error.message[0])
            }
        })
    }

    const handleSubmit = () => {
        const params: VerifyPhoneType = {
            code: code,
            phone: phone
        }

        verifyPhone.mutate(params, {
            onSuccess: () => {
                setShowModal(false)
                setIsReadOnly(true)
                toast.success(t('success'))
            },
            onError: (error: ErrorType) => {
                toast.error(error.response?.data?.error.message[0])
            }
        })

    }

    return (
        <Fragment>
            <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
                <Input
                    label={t('profile.phone_call')}
                    value={phone}
                    readOnly={isReadOnly}
                    onChange={(e) => setPhone(e.target.value)}
                />
                {
                    isReadOnly ?
                        <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
                            <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                            <div>
                                {t('edit')}
                            </div>
                        </div>
                        :
                        <Button
                            label={t('save')}
                            className='px-4 w-fit'
                            disabled={phone.length !== 11}
                            onClick={handleShowModal}
                            isLoading={updatePhone.isPending}
                        />
                }
            </div>

            <DefaulModal
                open={showModal}
                close={() => setShowModal(false)}
                isHeader
                title_header={t('profile.confrim_email')}
            >
                <div className='mt-7'>
                    <div className='text-xs text-center'>
                        کد تایید به شماره {phone} ارسال شده است.برای تایید  کد مربوطه را وارد کنید.
                    </div>

                    <div className='mt-10'>کد تایید</div>
                    <div className='mt-2 w-full flex justify-center dltr otp'>
                        <OTPInput
                            value={code}
                            onChange={setCode}
                            shouldAutoFocus
                            numInputs={5}
                            renderInput={(props) =>
                                <input
                                    {...props}
                                    type='tel'
                                    autoComplete="one-time-code"
                                    inputMode="numeric"
                                    className='w-full h-[50px] flex-1 mx-2  bg-white bg-opacity-30 border rounded-2.5' />
                            }
                        />
                    </div>

                    <div className='mt-14 flex justify-end border-t border-border pt-8'>
                        <div className='flex gap-5'>
                            <Button
                                className='bg-white bg-opacity-40 text-description w-[150px] text-xs'
                                label='لغو'
                                onClick={() => setShowModal(false)}
                            />
                            <Button
                                className='w-[150px] text-xs'
                                onClick={handleSubmit}
                                disabled={code.length !== 5}
                            >
                                <div className='flex gap-2 items-center'>
                                    <TickCircle
                                        size={20}
                                        color='white'
                                    />
                                    <div>{t('save')}</div>
                                </div>
                            </Button>
                        </div>
                    </div>
                </div>

            </DefaulModal>
        </Fragment>
    )
}

export default Phone