import { Edit } from 'iconsax-react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import DefaulModal from '../../../components/DefaulModal'
import { useUpdateCategory } from '../hooks/useTicketData'
import { CategoriesItemType, UpdateCategoryType } from '../types/TicketTypes'
import Input from '../../../components/Input'
import Textarea from '../../../components/Textarea'
import SwitchComponent from '../../../components/Switch'
import Button from '../../../components/Button'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { ErrorType } from '../../../helpers/types'
import { toast } from 'react-toastify'

interface Props {
    category: CategoriesItemType;
}

const EditCategory: FC<Props> = ({ category }) => {
    const { t } = useTranslation('global')
    const [isOpen, setIsOpen] = useState<boolean>(false)
    const updateCategory = useUpdateCategory(category.id)

    const formik = useFormik<UpdateCategoryType>({
        initialValues: {
            title: category.title,
            description: category.description,
            isActive: category.isActive
        },
        validationSchema: Yup.object({
            title: Yup.string().required(t('errors.required')),
            description: Yup.string().required(t('errors.required')),
        }),
        onSubmit: values => {
            updateCategory.mutate(values, {
                onSuccess: () => {
                    setIsOpen(false)
                    toast.success(t('success'))
                },
                onError: (error: ErrorType) => {
                    toast.error(error.response?.data?.error.message[0])
                }
            })
        }
    })

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

            <DefaulModal
                open={isOpen}
                close={() => setIsOpen(false)}
                isHeader
                title_header={t('ticket.edit_category')}
            >
                <div className='mt-6'>
                    <div className='mt-6'>
                        <Input
                            label={t('ticket.title_category')}
                            {...formik.getFieldProps('title')}
                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                            className='bg-white bg-opacity-60'
                        />
                    </div>

                    <div className='mt-6'>
                        <Textarea
                            label={t('description')}
                            {...formik.getFieldProps('description')}
                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                            className='bg-white bg-opacity-60'
                        />
                    </div>

                    <div className='mt-6 flex justify-between items-center'>
                        <div className='text-xs'>
                            {t('ticket.status_category')}
                        </div>

                        <SwitchComponent
                            active={formik.values.isActive}
                            onChange={(value) => formik.setFieldValue('isActive', value)}
                        />
                    </div>

                    <div className='mt-8 flex justify-end'>
                        <Button
                            label={t('submit')}
                            onClick={() => formik.handleSubmit()}
                            isLoading={updateCategory.isPending}
                        />
                    </div>
                </div>
            </DefaulModal>
        </div>
    )
}

export default EditCategory