import AdaptableCard from '@/components/shared/AdaptableCard'
import Container from '@/components/shared/Container'
import { Table } from '@/components/ui'
import { getUsers } from '@/services/identity.service'
import { useLocalization } from '@/utils/hooks/useLocalization'
import useThemeClass from '@/utils/hooks/useThemeClass'
import isEmpty from 'lodash/isEmpty'
import { useEffect, useState } from 'react'
import PageTitle from '@/components/shared/PageTitle'
import UsersPermission from './UsersPermission'
import { IdentityUserDto } from '@/proxy/admin/models'
import { ROUTES_ENUM } from '@/routes/route.constant'
import ActionLink from '@/components/shared/ActionLink'

const { Tr, Th, Td, THead, TBody } = Table

const Users = () => {
  const { textTheme } = useThemeClass()
  const [userList, setUserList] = useState<IdentityUserDto[]>([])
  const [activeUser, setActiveUser] = useState<IdentityUserDto>()
  const [permissionDialogOpen, setPermissionDialogOpen] = useState(false)

  const { translate } = useLocalization()

  const fetchData = async () => {
    const response = await getUsers()
    if (response.data?.items) {
      setUserList(response.data.items)
    }
  }

  useEffect(() => {
    if (isEmpty(userList)) {
      fetchData()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const openPermissionDialog = (user: IdentityUserDto) => {
    setActiveUser(user)
    setPermissionDialogOpen(true)
  }

  return (
    <>
      <PageTitle title={translate('::AbpIdentity.Users')} />
      <Container>
        <AdaptableCard>
          <Table>
            <THead>
              <Tr>
                <Th className="w-1/6"></Th>
                <Th>Adı Soyadı</Th>
                <Th>E-Posta</Th>
                <Th>Telefon</Th>
                <Th>Durum</Th>
              </Tr>
            </THead>
            <TBody>
              {userList.map((user) => (
                <Tr key={user.id}>
                  <Td>
                    <div
                      className={`${textTheme} cursor-pointer select-none font-semibold`}
                      onClick={() => openPermissionDialog(user)}
                    >
                      {translate('::Permission')}
                    </div>
                  </Td>
                  <Td>
                    <ActionLink
                      href={ROUTES_ENUM.protected.admin.identity.user.detail.replace(
                        ':userId',
                        user.id!,
                      )}
                      className="font-bold"
                    >
                      {user.name} {user.surname}
                    </ActionLink>
                  </Td>
                  <Td>{user.email}</Td>
                  <Td>{user.phoneNumber}</Td>
                  <Td>{user.isActive ? 'Aktif' : 'Pasif'}</Td>
                </Tr>
              ))}
            </TBody>
          </Table>
        </AdaptableCard>
      </Container>
      {activeUser?.id && (
        <UsersPermission
          open={permissionDialogOpen}
          onDialogClose={() => setPermissionDialogOpen(false)}
          name={`${activeUser.name ?? ''} ${activeUser.surname ?? ''}`.trim() || activeUser.email || activeUser.id}
          id={activeUser.id}
        ></UsersPermission>
      )}
    </>
  )
}

export default Users