import PageTitle from '@/components/PageTitle'
import { useFormik } from 'formik'
import { type FC } from 'react'
import type { CreateThemeType } from './type/Types'
import { ThemeInputType } from './enum/Enum'
import * as Yup from 'yup'
import Input from '@/components/Input'
import Select from '@/components/Select'
import { useCreateTheme } from './hooks/useThemeData'
import { useNavigate } from 'react-router-dom'
import { Pages } from '@/config/Pages'
import { extractErrorMessage } from '@/helpers/utils'
import { toast } from 'react-toastify'
import Button from '@/components/Button'
import { TickCircle } from 'iconsax-react'

const CreateTheme: FC = () => {

    const navigate = useNavigate()
    const { mutate: createTheme, isPending } = useCreateTheme();


    const formik = useFormik<CreateThemeType>({
        initialValues: {
            title: '',
            inputType: ThemeInputType.Color,
        },
        validationSchema: Yup.object({
            title: Yup.string().required('عنوان تم الزامی است'),
            inputType: Yup.string().required('نوع ورودی تم الزامی است'),
        }),
        onSubmit: (values) => {
            createTheme(values, {
                onSuccess: () => {
                    navigate(Pages.products.theme.list)
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })
        },
    })

    return (
        <div>
            <PageTitle title1='افزودن تم' />

            <div className='bg-white p-8 rounded-4xl'>
                <div>
                    <Input
                        label='عنوان تم'
                        placeholder='عنوان تم را وارد کنید'
                        {...formik.getFieldProps('title')}
                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                    />
                </div>

                <div className='mt-5'>
                    <Select
                        label='نوع ورودی تم'
                        placeholder='انتخاب نوع ورودی تم'
                        value={formik.values.inputType}
                        onChange={(e) => formik.setFieldValue('inputType', e.target.value)}
                        items={[
                            { value: ThemeInputType.Color, label: 'رنگ' },
                            { value: ThemeInputType.Text, label: 'متن' },
                        ]}
                        error_text={formik.touched.inputType && formik.errors.inputType ? formik.errors.inputType : ''}
                    />
                </div>

                <div className='mt-5 flex justify-end'>
                    <Button
                        onClick={() => formik.handleSubmit()}
                        isLoading={isPending}
                        disabled={!formik.isValid || isPending}
                        className='w-fit'
                    >
                        <div className='flex gap-2 items-center'>
                            <TickCircle size={16} color='#fff' />
                            <div>ذخیره</div>
                        </div>
                    </Button>
                </div>
            </div>
        </div>
    )
}

export default CreateTheme