import { type FC, useState } from 'react'
// import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { useFormik } from 'formik'
import { type CategoryLearningType, type CreateLearningType } from './hooks/useLearningData'
import * as Yup from 'yup'
import { useCreateLearning, useGetCategory } from './hooks/useLearningData'
// import { useSingleUpload } from '../service/hooks/useServiceData'
import { TickCircle } from 'iconsax-react'
import Input from '../../components/Input'
import Select from '../../components/Select'
import Textarea from '../../components/Textarea'
import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
import CreateLearningSidebar from './components/CreateLearningSidebar'
// import { ErrorType } from '../../helpers/types'
// Define ErrorType inline since we're using static data
type ErrorType = {
    response?: {
        data?: {
            error: {
                message: string[];
            };
        };
    };
};
import { toast } from 'react-toastify'
import { useNavigate } from 'react-router-dom'
import { Paths } from '../../config/Paths'

const CreateLearning: FC = () => {

    const navigate = useNavigate()
    // const { t } = useTranslation('global')
    const t = (key: string) => key; // Mock translation function
    // const singleUpload = useSingleUpload()

    // Mock upload hook
    const singleUpload = {
        mutateAsync: (formData: FormData) => {
            return Promise.resolve({
                data: {
                    url: "/src/assets/images/new_order.png" // Mock URL
                }
            });
        },
        isPending: false
    };

    const createLearning = useCreateLearning()
    const getCategory = useGetCategory()
    const [videoFile, setVideoFile] = useState<File>()
    const [coverFile, setCoverFile] = useState<File>()

    const formik = useFormik<CreateLearningType>({
        initialValues: {
            title: '',
            description: '',
            coverUrl: '',
            videoUrl: '',
            videoDuration: '',
            categoryId: ''
        },
        validationSchema: Yup.object().shape({
            title: Yup.string().required(t('errors.required')),
            description: Yup.string().required(t('errors.required')),
            videoDuration: Yup.string().required(t('errors.required')),
            categoryId: Yup.string().required(t('errors.required'))
        }),
        onSubmit: async (values) => {
            return /*
            if (videoFile && coverFile) {

                const formData = new FormData()
                formData.append('file', videoFile)
                await singleUpload.mutateAsync(formData, {
                    onSuccess: (data) => {
                        values.videoUrl = data?.data?.url
                    },
                    onError: (error: ErrorType) => {
                        toast.error(error.response?.data?.error?.message[0])
                    }
                })

                const formDataCover = new FormData()
                formDataCover.append('file', coverFile)
                await singleUpload.mutateAsync(formDataCover, {
                    onSuccess: (data) => {
                        values.coverUrl = data?.data?.url
                    },
                    onError: (error: ErrorType) => {
                        toast.error(error.response?.data?.error?.message[0])
                    }
                })

                createLearning.mutate(values, {
                    onSuccess: () => {
                        toast.success('با موفقیت ثبت شد')
                        navigate(Paths.learning.list)
                    },
                    onError: (error: ErrorType) => {
                        toast.error(error.response?.data?.error?.message[0])
                    }
                })
            } else {
                toast.error('لطفا ویدیو و کاور را انتخاب کنید')
            }
                */
        }
    })

    return (
        <div className='w-full mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    آموزش جدید
                </div>
                <div>
                    <Button
                        className='px-5'
                        onClick={() => formik.handleSubmit()}
                        isLoading={createLearning.isPending || singleUpload.isPending}
                    >
                        <div className='flex gap-2'>
                            <TickCircle
                                className='size-5'
                                color='black'
                            />
                            <div>ثبت آموزش</div>
                        </div>
                    </Button>
                </div>
            </div>

            {
                getCategory.isPending ?
                    <DefaultTableSkeleton tdCount={2} />
                    :
                    <div className='flex gap-6'>
                        <div className='flex-1'>
                            <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>

                                <Input
                                    label='عنوان'
                                    name='title'
                                    onChange={formik.handleChange}
                                    error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                                />

                                <div className='rowTwoInput mt-5'>
                                    <Select
                                        items={getCategory.data?.data?.categories?.map((item: CategoryLearningType) => ({ label: item.name, value: item.id.toString() }))}
                                        label='دسته‌بندی'
                                        placeholder='انتخاب کنید'
                                        name='categoryId'
                                        onChange={formik.handleChange}
                                        error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
                                    />

                                    <Input
                                        name='videoDuration'
                                        label='مدت زمان ویدیو'
                                        onChange={formik.handleChange}
                                        error_text={formik.touched.videoDuration && formik.errors.videoDuration ? formik.errors.videoDuration : ''}
                                    />
                                </div>

                                <div className='mt-5'>
                                    <div>توضیحات</div>
                                    <div>
                                        <Textarea
                                            name='description'
                                            placeholder='توضیحات'
                                            onChange={formik.handleChange}
                                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}

                                        />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <CreateLearningSidebar
                            onChangeCoverFile={setCoverFile}
                            onChangeVideoFile={setVideoFile}
                        />
                    </div>
            }

        </div>
    )
}

export default CreateLearning