import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../../../components/Button'
import DefaulModal from '../../../../components/DefaulModal'
import Input from '../../../../components/Input'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { toast } from '../../../../components/Toast';
import { TickCircle } from 'iconsax-react'
import { useCreateGroupIcon } from '../../hooks/useIconData'
import { CreateGroupIconType } from '../../types/Types'
import { ErrorType } from '../../../../helpers/types'

interface CreateGroupIconProps {
    open: boolean
    close: () => void
    onSuccess?: () => void
}

const CreateGroupIcon: FC<CreateGroupIconProps> = ({ open, close, onSuccess }) => {
    const { t } = useTranslation('global')
    const createGroupIcon = useCreateGroupIcon()

    const formik = useFormik<CreateGroupIconType>({
        initialValues: {
            name: ''
        },
        validationSchema: Yup.object({
            name: Yup.string()
                .required(t('errors.required'))
        }),
        onSubmit: (values) => {
            createGroupIcon.mutate(values, {
                onSuccess: () => {
                    formik.resetForm()
                    close()
                    toast(t('success'), 'success')
                    onSuccess?.()
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message[0], 'error')
                }
            })
        }
    })

    const handleClose = () => {
        formik.resetForm()
        close()
    }

    return (
        <DefaulModal
            open={open}
            close={handleClose}
            title_header={t('icon.add_new_group')}
            isHeader
        >
            <div className='mt-6'>
                <Input
                    label={t('title')}
                    className='bg-white bg-opacity-30'
                    name='name'
                    value={formik.values.name}
                    onChange={formik.handleChange}
                    error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                />

                <div className='mt-12 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('cancel')}
                            onClick={handleClose}
                        />

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

export default CreateGroupIcon