import { FC, useState } from 'react'
import SwitchComponent from '../../../components/Switch'
import { useFormik } from 'formik'
import { CreateIndustryType } from '../types/CompanyTypes'
import * as yup from 'yup'
import Input from '../../../components/Input'
import UploadBoxDraggble from '../../../components/UploadBoxDraggble'
import Button from '../../../components/Button'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { useSingleUpload } from '../../service/hooks/useServiceData'
import { useCreateIndustry } from '../hooks/useCompanyData'
import { ErrorType } from '../../../helpers/types'

type Props = {
    refetch: () => void
}

const CreateIndustry: FC<Props> = ({ refetch }) => {

    const [file, setFile] = useState<File>()
    const singleUpload = useSingleUpload()
    const createIndustry = useCreateIndustry()

    const formik = useFormik<CreateIndustryType>({
        initialValues: {
            title: '',
            iconUrl: '',
            isActive: true,
        },
        validationSchema: yup.object({
            title: yup.string().required('عنوان صنعت الزامی است'),
        }),
        onSubmit: (values) => {
            if (!file) {
                toast.error('لطفا آیکن صنعت را انتخاب کنید')
                return
            }

            const formData = new FormData()
            formData.append('file', file)
            singleUpload.mutate(formData, {
                onSuccess: (data) => {
                    values.iconUrl = data?.data?.url
                    createIndustry.mutate(values, {
                        onSuccess: () => {
                            toast.success('صنعت با موفقیت ثبت شد')
                            refetch()
                        },
                        onError: (error: ErrorType) => {
                            toast.error(error?.response?.data?.error.message[0])
                        }
                    })
                }
            })
        },
    })

    return (
        <div className='bg-white w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
            <div className='flex justify-between items-center'>
                <div className='text-sm'>
                    وضعیت صنعت
                </div>
                <SwitchComponent
                    active={formik.values.isActive}
                    onChange={(value) => {
                        formik.setFieldValue('isActive', value)
                    }}
                />
            </div>

            <div className='mt-6'>
                <Input
                    label='عنوان صنعت'
                    {...formik.getFieldProps('title')}
                    error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                />
            </div>

            <div className='mt-6'>
                <UploadBoxDraggble
                    label='آیکن صنعت'
                    onChange={(files) => {
                        setFile(files[0])
                    }}
                />
            </div>

            <div className='mt-6 flex justify-end'>
                <Button
                    onClick={() => formik.handleSubmit()}
                    className='w-fit px-4'
                    isLoading={createIndustry.isPending || singleUpload.isPending}
                >
                    <div className='flex items-center gap-2'>
                        <TickCircle
                            size={20}
                            color='#fff'
                        />
                        <span>ثبت صنعت</span>
                    </div>
                </Button>
            </div>

        </div>
    )
}

export default CreateIndustry