import React, { useCallback } from 'react'

import { Avatar, Menu } from '@mantine/core'
import { IconLogout, IconUser } from '@tabler/icons-react'
import { useNavigate } from 'react-router-dom'

import { logout } from '~/api'
import { useUserStore } from '~/hooks/state'
import { navbarTelemetry } from '~/telemetry'
import { clearCsrfToken } from '~/utils/auth'

const NewAvatar: React.FC = () => {
  const userName = useUserStore((state) => state.user?.userName)
  const clearUser = useUserStore((state) => state.clearUser)
  const navigate = useNavigate()

  function handleProfile() {
    navbarTelemetry.clickAvatarMenuItem('profile')
    navigate('/profile')
  }

  const handleLogout = useCallback(() => {
    navbarTelemetry.clickAvatarMenuItem('logout')

    clearCsrfToken()
    clearUser()
    logout()
    navigate('/login', { replace: true })
  }, [navigate, clearUser])

  if (!userName) {
    return <Avatar size={28} radius='xl' />
  }

  return (
    <Menu shadow='md' position='bottom-end'>
      <Menu.Target>
        <Avatar
          size={28}
          radius='xl'
          color='grape'
          className='cursor-pointer'
          onClick={() => navbarTelemetry.clickAvatar()}
        >
          {userName.charAt(0).toUpperCase()}
        </Avatar>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Label>{userName}</Menu.Label>
        <Menu.Divider />
        <Menu.Item onClick={handleProfile} icon={<IconUser size={14} />}>
          Profile
        </Menu.Item>
        <Menu.Item onClick={handleLogout} icon={<IconLogout size={14} />}>
          Log Out
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  )
}

export default NewAvatar