import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add } from 'iconsax-react'
import Input from '../../components/Input'
import Td from '../../components/Td'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetRoles } from './hooks/useUserData'
import { RoleItemType } from './types/UserTypes'

const RolesList: FC = () => {

    const navigate = useNavigate()
    const { t } = useTranslation('global')
    const [search, setSearch] = useState<string>('')
    const getRoles = useGetRoles(search)


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

            <div className='flex justify-end items-center mt-12'>
                <div>
                    <Input
                        variant='search'
                        placeholder={t('user.role_search')}
                        className='bg-white border border-border'
                        onChangeSearchFinal={(value) => setSearch(value)}
                    />
                </div>
            </div>

            <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.title')} />
                            <Td text={t('user.user')} />
                            <Td text={t('user.is_admin')} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            getRoles.data?.data?.roles?.map((item: RoleItemType) => {
                                return (
                                    <tr key={item.id} className='tr'>
                                        <Td text={item.name} />
                                        <Td text={item.userCount + ''} />
                                        <Td text={item.isAdmin ? t('yes') : t('no')} />
                                        {/* <Td text={''}>
                                            <Link to={Pages.ticket.detail + '1'}>
                                                <Eye size={20} color='#8C90A3' />
                                            </Link>
                                        </Td> */}
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>

        </div>
    )
}

export default RolesList