import DefaulModal from '@/components/DefaulModal'
import { useSharedStore } from '@/shared/store/sharedStore'
import { useTranslation } from 'react-i18next'
import { FC, useState } from 'react'
import { clx } from '@/helpers/utils'
import Input from '@/components/Input'
import { NumberFormat } from '@/config/func'
import { useGetSpace } from '@/pages/setting/domain/hooks/useDomainData'
import { useBuySpace } from '../hooks/useShareData'
import Button from '@/components/Button'
import { Receipt1 } from 'iconsax-react'
import { toast } from '@/components/Toast'

const BuySpace: FC = () => {

    const { t } = useTranslation()
    const { openBuySpace, setOpenBuySpace } = useSharedStore()
    const [spaceSelected, setSpaceSelected] = useState(1)
    const { data: spaceData } = useGetSpace()
    const { mutate: buySpace, isPending } = useBuySpace()
    const price = spaceData?.data?.quota?.quotaPricePerGB

    const gigs = [5, 10, 20, 30, 40, 50]

    const handleBuySpace = () => {
        buySpace(spaceSelected * 1024 * 1024 * 1024, {
            onSuccess(data) {
                toast(data?.data?.message, 'success')
                window.location.href = import.meta.env.VITE_CONSOLE_URL + '/receipts/' + data?.data?.invoice?.id
            },
        })
    }

    return (
        <DefaulModal
            open={openBuySpace}
            close={() => setOpenBuySpace(false)}
            isHeader={true}
            title_header={t('space.title')}
        >
            <div>
                <div className='mt-8 text-sm'>
                    {t('space.select_space')}
                </div>
                <div className='mt-4 flex gap-4 flex-wrap'>
                    {gigs.map((gig) => (
                        <div onClick={() => setSpaceSelected(gig)} className={clx(
                            'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
                            spaceSelected === gig && 'border-black'
                        )}>
                            {gig} گیگبایت
                        </div>
                    ))}
                </div>

                <div className='mt-8'>
                    <Input
                        label={t('space.enter_space')}
                        className='bg-white/50'
                        value={spaceSelected}
                        onChange={(e) => setSpaceSelected(Number(e.target.value))}
                    />
                </div>

                <div className='mt-6 flex gap-1'>
                    <div className='text-xs'>{t('space.price')}</div>
                    <div className='font-bold text-xs'>{NumberFormat(spaceSelected * price)} تومان</div>
                </div>


                <div className='mt-24 flex justify-end'>
                    <Button
                        onClick={handleBuySpace}
                        className='px-8 w-auto'
                        variant='secondary'
                        loading={isPending}
                    >
                        <div className='flex gap-2 items-center'>
                            <Receipt1 size={18} color='black' />
                            {t('space.invoice_created')}
                        </div>
                    </Button>
                </div>
            </div>
        </DefaulModal >
    )
}

export default BuySpace