import { CloseCircle, InfoCircle, TickCircle } from 'iconsax-react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { NumberFormat } from '../../config/func'
import Button from '../../components/Button'
import { useNavigate, useSearchParams } from "react-router-dom";
import moment from 'moment-jalaali'
import { Pages } from '../../config/Pages'

const CallBack: FC = () => {

    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
    const { t } = useTranslation('global')

    const params = {
        status: searchParams.get('status') as 'PENDING' | 'FAILED' | 'COMPLETED',
        id: searchParams.get('id'),
        date: searchParams.get('date'),
        amount: searchParams.get('amount'),
    }


    return (
        <div className='flex  mt-10 flex-col justify-center items-center flex-1  h-full'>
            {
                params.status === 'COMPLETED' ?
                    <TickCircle
                        size={64}
                        color={'#00712D'}
                    />
                    :
                    params.status === 'FAILED' ?
                        <CloseCircle
                            size={64}
                            color='#D52903'
                        />
                        :
                        <InfoCircle
                            size={64}
                            color='#FFA800'
                        />
            }

            <div className='mt-7 text-xl'>
                {
                    params.status === 'COMPLETED' ?
                        t('callback.title_success')
                        :
                        params.status === 'FAILED' ?
                            t('callback.failed')
                            :
                            t('callback.pending')
                }
            </div>

            <div className='mt-7'>
                {
                    params.status === 'COMPLETED' ?
                        t('callback.desc_success')
                        :
                        params.status === 'FAILED' ?
                            t('callback.desc_failed')
                            :
                            t('callback.desc_pending')
                }
            </div>

            <div className='mt-16 xl:min-w-[560px] bg-[#FBFBFD] p-8 text-sm'>
                <div className='flex justify-between'>
                    <div>
                        {t('callback.order_number')}
                    </div>
                    <div className='text-left'>
                        {params.id}
                    </div>
                </div>
                <div className='flex justify-between mt-6'>
                    <div>
                        {t('callback.amount')}
                    </div>
                    <div>
                        {NumberFormat(Number(params.amount)) + ' ' + t('toman')}
                    </div>
                </div>
                <div className='flex justify-between mt-6'>
                    <div>
                        {t('callback.date')}
                    </div>
                    <div>
                        {moment(params.date).format('jYYYY/jMM/jDD')}
                    </div>
                </div>
            </div>

            <div className='flex xl:max-w-[560px] w-full gap-2.5'>
                <Button
                    label={t('callback.home')}
                    className='w-full mt-8 bg-transparent border border-black text-black'
                    onClick={() => navigate(Pages.dashboard)}
                />
                <Button
                    label={t('callback.back')}
                    className='w-full mt-8'
                    onClick={() => navigate(Pages.transactions)}
                />
            </div>
        </div>
    )
}

export default CallBack