import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import Input from '../../components/Input'
import CheckBoxComponent from '../../components/CheckBoxComponent'
import { useCreateRole, useGetPermissions } from './hooks/useUserData'
import PageLoading from '../../components/PageLoading'
import { useFormik } from 'formik'
import { CreateRoleType } from './types/UserTypes'
import * as Yup from 'yup'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { ErrorType } from '../../helpers/types'
import { toast } from 'react-toastify'

const RoleCreate: FC = () => {

    const { t } = useTranslation('global')
    const navigate = useNavigate()
    const [permissions, setPermissions] = useState<string[]>([])
    const getPermissions = useGetPermissions()
    const createRole = useCreateRole()

    const handleAdd = (id: string) => {
        if (permissions.includes(id)) {
            setPermissions(permissions.filter(permission => permission !== id))
        } else {
            setPermissions([...permissions, id])
        }
    }

    const formik = useFormik<CreateRoleType>({
        initialValues: {
            name: '',
            permissions: [],
        },
        validationSchema: Yup.object({
            name: Yup.string()
                .required(t('errors.required'))
        }),
        onSubmit: (values) => {
            if (permissions.length > 0) {
                values.permissions = permissions
                createRole.mutate(values, {
                    onSuccess: () => {
                        formik.resetForm()
                        navigate(Pages.users.roleList)
                    },
                    onError: (error: ErrorType) => {
                        toast.error(error.response?.data?.error?.message[0])
                    }
                })
            } else {
                toast.error(t('user.error_count_permission'))
            }
        }
    })

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('user.add_role')}
                </div>
                <Button
                    className='w-fit px-8'
                    onClick={() => formik.handleSubmit()}
                    isLoading={createRole.isPaused}
                >
                    <div className='flex gap-2'>
                        <TickCircle
                            className='size-5'
                            color='white'
                        />
                        <div className='text-sm'>
                            {t('user.submit_role')}
                        </div>
                    </div>
                </Button>
            </div>

            {
                getPermissions.isPending ?
                    <PageLoading />
                    :
                    <div className='flex gap-6 mt-9'>
                        <div className='flex-1  bg-white py-10 xl:px-10 px-5 rounded-3xl'>

                            <Input
                                label={t('user.title_role')}
                                {...formik.getFieldProps('name')}
                                error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                            />

                            <div className='mt-8'>
                                <div className='text-sm'>
                                    {t('user.permissions')}
                                </div>

                                <div className='mt-5 text-sm flex flex-wrap gap-5'>
                                    {
                                        getPermissions.data?.data?.permissions?.map((item: { id: string, name: string }) => {
                                            return (
                                                <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
                                                    <CheckBoxComponent
                                                        checked={permissions.includes(item.id)}
                                                        onChange={() => handleAdd(item.id)}
                                                    />
                                                    <div>{item.name}</div>
                                                </div>
                                            )
                                        })
                                    }
                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
                                </div>
                            </div>

                        </div>

                        {/* <div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
                            <div className='flex justify-between items-center'>
                                <div className='text-sm'>
                                    {t('user.status_role')}
                                </div>
                                <SwitchComponent
                                    active
                                    onChange={() => { }}
                                />
                            </div>
                        </div> */}
                    </div>
            }
        </div>
    )
}

export default RoleCreate