import { type FC, useState } from 'react'
import { useCreateAboutUs } from './hooks/useSettingData'
import { useFormik } from 'formik';
import type { CreateAboutUs } 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 { useUploadSingle } from '../uploader/hooks/useUploaderData'
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'
import { Pages } from '@/config/Pages'

const AboutUsCreate: FC = () => {
    const navigate = useNavigate()
    const uploadSingle = useUploadSingle()
    const createAboutUs = useCreateAboutUs();

    const [imageFile, setImageFile] = useState<File[]>([])

    const formik = useFormik<CreateAboutUs>({
        initialValues: {
            title: '',
            description: '',
            imageUrl: '',
        },
        validationSchema: Yup.object({
            title: Yup.string().required('عنوان درباره ما الزامی است'),
            description: Yup.string().required('توضیحات درباره ما الزامی است'),
        }),
        onSubmit: async (values) => {
            let imageUrl = values.imageUrl

            if (imageFile.length > 0) {
                const imageResponse = await uploadSingle.mutateAsync(imageFile[0])
                imageUrl = imageResponse.results?.url?.url || ''
            }

            const submitData = {
                ...values,
                imageUrl
            }

            createAboutUs.mutate(submitData, {
                onSuccess: () => {
                    toast.success('اطلاعات درباره ما با موفقیت ایجاد شد')
                    navigate(Pages.pages.aboutUs)
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })
        }
    })

    return (
        <div className='mt-4'>
            <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={createAboutUs.isPending || uploadSingle.isPending}
                        disabled={!formik.isValid || createAboutUs.isPending || uploadSingle.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')}
                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                        />

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

                {/* فایل‌ها */}
                <div className='w-80 space-y-6'>
                    <div className='text-sm bg-white py-8 px-6 rounded-3xl'>
                        <h2 className='text-lg font-medium mb-6'>فایل‌ها</h2>

                        <div className='space-y-6'>
                            <div>
                                <UploadBoxDraggble
                                    label='تصویر درباره ما'
                                    isMultiple={false}
                                    onChange={(files) => setImageFile(files)}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default AboutUsCreate