import { useFormik } from 'formik'
import PageTitle from '../../components/PageTitle'
import { type FC, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { useGetTicketCategory, useUpdateTicketCategory } from './hooks/useTicketData'
import type { CreateTicketCategoryType } from './types/Types'
import * as Yup from 'yup'
import { useNavigate } from 'react-router-dom'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'
import { Pages } from '../../config/Pages'

const Update: FC = () => {
    const navigate = useNavigate()
    const { id } = useParams<{ id: string }>()
    const { data: categoryDetail, isLoading: categoryDetailLoading, error: categoryDetailError } = useGetTicketCategory(id!)
    const updateCategoryMutation = useUpdateTicketCategory()

    const formik = useFormik<CreateTicketCategoryType>({
        initialValues: {
            title_fa: "",
            description: "",
        },
        validationSchema: Yup.object({
            title_fa: Yup.string().required("عنوان الزامی است"),
            description: Yup.string().required("توضیحات الزامی است"),
        }),
        onSubmit: async (values) => {
            updateCategoryMutation.mutate({ categoryId: id!, params: values }, {
                onSuccess: () => {
                    toast.success('دسته‌بندی با موفقیت ویرایش شد')
                    navigate(Pages.ticket.category.list)
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })
        }
    })

    useEffect(() => {
        if (categoryDetail?.results?.category) {
            formik.setValues({
                title_fa: categoryDetail.results.category.title_fa,
                description: categoryDetail.results.category.description,
            })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [categoryDetail])

    if (categoryDetailLoading) {
        return <div>در حال بارگذاری...</div>
    }

    if (categoryDetailError) {
        return <div>خطا در بارگذاری داده‌ها</div>
    }

    return (
        <div className='mt-4'>
            <PageTitle />
            <div className='flex justify-between items-center'>
                <div className='flex items-center gap-3'>
                    <h1>ویرایش دسته‌بندی</h1>
                </div>
                <div>
                    <Button
                        className='px-6'
                        onClick={() => formik.handleSubmit()}
                        isLoading={updateCategoryMutation.isPending}
                        disabled={!formik.isValid || updateCategoryMutation.isPending}
                    >
                        <div className='flex gap-2 items-center'>
                            <TickCircle size={16} color='#fff' />
                            <div>ذخیره تغییرات</div>
                        </div>
                    </Button>
                </div>
            </div>

            <div className='flex gap-6 xl:mt-8 mt-6'>
                {/* اطلاعات اصلی */}
                <div className='flex-1 text-sm bg-white py-8 xl:px-10 px-6 rounded-3xl'>
                    <h2 className='text-lg font-medium mb-6'>اطلاعات دسته‌بندی</h2>

                    <div className='space-y-6'>
                        <Input
                            label='عنوان دسته‌بندی'
                            placeholder='مثال: پشتیبانی فنی'
                            {...formik.getFieldProps('title_fa')}
                            error_text={formik.touched.title_fa && formik.errors.title_fa ? formik.errors.title_fa : ''}
                        />

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

export default Update
