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 { Checkbox } from '@/components/ui/checkbox'
import { useCreateRole, useGetPermissions } from './hooks/useRolesData'
import type { CreateRoleType } from './types/Types'
import { Pages } from '@/config/Pages'
import type { ErrorType } from '@/helpers/types'
import { extractErrorMessage } from '@/config/func'

const CreateRole: FC = () => {
    const navigate = useNavigate()
    const { mutate: createRole, isPending } = useCreateRole()
    const { data: permissionsData } = useGetPermissions()
    const formik = useFormik<CreateRoleType>({
        initialValues: {
            name: '',
            permissionIds: [],
        },
        validationSchema: Yup.object().shape({
            name: Yup.string().required('نام نقش الزامی است'),
            permissionIds: Yup.array().of(Yup.string()),
        }),
        onSubmit: (values) => {
            createRole(values, {
                onSuccess: () => {
                    toast.success('نقش با موفقیت ایجاد شد')
                    navigate(Pages.roles.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='name'
                            value={formik.values.name}
                            onChange={formik.handleChange}
                            error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <div className='text-sm mb-3'>دسترسی‌ها</div>
                        {permissionsData?.data && permissionsData.data.length > 0 ? (
                            <div className='flex gap-6 flex-wrap'>
                                {permissionsData.data.map((permission) => (
                                    <div key={permission.id} className='flex items-center gap-2'>
                                        <Checkbox
                                            checked={formik.values.permissionIds.includes(permission.id)}
                                            onCheckedChange={(checked) => {
                                                const currentIds = formik.values.permissionIds
                                                if (checked) {
                                                    formik.setFieldValue('permissionIds', [...currentIds, permission.id])
                                                } else {
                                                    formik.setFieldValue('permissionIds', currentIds.filter((id) => id !== permission.id))
                                                }
                                            }}
                                        />
                                        <label className='text-xs cursor-pointer'>{permission.title}</label>
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <div className='text-sm text-gray-500'>دسترسی‌ای یافت نشد</div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CreateRole