import { type FC, useEffect } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import Select from '@/components/Select'
import Button from '@/components/Button'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useCreateBlogCategory, useUpdateBlogCategory, useGetBlogCategories } from '../hooks/useBlogsData'
import { type CreateCategoryBlogType, type BlogCategory } from '../types/Types'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'
import { useQueryClient } from '@tanstack/react-query'

interface CategoryModalProps {
    open: boolean
    close: () => void
    mode: 'create' | 'update'
    category?: BlogCategory | null
}

const CategoryModal: FC<CategoryModalProps> = ({ open, close, mode, category }) => {
    const queryClient = useQueryClient()
    const { data: categoriesData } = useGetBlogCategories()
    const createCategoryMutation = useCreateBlogCategory()
    const updateCategoryMutation = useUpdateBlogCategory()

    const formik = useFormik<CreateCategoryBlogType>({
        initialValues: {
            title_fa: '',
            slug: '',
            description: '',
            parent: '',
        },
        validationSchema: Yup.object({
            title_fa: Yup.string().required('عنوان دسته‌بندی الزامی است'),
            slug: Yup.string().required('اسلاگ الزامی است'),
            description: Yup.string().required('توضیحات الزامی است'),
        }),
        onSubmit: async (values) => {
            const submitData = {
                ...values,
                parent: values.parent || undefined,
            }

            if (mode === 'create') {
                createCategoryMutation.mutate(submitData, {
                    onSuccess: () => {
                        toast.success('دسته‌بندی با موفقیت ایجاد شد')
                        queryClient.invalidateQueries({ queryKey: ['blog-categories'] })
                        formik.resetForm()
                        close()
                    },
                    onError: (error) => {
                        toast.error(extractErrorMessage(error))
                    }
                })
            } else if (mode === 'update' && category) {
                updateCategoryMutation.mutate(
                    { id: category._id, params: submitData },
                    {
                        onSuccess: () => {
                            toast.success('دسته‌بندی با موفقیت ویرایش شد')
                            queryClient.invalidateQueries({ queryKey: ['blog-categories'] })
                            formik.resetForm()
                            close()
                        },
                        onError: (error) => {
                            toast.error(extractErrorMessage(error))
                        }
                    }
                )
            }
        },
    })

    useEffect(() => {
        if (mode === 'update' && category) {
            formik.setValues({
                title_fa: category.title_fa,
                slug: category.slug,
                description: category.description,
                parent: category.parent || '',
            })
        } else if (mode === 'create') {
            formik.resetForm()
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [mode, category, open])

    const parentOptions = categoriesData?.results?.categories
        ?.filter((c: BlogCategory) => c._id !== category?._id)
        ?.map((c: BlogCategory) => ({
            value: c._id,
            label: c.title_fa
        })) || []

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader={true}
            title_header={mode === 'create' ? 'افزودن دسته‌بندی جدید' : 'ویرایش دسته‌بندی'}
            width={600}
        >
            <div className='mt-6 space-y-4 w-[450px]'>
                <Input
                    label='عنوان دسته‌بندی'
                    placeholder='مثال: تکنولوژی'
                    {...formik.getFieldProps('title_fa')}
                    error_text={formik.touched.title_fa && formik.errors.title_fa ? formik.errors.title_fa : ''}
                />

                <Input
                    label='اسلاگ'
                    placeholder='مثال: technology'
                    {...formik.getFieldProps('slug')}
                    error_text={formik.touched.slug && formik.errors.slug ? formik.errors.slug : ''}
                />

                <Textarea
                    label='توضیحات'
                    placeholder='توضیحات دسته‌بندی را وارد کنید...'
                    {...formik.getFieldProps('description')}
                    error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                />

                <Select
                    label='دسته والد (اختیاری)'
                    placeholder='انتخاب دسته والد'
                    items={parentOptions}
                    {...formik.getFieldProps('parent')}
                    error_text={formik.touched.parent && formik.errors.parent ? formik.errors.parent : ''}
                />

                <div className='flex gap-3 justify-end mt-6'>
                    <Button
                        label='لغو'
                        onClick={close}
                        className='bg-gray-200 text-gray-700'
                    />
                    <Button
                        label={mode === 'create' ? 'ایجاد' : 'بروزرسانی'}
                        onClick={() => formik.handleSubmit()}
                        isLoading={createCategoryMutation.isPending || updateCategoryMutation.isPending}
                        disabled={!formik.isValid || createCategoryMutation.isPending || updateCategoryMutation.isPending}
                    />
                </div>
            </div>
        </DefaulModal>
    )
}

export default CategoryModal

