import { FC, Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import CreatePlan from './components/CreatePlan'
import { useGetPlans } from './hooks/useServiceData'
import { useParams } from 'react-router-dom'
import PageLoading from '../../components/PageLoading'
import Td from '../../components/Td'
import { PlanItemType } from './types/ServiceTypes'
import ToggleStatusPlan from './components/ToggleStatusPlan'
import EditPlan from './components/EditPlan'
import { NumberFormat } from '../../config/func'

const Plans: FC = () => {

    const { id } = useParams()
    const { t } = useTranslation('global')
    const getPlans = useGetPlans(id)

    return (
        <div className='mt-4'>
            {
                getPlans.isPending ?
                    <PageLoading />
                    :
                    <Fragment>
                        <div className='flex w-full justify-between items-center'>
                            <div>
                                {t('plan.plans_list') + ' ' + getPlans.data?.data?.service?.name}
                            </div>
                            <CreatePlan />
                        </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('title')} />
                                        <Td text={t('plan.time')} />
                                        <Td text={t('plan.price')} />
                                        <Td text={t('status')} />
                                        <Td text={''} />
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        getPlans.data?.data?.subscriptions.map((item: PlanItemType) => (
                                            <tr key={item.id} className='tr'>
                                                <Td text={item.name} />
                                                <Td text={item.duration + ''} />
                                                <Td text={NumberFormat(+item.price)} />
                                                <Td text={''}>
                                                    <ToggleStatusPlan defaultActive={item.isActive} id={item.id} />
                                                </Td>
                                                <Td text=''>
                                                    <EditPlan
                                                        id={item.id}
                                                    />
                                                </Td>
                                            </tr>
                                        ))
                                    }
                                </tbody>
                            </table>
                        </div>
                    </Fragment>
            }

        </div>
    )
}

export default Plans