import Button from '@/components/Button'
import DefaulModal from '@/components/DefaulModal'
import Input from '@/components/Input'
import Select, { type ItemsSelectType } from '@/components/Select'
import Textarea from '@/components/Textarea'
import { useFormik } from 'formik'
import { useState, type FC } from 'react'
import * as Yup from 'yup'
import type { CreateJobType } from '../types/Types'
import { useCreateJob } from '../hooks/useJobsData'

const ModalCreateJob: FC = () => {

    const createJobMutation = useCreateJob()
    const [isOpen, setIsOpen] = useState(false)

    const jobTypeOptions: ItemsSelectType[] = [
        { value: 'fullTime', label: 'تمام وقت' },
        { value: 'partTime', label: 'پاره وقت' },
        { value: 'contract', label: 'قراردادی' },
    ]

    const formik = useFormik<CreateJobType>({
        initialValues: {
            title: '',
            description: '',
            location: '',
            type: 'fullTime',
        },
        onSubmit: async (values) => {
            try {
                await createJobMutation.mutateAsync(values)
                setIsOpen(false)
                formik.resetForm()
            } catch (error) {
                console.error('خطا در ایجاد شغل:', error)
            }
        },
        validationSchema: Yup.object({
            title: Yup.string().required('عنوان شغل الزامی است'),
            description: Yup.string().required('توضیحات شغل الزامی است'),
            location: Yup.string().required('مکان شغل الزامی است'),
            type: Yup.string().required('نوع شغل الزامی است'),
        })
    })

    const handleCloseModal = () => {
        setIsOpen(false)
        formik.resetForm()
    }

    return (
        <div>
            <div className='flex justify-end mt-5'>
                <Button
                    label='افزودن شغل'
                    onClick={() => setIsOpen(true)}
                    className='w-fit'
                />
            </div>

            <DefaulModal
                open={isOpen}
                close={handleCloseModal}
                isHeader={true}
                title_header='افزودن شغل جدید'
                width={600}
            >
                <form onSubmit={formik.handleSubmit} className='space-y-4 w-[400px] mt-4'>
                    <Input
                        label='عنوان شغل'
                        name='title'
                        value={formik.values.title}
                        onChange={formik.handleChange}
                        error_text={formik.touched.title ? formik.errors.title : undefined}
                        placeholder='عنوان شغل را وارد کنید'
                    />

                    <Textarea
                        label='توضیحات شغل'
                        name='description'
                        value={formik.values.description}
                        onChange={formik.handleChange}
                        error_text={formik.touched.description ? formik.errors.description : undefined}
                        placeholder='توضیحات شغل را وارد کنید'
                    />

                    <Input
                        label='مکان'
                        name='location'
                        value={formik.values.location}
                        onChange={formik.handleChange}
                        error_text={formik.touched.location ? formik.errors.location : undefined}
                        placeholder='مکان شغل را وارد کنید'
                    />

                    <Select
                        label='نوع شغل'
                        name='type'
                        value={formik.values.type}
                        onChange={formik.handleChange}
                        error_text={formik.touched.type ? formik.errors.type : undefined}
                        items={jobTypeOptions}
                        placeholder='نوع شغل را انتخاب کنید'
                    />

                    <div className='flex justify-end gap-3 pt-4'>
                        <Button
                            type='button'
                            label='لغو'
                            onClick={handleCloseModal}
                            className='w-fit bg-gray-100 text-gray-700 hover:bg-gray-200'
                        />
                        <Button
                            type='submit'
                            label={createJobMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
                            disabled={createJobMutation.isPending}
                            className='w-fit'
                        />
                    </div>
                </form>
            </DefaulModal>
        </div>
    )
}

export default ModalCreateJob