import { FC } from 'react'
import { useParams } from 'react-router-dom'
import { useGetGuides } from './hooks/useGuideData'
import { useTranslation } from 'react-i18next'

import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import PageLoading from '../../components/PageLoading'
import Td from '../../components/Td'
import StatusWithText from '../../components/StatusWithText'
import TrashWithConfrim from '../../components/TrashWithConfrim'
import { useDeleteGuide } from './hooks/useGuideData'

type GuideItem = {
    id: string;
    title: string;
    description: string;
    content: string;
    order: number;
    isActive: boolean;
}

const List: FC = () => {
    const { t } = useTranslation('global')
    const { id } = useParams()
    const getGuides = useGetGuides(id || '')
    const deleteGuide = useDeleteGuide(id || '')

    const guides: GuideItem[] = getGuides.data?.data?.guides ?? []

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('guide.list_guide')}
                </div>
                <div>
                    <Link to={Pages.services.guide + id + '/create'}>
                        <Button
                            className='px-5'
                        >
                            <div className='flex gap-2'>
                                <Add
                                    className='size-5'
                                    color='#fff'
                                />
                                <div>{t('guide.submit_guide')}</div>
                            </div>
                        </Button>
                    </Link>
                </div>
            </div>

            {
                getGuides.isPending ?
                    <PageLoading />
                    :
                    <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('number')} />
                                    <Td text={t('title')} />
                                    <Td text={t('description')} />
                                    <Td text={t('guide.order')} />
                                    <Td text={t('status')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    guides.map((item: GuideItem, index: number) => (
                                        <tr key={item.id} className='tr'>
                                            <Td text={String(index + 1)} />
                                            <Td text={item.title} />
                                            <Td text={item.description} />
                                            <Td text={String(item.order)} />
                                            <Td text=''>
                                                <StatusWithText
                                                    variant={item.isActive ? 'success' : 'error'}
                                                    text={item.isActive ? t('active') : t('inactive')}
                                                />
                                            </Td>
                                            <Td text=''>
                                                <div className='flex items-center gap-2'>
                                                    <Link to={Pages.services.guide + id + '/' + item.id}>
                                                        <Eye size={20} color='#8C90A3' />
                                                    </Link>
                                                    <TrashWithConfrim
                                                        onDelete={() => deleteGuide.mutate(item.id)}
                                                        isLoading={deleteGuide.isPending}
                                                    />
                                                </div>
                                            </Td>
                                        </tr>
                                    ))
                                }
                            </tbody>
                        </table>
                    </div>
            }

        </div>
    )
}

export default List