import { FC } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useTranslation } from 'react-i18next'
import { AddAdminRestaurantType } from '../../types/Types'
import Input from '../../../../components/Input'
import Select from '../../../../components/Select'
import Button from '../../../../components/Button'
import { useAddAdminRestaurant, useGetSystemRoles } from '../../hooks/useIconData'
import { SystemRoleType } from '../../types/Types'
import { ErrorType } from '../../../../helpers/types'
import { toast } from '../../../../components/Toast';
import { TickCircle } from 'iconsax-react'

interface AddRestaurantAdminFormProps {
    restaurantId: string
    onSuccess: () => void
    onClose: () => void
}

const AddRestaurantAdminForm: FC<AddRestaurantAdminFormProps> = ({
    restaurantId,
    onSuccess,
    onClose
}) => {
    const { t } = useTranslation('global')
    const { mutate: addAdmin, isPending } = useAddAdminRestaurant()
    const { data: rolesData } = useGetSystemRoles()

    const rolesList = rolesData?.data || []

    const formik = useFormik<AddAdminRestaurantType>({
        initialValues: {
            restaurantId: restaurantId,
            phone: '',
            firstName: '',
            lastName: '',
            roleId: ''
        },
        validationSchema: Yup.object({
            phone: Yup.string().required(t('errors.required')),
            firstName: Yup.string().required(t('errors.required')),
            lastName: Yup.string().required(t('errors.required')),
            roleId: Yup.string().required(t('errors.required'))
        }),
        onSubmit: (values) => {
            addAdmin(values, {
                onSuccess: () => {
                    toast(t('success'), 'success')
                    formik.resetForm()
                    onSuccess()
                    onClose()
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message[0], 'error')
                }
            })
        }
    })

    return (
        <form onSubmit={formik.handleSubmit} className='mt-6'>
            <div className='flex flex-col gap-6'>
                <div className='rowTwoInput'>
                    <Input
                        label={t('user.name')}
                        {...formik.getFieldProps('firstName')}
                        error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
                    />
                    <Input
                        label={t('user.family')}
                        {...formik.getFieldProps('lastName')}
                        error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
                    />
                </div>

                <div className='rowTwoInput'>
                    <Input
                        label={t('restaurant.phone')}
                        {...formik.getFieldProps('phone')}
                        error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
                    />
                    <Select
                        label={t('user.role')}
                        placeholder={t('select')}
                        items={rolesList.map((item: SystemRoleType) => ({
                            value: item.id,
                            label: item.name
                        }))}
                        {...formik.getFieldProps('roleId')}
                        error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
                    />
                </div>

                <div className='flex gap-4 justify-end mt-4'>
                    <Button
                        type='button'
                        onClick={onClose}
                        className='px-6 bg-gray-200 text-gray-700 hover:bg-gray-300'
                    >
                        {t('cancel')}
                    </Button>
                    <Button
                        type='submit'
                        isLoading={isPending}
                        className='px-6'
                    >
                        <div className='flex gap-2'>
                            <TickCircle
                                className='size-5'
                                color='white'
                            />
                            <div className='text-sm'>
                                {t('restaurant.add_admin')}
                            </div>
                        </div>
                    </Button>
                </div>
            </div>
        </form>
    )
}

export default AddRestaurantAdminForm