import { useFormik } from 'formik'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { CreateSliderType } from './types/SliderTypes'
import * as Yup from 'yup'
import Button from '../../components/Button'
import { useCreateSlider } from './hooks/useSliderData'
import { TickCircle } from 'iconsax-react'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import SwitchComponent from '../../components/Switch'
import { toast } from 'react-toastify'
import { useSingleUpload } from '../service/hooks/useServiceData'
import { Pages } from '../../config/Pages'
import { useNavigate } from 'react-router-dom'
import { ErrorType } from '../../helpers/types'
const CreateSlider: FC = () => {

    const navigate = useNavigate()
    const { t } = useTranslation('global')
    const createSlider = useCreateSlider()
    const singleUpload = useSingleUpload()
    const [file, setFile] = useState<File | null>(null)
    const formik = useFormik<CreateSliderType>({
        initialValues: {
            title: '',
            description: '',
            imageUrl: '',
            link: '',
            order: 0,
            isActive: true,
        },
        validationSchema: Yup.object({
            title: Yup.string().required(t('errors.required')),
            description: Yup.string().required(t('errors.required')),
            link: Yup.string().required(t('errors.required')),
            order: Yup.number().required(t('errors.required')),
        }),
        onSubmit: async (values) => {
            if (!file) {
                toast.error(t('slider.image_required'))
                return
            }

            const formData = new FormData()
            formData.append('file', file)
            await singleUpload.mutateAsync(formData, {
                onSuccess: (data) => {
                    values.imageUrl = data?.data?.url
                }
            })

            values.order = +values.order

            createSlider.mutate(values, {
                onSuccess: () => {
                    toast.success(t('slider.slider_created'))
                    navigate(Pages.sliders.list)
                },
                onError: (error: ErrorType) => {
                    toast.error(error.response?.data?.error.message[0])
                }
            })
        }
    })

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('slider.new_slider')}
                </div>
                <Button
                    className='w-[172px]'
                    onClick={() => formik.handleSubmit()}
                    isLoading={createSlider.isPending || singleUpload.isPending}
                >
                    <div className='flex gap-2 items-center'>
                        <TickCircle size={20} color='white' />
                        <div>
                            {t('slider.submit')}
                        </div>
                    </div>
                </Button>
            </div>
            <div className='flex-1 mt-9 bg-white py-10 xl:px-10 px-5 rounded-3xl'>
                <div className='flex flex-col gap-6'>
                    <div className='rowTwoInput'>
                        <Input
                            label={t('slider.title')}
                            {...formik.getFieldProps('title')}
                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                        />

                        <Input
                            label={t('slider.link')}
                            {...formik.getFieldProps('link')}
                            error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
                        />
                    </div>

                    <div className='rowTwoInput'>
                        <Textarea
                            label={t('slider.description')}
                            {...formik.getFieldProps('description')}
                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                        />
                    </div>

                    <div className='rowTwoInput'>
                        <div className='w-full'>
                            <UploadBox
                                label={t('slider.image')}
                                onChange={(file) => setFile(file[0])}
                            />
                        </div>

                        <Input
                            label={t('slider.order')}
                            {...formik.getFieldProps('order')}
                            error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
                        />
                    </div>

                    <div className='rowTwoInput'>
                        <div className='w-full'>
                            <SwitchComponent
                                label={t('slider.isActive')}
                                active={formik.values.isActive}
                                onChange={(value) => formik.setFieldValue('isActive', value)}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CreateSlider