import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import Input from '../../components/Input'
import { useGetBlogs, useDeleteBlog } from './hooks/useBlogData'
import { BlogItemType } from './types/BlogTypes'
import moment from 'moment-jalaali'
import TrashWithConfrim from '../../components/TrashWithConfrim'
const BlogList: FC = () => {

    const { t } = useTranslation('global')
    const [search, setSearch] = useState<string>('')
    const getBlogs = useGetBlogs(search);
    const deleteBlog = useDeleteBlog()

    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('blog.blog')}
                </div>

                <Link to={Pages.blog.create}>
                    <Button
                        className='w-[172px]'
                    >
                        <div className='flex gap-2 items-center'>
                            <Add size={20} color='white' />
                            <div>
                                {t('blog.new_blog')}
                            </div>
                        </div>
                    </Button>
                </Link>
            </div>




            <div className='mt-4'>
                <div className='flex flex-col xl:flex-row justify-between items-center xl:items-end'>
                    {/* <div className='flex flex-col xl:flex-row items-center gap-4'>
                        <div className='w-[400px] xl:w-[200px]'>
                            <Select
                                label={t('blog.category')}
                                items={[
                                    {
                                        label: 'تست',
                                        value: 'active'
                                    }
                                ]}
                                className='bg-white border'
                            />
                        </div>
                        <div className='w-[400px] xl:w-[200px]'>
                            <Select
                                label={t('ads.status')}
                                items={[
                                    {
                                        label: 'فعال',
                                        value: 'active'
                                    }
                                ]}
                                className='bg-white border'
                            />
                        </div>
                        <div className='w-[400px] xl:w-[200px]'>
                            <DatePickerComponent
                                label={t('ads.date')}
                                onChange={() => { }}
                                placeholder=''
                                defaulValue='1400-01-01'
                            />
                        </div>
                    </div> */}


                    <div className='w-[400px] mt-8 xl:mt-0 xl:w-[300px]'>
                        <Input
                            variant='search'
                            placeholder={t('ads.search')}
                            className='bg-white w-full'
                            onChangeSearchFinal={(value) => {
                                setSearch(value)
                            }}
                        />
                    </div>

                </div>
            </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('blog.picture')} />
                            <Td text={t('blog.blog_title')} />
                            <Td text={t('blog.blog_summary')} />
                            <Td text={t('blog.category')} />
                            <Td text={t('blog.shareDate')} />
                            {/* <Td text={t('blog.status')} /> */}
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            getBlogs.data?.data?.blogs?.map((item: BlogItemType) => {
                                return (
                                    <tr key={item.id} className='tr'>
                                        <Td text={''}>
                                            <img src={item.imageUrl} alt={item.title} className='w-20 rounded-lg' />
                                        </Td>
                                        <Td text={''}>
                                            <p className='max-w-[150px] truncate'>{item.title}</p>
                                        </Td>
                                        <Td text={''}>
                                            <p className='max-w-[150px] truncate' dangerouslySetInnerHTML={{ __html: item.previewContent }}></p>
                                        </Td>
                                        <Td text={item.category?.title} />
                                        <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
                                        {/* <Td text={t('')}>
                                            <SwitchComponent
                                                active={true}
                                                onChange={() => { }}
                                            />
                                        </Td> */}
                                        <Td text={''}>
                                            <div className='flex gap-2'>
                                                <Link to={Pages.blog.detail + item.id}>
                                                    <Eye size={20} color='#8C90A3' />
                                                </Link>
                                                <TrashWithConfrim
                                                    onDelete={() => {
                                                        deleteBlog.mutate(item.id, {
                                                            onSuccess: () => {
                                                                getBlogs.refetch()
                                                            }
                                                        })
                                                    }}
                                                    isLoading={deleteBlog.isPending}
                                                />
                                            </div>
                                        </Td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default BlogList