import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useGetPlanUsers } from './hooks/useSupportData'
import { useParams } from 'react-router-dom'
import Td from '../../components/Td'
import moment from 'moment-jalaali'
import { PlanItemUserType } from './types/SupportTypes'
const PlanUsers: FC = () => {

    const { t } = useTranslation('global')
    const { id } = useParams()
    const { data } = useGetPlanUsers(id)

    return (
        <div className='mt-4'>
            <div>
                {t('support.plan_users')} {data?.data?.users?.[0]?.supportPlan?.name}
            </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.full_name')} />
                            <Td text={t('support.start_date')} />
                            <Td text={t('support.end_date')} />
                            <Td text={t('support.status')} />
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        {data?.data?.users?.map((item: PlanItemUserType) => (
                            <tr className='tr' key={item.id}>
                                <Td text={item.user.firstName + ' ' + item.user.lastName} />
                                <Td text={''}>
                                    <div className='dltr text-right'>
                                        {moment(item.startDate).format('jYYYY/jMM/jDD HH:mm')}
                                    </div>
                                </Td>
                                <Td text={''}>
                                    <div className='dltr text-right'>
                                        {moment(item.endDate).format('jYYYY/jMM/jDD HH:mm')}
                                    </div>
                                </Td>
                                <Td text={t(`support.${item.status}`)} />
                                <Td text={''} />
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default PlanUsers