import { Edit, TickCircle } from 'iconsax-react'
import { FC, useEffect, useState } from 'react'
import DefaulModal from '../../../components/DefaulModal'
import Input from '../../../components/Input'
import * as Yup from 'yup'
import { useFormik } from 'formik'
import { toast } from 'react-toastify'
import { useTranslation } from 'react-i18next'
import { ErrorType } from '../../../helpers/types'
import UploadBox from '../../../components/UploadBox'
import Button from '../../../components/Button'
import { useGetIndustryDetail, useUpdateIndustry } from '../hooks/useCompanyData'
import { useSingleUpload } from '../../service/hooks/useServiceData'
import { CreateIndustryType } from '../types/CompanyTypes'

type Props = {
    id: string,
    refetch: () => void
}

const UpdateIndustry: FC<Props> = (props) => {
    const { t } = useTranslation('global')
    const [showModal, setShowModal] = useState<boolean>(false)
    const [file, setFile] = useState<File>()
    const getIndustryDetail = useGetIndustryDetail(props.id)
    const singleUpload = useSingleUpload()
    const updateIndustry = useUpdateIndustry()

    const formik = useFormik<CreateIndustryType>({
        initialValues: {
            title: '',
            isActive: true,
            iconUrl: '',
        },
        validationSchema: Yup.object({
            title: Yup.string().required(t('errors.required')),
        }),
        onSubmit: async (values) => {
            if (file) {
                const formData = new FormData()
                formData.append('file', file)
                await singleUpload.mutateAsync(formData, {
                    onSuccess: (data) => {
                        values.iconUrl = data?.data?.url
                    },
                    onError: (error: ErrorType) => {
                        toast.error(error.response?.data?.error?.message[0])
                    }
                })
            }

            const params = {
                ...values,
            }
            updateIndustry.mutate({ id: props.id, params }, {
                onSuccess: () => {
                    formik.resetForm()
                    getIndustryDetail.refetch()
                    toast.success(t('success'))
                    setShowModal(false)
                    props.refetch()
                },
                onError: (error: ErrorType) => {
                    toast.error(error?.response?.data?.error?.message[0])
                }
            })
        }
    })

    useEffect(() => {
        if (getIndustryDetail.data) {
            const data = getIndustryDetail.data?.data?.industry
            formik.setValues({
                title: data?.title,
                iconUrl: data?.iconUrl,
                isActive: data?.isActive,
            })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [getIndustryDetail.data, showModal])

    return (
        <div>
            <Edit onClick={() => setShowModal(true)} size={20} color='#888888' />

            <DefaulModal
                open={showModal}
                close={() => setShowModal(false)}
                isHeader
                title_header='ویرایش دسته بندی'
            >
                <div className='mt-5'>
                    <Input
                        label={t('service.title_category')}
                        value={formik.values.title}
                        name='title'
                        onChange={formik.handleChange}
                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                        className='bg-white bg-opacity-40'
                    />
                </div>

                <div className='mt-5'>
                    <UploadBox
                        label='آیکون جدید'
                        onChange={(file) => setFile(file[0])}
                    />
                </div>

                <div className='mt-10 border-t border-border pt-5 flex justify-end'>
                    <div className='flex gap-5 items-center'>
                        <Button
                            className='w-[150px] bg-white bg-opacity-15 text-description'
                            label={t('plan.cancel')}
                            onClick={() => setShowModal(false)}
                        />

                        <Button
                            onClick={() => formik.handleSubmit()}
                        >
                            <div className='flex gap-2'>
                                <TickCircle
                                    size={20}
                                    color='white'
                                />
                                <div>
                                    {t('save')}
                                </div>
                            </div>
                        </Button>
                    </div>
                </div>
            </DefaulModal>
        </div>
    )
}

export default UpdateIndustry