import React, { useCallback, useState } from 'react'

import { CaretDownOutlined } from '@ant-design/icons'
import {
  Avatar as AntdAvatar,
  Typography,
  Tooltip,
  Menu,
  Dropdown,
  Space,
  Skeleton
} from 'antd'
import { useNavigate } from 'react-router-dom'

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

export const Avatar: React.FC<{ profileRoute?: string }> = ({
  profileRoute = '/profile'
}) => {
  const userName = useUserStore((state) => state.user?.userName)
  const navigate = useNavigate()

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

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

  function handleClickProfile() {
    navbarTelemetry.clickAvatarMenuItem('profile')
    window.open(`/#${profileRoute}`, '_blank')
  }

  const menu = (
    <Menu>
      <Typography.Text
        className='mx-3 my-1'
        ellipsis
        style={{ width: '140px' }}
      >
        {userName}
      </Typography.Text>
      <Menu.Divider />
      <Menu.Item key='profile' onClick={handleClickProfile}>
        Profile
      </Menu.Item>
      <Menu.Item key='logout' onClick={handleLogout}>
        Log Out
      </Menu.Item>
    </Menu>
  )

  const [tooltipVisible, setTooltipVisible] = useState(false)

  return (
    <Dropdown
      overlay={menu}
      trigger={['click']}
      arrow
      onVisibleChange={(v) => {
        if (!v) {
          return
        }

        navbarTelemetry.clickAvatar()
        setTooltipVisible(false)
      }}
    >
      <Tooltip
        className='cursor-pointer'
        placement='bottomRight'
        title={userName}
        visible={tooltipVisible}
        onVisibleChange={setTooltipVisible}
      >
        <Space>
          {userName ? (
            <AntdAvatar
              className='cursor-pointer bg-white'
              style={{ color: 'var(--cc-brand-color)' }}
            >
              {userName?.charAt(0).toUpperCase()}
            </AntdAvatar>
          ) : (
            <Skeleton.Avatar active />
          )}
          <CaretDownOutlined className='text-white' />
        </Space>
      </Tooltip>
    </Dropdown>
  )
}