import { FC } from 'react'
import { useGetPlans } from './hooks/useSupportData'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import { NumberFormat } from '../../config/func'
import { Add, Edit } from 'iconsax-react'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import Delete from './components/Delete'
import Button from '../../components/Button'
const SupportList: FC = () => {

    const { t } = useTranslation('global')
    const { data, refetch } = useGetPlans()

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('support.plans')}
                </div>

                <Link to={Pages.support.create}>
                    <Button
                        className='w-fit px-6'
                    >
                        <div className='flex gap-2 items-center'>
                            <Add size={20} color='white' />
                            <div>
                                {t('support.new_plan')}
                            </div>
                        </div>
                    </Button>
                </Link>
            </div>

            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                <table className='w-full text-sm '>
                    <thead className='thead'>
                        <tr>
                            <Td text={t('support.plan_name')} />
                            <Td text={t('support.price')} />
                            <Td text={t('support.duration')} />
                            <Td text={t('support.users')} />
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            data?.data?.supportPlans?.map((item: { id: string, name: string, price: number, duration: string, userCount: number }) => {
                                return (
                                    <tr className='tr' key={item.id}>
                                        <Td text={item.name} />
                                        <Td text={NumberFormat(item.price)} />
                                        <Td text={item.duration} />
                                        <Td text={''}>
                                            <Link to={Pages.support.planUsers + item.id}>
                                                <div className='flex items-center gap-2 text-blue-500'>
                                                    <div>
                                                        {item.userCount}
                                                    </div>
                                                    کاربر
                                                </div>
                                            </Link>
                                        </Td>
                                        <Td text={''}>
                                            <div className='flex items-center gap-2'>
                                                <Link to={Pages.support.detail + item.id}>
                                                    <Edit size={20} color='#8C90A3' />
                                                </Link>
                                                <Delete id={item.id} refetch={refetch} />
                                            </div>
                                        </Td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default SupportList