import { Edit } from 'iconsax-react'
import { FC, useEffect, useState } from 'react'
import { useGetBlogCategoryDetail, useUpdateBlogCategory } from '../hooks/useBlogData'
import DefaulModal from '../../../components/DefaulModal'
import { useFormik } from 'formik'
import { CreateBlogCategoryType } from '../types/BlogTypes'
import Input from '../../../components/Input'
import Textarea from '../../../components/Textarea'
import UploadBox from '../../../components/UploadBox'
import { useSingleUpload } from '../../service/hooks/useServiceData'
import SwitchComponent from '../../../components/Switch'
import Button from '../../../components/Button'
import { toast } from 'react-toastify'
import { ErrorType } from '../../../helpers/types'
interface Props {
    id: string
}

const UpdateCategory: FC<Props> = ({ id }) => {
    const [isOpen, setIsOpen] = useState(false)
    const [file, setFile] = useState<File>()
    const { data } = useGetBlogCategoryDetail(id, isOpen)
    const singleUpload = useSingleUpload()
    const updateBlogCategory = useUpdateBlogCategory()

    const formik = useFormik<CreateBlogCategoryType>({
        initialValues: {
            title: '',
            description: '',
            iconUrl: '',
            isActive: true
        },
        onSubmit: async (values) => {
            if (file) {
                const formData = new FormData()
                formData.append('file', file)
                await singleUpload.mutateAsync(formData, {
                    onSuccess: (data) => {
                        values.iconUrl = data.data.url
                    }
                })
            }
            updateBlogCategory.mutateAsync({ id: id, params: values }, {
                onSuccess: () => {
                    toast.success('دسته بندی با موفقیت ویرایش شد')
                    setIsOpen(false)
                    window.location.reload()
                },
                onError: (error: ErrorType) => {
                    toast.error(error.response?.data?.error.message[0])
                }
            })
        }
    })

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

    return (
        <div>
            <Edit onClick={() => setIsOpen(true)} size={20} color='#888' />

            <DefaulModal
                open={isOpen}
                close={() => setIsOpen(false)}
                isHeader
                title_header='ویرایش دسته بندی'
            >
                <div className='mt-8'>
                    <UploadBox
                        label='آپلود آیکون'
                        onChange={(file) => setFile(file[0])}
                    />
                    <div className='mt-6'>
                        <Input
                            label='عنوان'
                            {...formik.getFieldProps('title')}
                            className='bg-white bg-opacity-25 w-full'
                        />
                    </div>
                    <div className='mt-6'>
                        <Textarea
                            label='توضیحات'
                            {...formik.getFieldProps('description')}
                            className='bg-white bg-opacity-25 w-full'
                        />
                    </div>
                    <div className='mt-6'>
                        <SwitchComponent
                            active={formik.values.isActive}
                            onChange={(value) => formik.setFieldValue('isActive', value)}
                        />
                    </div>

                    <div className='mt-10 flex justify-end'>
                        <Button
                            onClick={() => formik.handleSubmit()}
                            className='w-fit px-7'
                            label='ذخیره'
                            isLoading={updateBlogCategory.isPending}
                        />
                    </div>
                </div>
            </DefaulModal>
        </div >
    )
}

export default UpdateCategory