import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { useGetInvoiceDetail } from './hooks/useReceiptData'
import { useGetFinancialInfo } from '../financial/hooks/useFinancialData'
import { ReceiptDetailItemType } from './types/ReceiptTypes'
import { NumberFormat } from '../../config/func'
import moment from 'moment-jalaali'
import PageLoading from '../../components/PageLoading'
import LegalInfo from './components/LegalInfo'
import RealInfo from './components/RealInfo'
import RegisterInfo from './components/RegisterInfo'
import { clx } from '../../helpers/utils'
import Button from '../../components/Button'
import ApproveInvoice from './components/ApproveInvoice'
import PayInvoice from './components/PayInvoice'

const ReceiptsDetail: FC = () => {

    const { id } = useParams()
    const { t } = useTranslation('global')
    const getProfile = useGetFinancialInfo()
    const getInvoce = useGetInvoiceDetail(id ? id : '')

    return (
        <div className='mt-4'>
            <div className='flex gap-6 items-center'>
                <div>{t('receip.detail_account')}</div>

                <ApproveInvoice status={getInvoce.data?.data?.invoice?.status} id={id ? id : ''} refetch={getInvoce.refetch} />
            </div>

            {
                getInvoce.isPending || getProfile.isPending ?
                    <PageLoading />
                    :
                    <div className='flex xl:flex-row flex-col mt-8 gap-6'>
                        <div className='flex-1'>
                            <div className='w-full bg-white rounded-3xl p-8'>
                                <div className='flex justify-between items-center'>
                                    <div>
                                        {t('receip.personal_information')}
                                    </div>
                                </div>


                                {
                                    getProfile.data?.data?.user?.legalUser ?
                                        <LegalInfo data={getProfile.data?.data} />
                                        :
                                        getProfile.data?.data?.user?.realUser ?
                                            <RealInfo data={getProfile.data?.data} />
                                            : <RegisterInfo data={getProfile.data?.data} />
                                }




                            </div>

                            <div className='w-full bg-white rounded-3xl mt-8 p-8'>
                                <div className='flex justify-between items-center'>
                                    <div>
                                        {t('receip.detail_receip')}
                                    </div>
                                </div>

                                <div className='mt-7 text-sm'>
                                    <div className='flex justify-between items-center text-description h-14'>
                                        <div>
                                            {t('receip.description')}
                                        </div>
                                        <div>
                                            {t('receip.price')}
                                        </div>
                                    </div>
                                    {
                                        getInvoce.data?.data?.invoice?.items?.map((item: ReceiptDetailItemType) => {
                                            return (
                                                <div key={item.id} className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
                                                    <div className='flex gap-0.5'>
                                                        <span>{item.name}</span>
                                                        <span>{item.count}</span>
                                                        <span>عدد</span>
                                                    </div>
                                                    <div>
                                                        <span>{NumberFormat(item.totalPrice)}</span> ریال
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }

                                    <div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
                                        <div>
                                            ۱۰٪ ارزش افزوده
                                        </div>
                                        <div>
                                            <span>{NumberFormat(getInvoce.data?.data?.invoice?.tax)}</span> ریال
                                        </div>
                                    </div>
                                    <div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
                                        <div>
                                            جمع کل
                                        </div>
                                        <div>
                                            <span>{NumberFormat(getInvoce.data?.data?.invoice?.totalPrice)}</span> ریال
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className='bg-white xl:w-sidebar text-sm h-fit rounded-3xl p-8'>
                            <div className='p-6 bg-green-50 rounded-2xl text-green-400 text-xs mb-6'>
                                <p>{t('receip.thank_pay_1')}</p>
                                <p className='mt-1'>{t('receip.thank_pay_2')}</p>
                            </div>
                            <div className='flex justify-between items-center'>
                                <div>
                                    {t('receip.receip_information')}
                                </div>
                                <div className={clx(
                                    'border border-orange-400 text-orange-400 rounded-lg text-[9px] h-6 flex items-center px-1',
                                    getInvoce.data?.data?.invoice?.status === 'PAID' || getInvoce.data?.data?.invoice?.status === 'APPROVED' ? 'border-green-400 text-green-400' : getInvoce.data?.data?.invoice?.status !== 'PENDING' ? 'border-red-400 text-red-400' : 'border-orange-400 text-orange-400'
                                )}>
                                    <div>{t(`receip.${getInvoce.data?.data?.invoice?.status}`)}</div>
                                </div>
                            </div>

                            <div className='mt-6 text-xs font-extralight'>
                                <div className='flex justify-between h-12 border-b items-center'>
                                    <div className='text-description'>
                                        {t('receip.date_factor')}
                                    </div>
                                    <div>
                                        {moment(getInvoce.data?.data?.invoice?.createdAt).format('jYYYY-jMM-jDD')}
                                    </div>
                                </div>
                                <div className='flex justify-between h-12 border-b items-center'>
                                    <div className='text-description'>
                                        {t('receip.due_date')}
                                    </div>
                                    <div>
                                        {moment(getInvoce.data?.data?.invoice?.dueDate).format('jYYYY-jMM-jDD')}
                                    </div>
                                </div>
                                <div className='flex justify-between h-12 border-b items-center'>
                                    <div className='text-description'>
                                        {t('receip.factor_number')}
                                    </div>
                                    <div>
                                        {getInvoce.data?.data?.invoice.id}
                                    </div>
                                </div>
                                <div className='flex justify-between h-12 border-b items-center'>
                                    <div className='text-description'>
                                        {t('receip.status_factor')}
                                    </div>
                                    <div>
                                        {t(`receip.${getInvoce.data?.data?.invoice?.status}`)}
                                    </div>
                                </div>

                                {
                                    getInvoce.data?.data?.invoice?.status === 'APPROVED' &&
                                    <div className='flex gap-4 items-center mt-8'>
                                        <Button
                                            label={t('receip.get_factor')}
                                            className='bg-[#E8E8E8] text-description text-xs'
                                        />
                                        <PayInvoice
                                            id={id ? id : ''}
                                            refetch={getInvoce.refetch}
                                        />
                                    </div>
                                }
                            </div>


                        </div>
                    </div>
            }

        </div>
    )
}

export default ReceiptsDetail