import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import Input from '../../components/Input'
import Td from '../../components/Td'
import { Link, useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useDeleteUser, useGetUsers } from './hooks/useUserData'
import { UserItemType } from './types/UserTypes'
import PageLoading from '../../components/PageLoading'
import { toast } from '../../components/Toast';
import { ErrorType } from '../../helpers/types'
import Pagination from '../../components/Pagination'
import TrashWithConfrim from '../../components/TrashWithConfrim'
import { usePermissions } from '../../hooks/usePermissions'
const UsersList: FC = () => {

    const navigate = useNavigate()
    const { t } = useTranslation('global')
    const { canCreate, canUpdate, canDelete } = usePermissions()
    const [page, setPage] = useState<number>(1)
    const [search, setSearch] = useState<string>('')
    const getUsers = useGetUsers(search, undefined, page)
    const deleteUser = useDeleteUser()

    const handleDeleteUser = (id: string) => {
        deleteUser.mutate(id, {
            onSuccess: () => {
                toast(t('success'), 'success')
                getUsers.refetch()
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error?.message[0], 'error')
            }
        })
    }

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('user.users_list')}
                </div>
                {canCreate('admins') && (
                    <div>
                        <Button
                            className='px-5'
                            onClick={() => navigate(Pages.users.create)}
                        >
                            <div className='flex gap-2'>
                                <Add
                                    className='size-5'
                                    color='#fff'
                                />
                                <div>{t('user.add_user')}</div>
                            </div>
                        </Button>
                    </div>
                )}
            </div>

            <div className='flex justify-between items-center mt-12'>

                <div>
                    <Input
                        variant='search'
                        placeholder={t('service.search')}
                        className='bg-white border border-border'
                        onChangeSearchFinal={(value) => setSearch(value)}
                    />
                </div>
            </div>

            {
                getUsers.isPending ?
                    <PageLoading />
                    :
                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                        <table className='w-full text-sm '>
                            <thead className='thead'>
                                <tr>
                                    <Td text={t('user.name')} />
                                    <Td text={t('user.email')} />
                                    <Td text={t('user.role')} />
                                    <Td text={t('detail')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getUsers.data?.data?.users?.map((item: UserItemType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={item.firstName + ' ' + item.lastName} />
                                                <Td text={item.email} />
                                                <Td text={''}>
                                                    <div className='flex flex-wrap gap-2'>
                                                        {
                                                            item.roles.map((role) => (
                                                                <div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
                                                                    {role.name}
                                                                </div>
                                                            ))
                                                        }
                                                    </div>
                                                </Td>
                                                <Td text={''}>
                                                    <div className='flex gap-2'>
                                                        {canUpdate('admins') && (
                                                            <Link to={Pages.users.detail + item.id}>
                                                                <Eye size={20} color='#8C90A3' />
                                                            </Link>
                                                        )}

                                                        {canDelete('admins') && (
                                                            <TrashWithConfrim
                                                                size={20}
                                                                color='#8C90A3'
                                                                onDelete={() => handleDeleteUser(item.id)}
                                                                isLoading={deleteUser.isPending}
                                                            />
                                                        )}
                                                    </div>
                                                </Td>
                                                <Td text={''} />
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>

                        <Pagination
                            totalPages={getUsers.data?.data?.pager?.totalPages}
                            currentPage={page}
                            onPageChange={setPage}
                        />
                    </div>
            }
        </div>
    )
}

export default UsersList