import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Td from '../../components/Td'
import SwitchComponent from '../../components/Switch'
import { TickCircle, Trash } from 'iconsax-react'
import "quill/dist/quill.snow.css";
import Button from '../../components/Button'
import { useCreateBlogCategory, useDeleteBlogCategory, useGetBlogCategories } from './hooks/useBlogData'
import { BlogCategoryType, CreateBlogCategoryType } from './types/BlogTypes'
import moment from 'moment-jalaali'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import Textarea from '../../components/Textarea'
import UploadBoxDraggble from '../../components/UploadBoxDraggble'
import { useSingleUpload } from '../service/hooks/useServiceData'
import { toast } from '../../components/Toast';
import UpdateCategory from './components/UpdateCategory'
import { usePermissions } from '../../hooks/usePermissions'
const BlogCategory: FC = () => {

    const { t } = useTranslation('global')
    const getBlogCategories = useGetBlogCategories()
    const [file, setFile] = useState<File>()
    const singleUpload = useSingleUpload()
    const createBlogCategory = useCreateBlogCategory()
    const deleteBlogCategory = useDeleteBlogCategory()
    const { canCreate, canUpdate, canDelete } = usePermissions()
    const formik = useFormik<CreateBlogCategoryType>({
        initialValues: {
            title: '',
            description: '',
            iconUrl: '',
            isActive: true
        },
        validationSchema: Yup.object({
            title: Yup.string().required(t('errors.required')),
            description: Yup.string().required(t('errors.required')),
        }),
        onSubmit: async (values) => {
            if (!file) {
                toast('فایل را انتخاب کنید', 'error')
                return
            }
            const formData = new FormData()
            formData.append('file', file)
            await singleUpload.mutateAsync(formData, {
                onSuccess: (data) => {
                    values.iconUrl = data.data.url
                }
            })

            createBlogCategory.mutateAsync(values, {
                onSuccess: () => {
                    toast('دسته بندی با موفقیت ثبت شد', 'success')
                    setFile(undefined)
                    formik.resetForm()
                    getBlogCategories.refetch()
                }
            })
        }
    })
    return (
        <div className='mt-4'>
            <div className='flex justify-start items-center'>
                <div>
                    {t('blog.blog_category')}
                </div>
            </div>
            <div className='flex gap-6 xl:mt-8 mt-4'>
                <div className='flex-1'>
                    <div className='bg-white min-h-[calc(100vh-245px)] mt-4 rounded-3xl'>
                        <div className='relative overflow-x-auto rounded-3xl w-full'>
                            <table className='w-full text-sm '>
                                <thead className='thead'>
                                    <tr>
                                        <Td text={''} />
                                        <Td text={t('blog.blog_title')} />
                                        <Td text={'توضیحات'} />
                                        <Td text={t('blog.category')} />
                                        <Td text={t('blog.shareDate')} />
                                        <Td text={t('')} />
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        getBlogCategories.data?.data?.categories?.map((item: BlogCategoryType) => {
                                            return (
                                                <tr key={item.id} className='tr'>
                                                    <td>
                                                        <div className='flex justify-center'>
                                                            <img src={item.iconUrl} className='w-10' />
                                                        </div>
                                                    </td>
                                                    <Td text={item.title} />
                                                    <Td text={item.description} />
                                                    <Td text={t('')}>
                                                        <SwitchComponent
                                                            active={true}
                                                            onChange={() => { }}
                                                        />
                                                    </Td>
                                                    <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
                                                    <Td text={t('')}>
                                                        <div className='flex gap-2 items-center'>
                                                            {canUpdate('blog_categories') && (
                                                                <UpdateCategory id={item.id} />
                                                            )}
                                                            {canDelete('blog_categories') && (
                                                                <Trash size={20} color='red' onClick={() => {
                                                                    deleteBlogCategory.mutateAsync(item.id, {
                                                                        onSuccess: () => {
                                                                            toast('دسته بندی با موفقیت حذف شد', 'success')
                                                                            getBlogCategories.refetch()
                                                                        }
                                                                    })
                                                                }} />
                                                            )}
                                                        </div>
                                                    </Td>
                                                </tr>
                                            )
                                        })
                                    }

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                {canCreate('blog_categories') && (
                    <div className='relative bg-white min-h-[calc(100vh-185px)] w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
                        <p className='text-md'>{t('blog.add_category')}</p>
                        <div className='text-sm flex items-center justify-between mt-4'>
                            <p>
                                {t('blog.category_status')}
                            </p>
                            <div className='flex gap-1 text-xs items-center text-description'>
                                <div>
                                    {t('ads.deactive')}
                                </div>
                                <SwitchComponent
                                    active={formik.values.isActive}
                                    onChange={(value) => formik.setFieldValue('isActive', value)}
                                />
                            </div>
                        </div>

                        <div className='mt-6'>
                            <Input
                                label='عنوان'
                                {...formik.getFieldProps('title')}
                                error_text={formik.touched.title && formik.errors.title ? formik.errors.title : undefined}
                            />
                        </div>

                        <div className='mt-6'>
                            <Textarea
                                label='توضیحات'
                                {...formik.getFieldProps('description')}
                                error_text={formik.touched.description && formik.errors.description ? formik.errors.description : undefined}
                            />
                        </div>

                        <div className='mt-6'>
                            <UploadBoxDraggble
                                label='آپلود آیکون'
                                onChange={(file) => setFile(file[0])}
                            />
                        </div>

                        <Button
                            className='w-[172px] absolute bottom-4 left-4'
                            onClick={() => formik.handleSubmit()}
                            isLoading={createBlogCategory.isPending || singleUpload.isPending}
                        >
                            <div className='flex gap-2 items-center'>
                                <TickCircle size={20} color='white' />
                                <div>
                                    ذخیره
                                </div>
                            </div>
                        </Button>
                    </div>
                )}
            </div>
        </div>
    )
}
export default BlogCategory