import { FC } from 'react'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import Button from '../../components/Button'
import { Add, Edit } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import { useDeleteSlider, useGetSliders } from './hooks/useSliderData'
import { SliderItemType } from './types/SliderTypes'
import PageLoading from '../../components/PageLoading'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
import TrashWithConfrim from '../../components/TrashWithConfrim'
const SliderList: FC = () => {

    const { t } = useTranslation('global')
    const { data: sliders, isPending, refetch } = useGetSliders()
    const deleteSlider = useDeleteSlider()

    const handleDelete = (id: string) => {
        deleteSlider.mutate(id, {
            onSuccess: () => {
                toast.success(t('slider.slider_deleted'))
                refetch()
            },
            onError: (error: ErrorType) => {
                toast.error(error.response?.data?.error.message[0])
            }
        })
    }

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('slider.list_slider')}
                </div>
                <div>
                    <Link to={Pages.sliders.create}>
                        <Button
                            className='px-5'
                        >
                            <div className='flex gap-2'>
                                <Add
                                    className='size-5'
                                    color='#fff'
                                />
                                <div>{t('slider.submit_slider')}</div>
                            </div>
                        </Button>
                    </Link>
                </div>
            </div>

            {
                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('slider.image')} />
                                    <Td text={t('slider.title')} />
                                    <Td text={t('slider.description')} />
                                    <Td text={t('slider.order')} />
                                    <Td text={t('slider.isActive')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {sliders?.data?.sliders?.map((item: SliderItemType) => (
                                    <tr className='tr' key={item.id}>
                                        <Td text={''}>
                                            <img src={item.imageUrl} alt={item.title} className='w-14' />
                                        </Td>
                                        <Td text={item.title} />
                                        <Td text={item.description} />
                                        <Td text={item.order.toString()} />
                                        <Td text={item.isActive ? t('slider.active') : t('slider.inactive')} />
                                        <Td text={''}>
                                            <div className='flex gap-2'>
                                                <Link to={Pages.sliders.detail + item.id}>
                                                    <Edit
                                                        className='size-5'
                                                        color='#888'
                                                    />
                                                </Link>
                                                <TrashWithConfrim
                                                    onDelete={() => handleDelete(item.id)}
                                                    isLoading={deleteSlider.isPending}
                                                />
                                            </div>
                                        </Td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
            }

        </div>
    )
}

export default SliderList