dzone-front/src/pages/receipts/components/ApproveInvoice.tsx

import { Fragment, FC, useState } from 'react'
import Button from '../../../components/Button'
import { TickCircle } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import { useApproveInvoice, useRequestApprove } from '../hooks/useReceiptData'
import { ErrorType } from '../../../helpers/types'
import { toast } from '../../../components/Toast'
import { clx } from '../../../helpers/utils'
import { useGetProfile } from '../../profile/hooks/useProfileData'
import { RequestApproveInvoiceType } from '../types/ReceiptTypes'
import DefaulModal from '../../../components/DefaulModal'
import OTPInput from 'react-otp-input'
import { useCountDown } from '../../../hooks/useCountDown'

type Props = {
    id: string,
    refetch: () => void,
    status: string
}

const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {

    const approveInvoce = useApproveInvoice()
    const requestApprove = useRequestApprove()
    const getProfile = useGetProfile()
    const { value, reset } = useCountDown(2, true)
    const [showModal, setShowModal] = useState<boolean>(false)
    const { t } = useTranslation('global')
    const [code, setCode] = useState<string>('')

    const handleConfrim = () => {
        approveInvoce.mutate({ code: code, id: id, phone: getProfile.data?.data?.user?.phone }, {
            onSuccess: () => {
                toast('فاکتور با موفقیت تایید شد', 'success')
                refetch()
                setShowModal(false)
            },
            onError: (error: ErrorType) => {
                toast(error?.response?.data?.message || 'خطا در تایید فاکتور', 'error')
            }
        })
    }

    const handleShowModal = () => {
        const params: RequestApproveInvoiceType = {
            id: id,
            phone: getProfile.data?.data?.user?.phone
        }
        requestApprove.mutate(params, {
            onSuccess: () => {
                setShowModal(true)
                reset()
            },
            onError: (error: ErrorType) => {
                toast(error?.response?.data?.message || 'خطا در تایید فاکتور', 'error')
            }
        })
    }

    if (status === 'PENDING' || status === 'WAIT_PAYMENT' && getProfile.isSuccess)
        return (
            <Fragment>
                <Button
                    disabled={approveInvoce.isPending || requestApprove.isPending}
                    onClick={() => status === 'PENDING' ? handleShowModal() : null}
                    className={clx(
                        'px-9 w-fit bg-white bg-opacity-70 text-description',
                        status === 'WAIT_PAYMENT' && 'bg-green-300 text-[#00BA4B] bg-opacity-10'
                    )}
                >
                    <div className='flex gap-2.5'>
                        <TickCircle
                            size={20}
                            color={status === 'PENDING' ? '#888888' : '#00BA4B'}
                        />
                        <div className='whitespace-nowrap'>
                            {
                                status === 'WAIT_PAYMENT' ?
                                    t('receip.accepted')
                                    :
                                    t('receip.confrim_factor')
                            }
                        </div>
                    </div>
                </Button>

                <DefaulModal
                    open={showModal}
                    close={() => setShowModal(false)}
                    isHeader
                    title_header={t('profile.confrim')}
                >
                    <div className='mt-7'>
                        <div className='text-xs text-center'>
                            کد تایید به شماره {getProfile.data?.data?.user?.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='flex mt-7 justify-center'>
                            {
                                value !== '00:00' ?
                                    <div className='flex gap-1 text-description text-xs'>
                                        <div>{value}</div>
                                        <div>{t('auth.counter_otp')}</div>
                                    </div>
                                    :
                                    <div onClick={handleShowModal} className='flex cursor-pointer gap-1 pl-2  text-black text-sm'>
                                        <div className=''>
                                            {t('auth.try_again')}
                                        </div>
                                    </div>

                            }

                        </div>

                        <div className='mt-10 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={handleConfrim}
                                    disabled={code.length !== 5}
                                    isLoading={approveInvoce.isPending || requestApprove.isPending}
                                >
                                    <div className='flex gap-2 items-center'>
                                        <TickCircle
                                            size={20}
                                            color='white'
                                        />
                                        <div>{t('save')}</div>
                                    </div>
                                </Button>
                            </div>
                        </div>
                    </div>

                </DefaulModal>
            </Fragment>
        )
    else return null
}

export default ApproveInvoice