import { type FC, useEffect } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Input from '@/components/Input'
import Button from '@/components/Button'
import { useCreateLearningCategory, useUpdateLearningCategory } from '../hooks/useSellerData'
import { type LearningCategory, type CreateCategoryLearning } from '../types/Types'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'

interface Props {
    open: boolean
    close: () => void
    onSuccess?: () => void
    category?: LearningCategory
}

const CreateUpdateCategoryModal: FC<Props> = ({ open, close, onSuccess, category }) => {
    const isEdit = !!category
    const createMutation = useCreateLearningCategory()
    const updateMutation = useUpdateLearningCategory()

    const formik = useFormik<CreateCategoryLearning>({
        initialValues: {
            title: category?.title || ''
        },
        validationSchema: Yup.object({
            title: Yup.string().required('عنوان دسته‌بندی الزامی است')
        }),
        onSubmit: (values) => {
            if (isEdit && category) {
                // Update category
                updateMutation.mutate({
                    id: category._id,
                    params: values
                }, {
                    onSuccess: () => {
                        toast.success('دسته‌بندی با موفقیت بروزرسانی شد')
                        close()
                        onSuccess?.()
                        formik.resetForm()
                    },
                    onError: (error) => {
                        toast.error(extractErrorMessage(error))
                    }
                })
            } else {
                // Create category
                createMutation.mutate(values, {
                    onSuccess: () => {
                        toast.success('دسته‌بندی جدید با موفقیت ایجاد شد')
                        close()
                        onSuccess?.()
                        formik.resetForm()
                    },
                    onError: (error) => {
                        toast.error(extractErrorMessage(error))
                    }
                })
            }
        }
    })

    useEffect(() => {
        if (open) {
            formik.resetForm()
            formik.setValues({
                title: category?.title || ''
            })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, category])

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader={true}
            title_header={isEdit ? "ویرایش دسته‌بندی یادگیری" : "ایجاد دسته‌بندی یادگیری جدید"}
            width={500}
        >
            <div className="space-y-6  mt-4 w-[450px]">
                <Input
                    label="عنوان دسته‌بندی"
                    placeholder="عنوان دسته‌بندی را وارد کنید"
                    {...formik.getFieldProps('title')}
                    error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                />

                <div className="flex gap-3 pt-4">
                    <Button
                        label="لغو"
                        variant="outline"
                        onClick={close}
                        className="flex-1"
                    />
                    <Button
                        label={isEdit ? "بروزرسانی" : "ایجاد"}
                        onClick={() => formik.handleSubmit()}
                        isLoading={createMutation.isPending || updateMutation.isPending}
                        disabled={!formik.isValid || createMutation.isPending || updateMutation.isPending}
                        className="flex-1"
                    />
                </div>
            </div>
        </DefaulModal>
    )
}

export default CreateUpdateCategoryModal
