import useHandleLogout from '@/logic/Login/useHandleLogout'
import { useNavigate } from '@/router'
import {
  Button,
  Menu,
  MenuItem,
  Popover,
  Position,
  Tag,
} from '@blueprintjs/core'
import useAuthIdentity from '@inject/graphql/auth'

const UserTitle = () => {
  const handleLogout = useHandleLogout()
  const nav = useNavigate()
  const { whoAmI, isStaff, isSuperuser, isActive } = useAuthIdentity()
  const vanityName =
    whoAmI?.firstName && whoAmI.lastName
      ? `${whoAmI.firstName} ${whoAmI.lastName}`
      : (whoAmI?.username as string)
  return (
    <Popover
      interactionKind='click'
      minimal
      position={Position.BOTTOM_LEFT}
      content={
        <Menu>
          {!isActive && <Tag fill>Inactive</Tag>}
          {isActive && !isStaff && <Tag fill>Trainee</Tag>}
          {isStaff && !isSuperuser && <Tag fill>Instructor</Tag>}
          {isSuperuser && <Tag fill>Administrator</Tag>}
          <MenuItem
            text='Settings'
            icon='cog'
            onClick={() => nav('/settings')}
          />
          <MenuItem
            intent='danger'
            text='Logout'
            icon='log-out'
            onClick={handleLogout}
          />
        </Menu>
      }
    >
      <Button icon='user' minimal>
        {vanityName}
      </Button>
    </Popover>
  )
}

export default UserTitle
