import { type FC } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { useNavigate } from 'react-router-dom'
import Button from '@/components/Button'
import Input from '@/components/Input'
import Select from '@/components/Select'
import { useCreateAdmin } from './hooks/useAdminData'
import { useGetRoles } from '@/pages/roles/hooks/useRolesData'
import type { CreateAdminType } from './types/Types'
import { Pages } from '@/config/Pages'
import type { ErrorType } from '@/helpers/types'
import { extractErrorMessage } from '@/config/func'

const CreateAdmin: FC = () => {
    const navigate = useNavigate()
    const { mutate: createAdmin, isPending } = useCreateAdmin()
    const { data: rolesData } = useGetRoles()

    const roles = rolesData?.data?.map(role => ({
        label: role.name,
        value: role.id
    })) || []

    const formik = useFormik<CreateAdminType>({
        initialValues: {
            phone: '',
            firstName: '',
            lastName: '',
            roleId: '',
        },
        validationSchema: Yup.object().shape({
            phone: Yup.string().required('شماره تلفن الزامی است'),
            firstName: Yup.string().required('نام الزامی است'),
            lastName: Yup.string().required('نام خانوادگی الزامی است'),
            roleId: Yup.string().required('نقش الزامی است'),
        }),
        onSubmit: (values) => {
            createAdmin(values, {
                onSuccess: () => {
                    toast.success('مدیر با موفقیت ایجاد شد')
                    navigate(Pages.admins.list)
                },
                onError: (error: ErrorType) => {
                    toast.error(extractErrorMessage(error))
                },
            })
        },
    })

    return (
        <div className='mt-5'>
            <div className='flex w-full justify-between items-center'>
                <div className='text-lg font-light'>
                    مدیر جدید
                </div>
                <div>
                    <Button
                        className='px-5'
                        onClick={() => formik.handleSubmit()}
                        isloading={isPending}
                    >
                        <div className='flex gap-2 items-center'>
                            <TickCircle className='size-5' color='white' />
                            <div>ثبت مدیر</div>
                        </div>
                    </Button>
                </div>
            </div>

            <div className='mt-6'>
                <div className='bg-white rounded-3xl p-6'>
                    <div className='mb-4'>
                        <Input
                            label='نام'
                            name='firstName'
                            value={formik.values.firstName}
                            onChange={formik.handleChange}
                            error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Input
                            label='نام خانوادگی'
                            name='lastName'
                            value={formik.values.lastName}
                            onChange={formik.handleChange}
                            error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Input
                            label='شماره تلفن'
                            name='phone'
                            value={formik.values.phone}
                            onChange={formik.handleChange}
                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Select
                            label='نقش'
                            name='roleId'
                            value={formik.values.roleId}
                            onChange={formik.handleChange}
                            items={roles}
                            placeholder='نقش را انتخاب کنید'
                            error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CreateAdmin