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'
import Pagination from '../../components/Pagination'
import { usePermissions } from '../../hooks/usePermissions'
const BlogList: FC = () => {

    const { t } = useTranslation('global')
    const [page, setPage] = useState<number>(1)
    const [search, setSearch] = useState<string>('')
    const getBlogs = useGetBlogs(search, page);
    const deleteBlog = useDeleteBlog()
    const { canCreate, canUpdate, canDelete } = usePermissions()

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

                {canCreate('blogs') && (
                    <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.author')} />
                            <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.author.firstName} {item.author.lastName}</p>
                                        </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'>
                                                {canUpdate('blogs') && (
                                                    <Link to={Pages.blog.detail + item.id}>
                                                        <Eye size={20} color='#8C90A3' />
                                                    </Link>
                                                )}
                                                {canDelete('blogs') && (
                                                    <TrashWithConfrim
                                                        onDelete={() => {
                                                            deleteBlog.mutate(item.id, {
                                                                onSuccess: () => {
                                                                    getBlogs.refetch()
                                                                }
                                                            })
                                                        }}
                                                        isLoading={deleteBlog.isPending}
                                                    />
                                                )}
                                            </div>
                                        </Td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>

                <Pagination
                    currentPage={page}
                    onPageChange={setPage}
                    totalPages={getBlogs.data?.data?.pager?.totalPages}
                />
            </div>
        </div>
    )
}

export default BlogList