import { Divider, IconButton, Menu, MenuItem, Tooltip, ListItemIcon, Avatar } from '@mui/material'
import Logout from '@mui/icons-material/Logout';
import Settings from '@mui/icons-material/Settings';
import { useState, MouseEvent } from 'react'
import { useUserContext } from '@/context/UserContext';
import Link from 'next/link';
import { trpc } from '@/utils/trpc';
import { useRouter } from 'next/router';

const ProfileMenu = () => {
  const { userData, session_valid, handleLogout } = useUserContext();
  const router = useRouter();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const { mutateAsync: logoutQuery, isLoading } = trpc.auth.signOut.useMutation();

  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  const handleLogoutClick = () => {
    handleLogout
    logoutQuery()
    handleClose
    router.push('/')
  }
  return (
    <>
      <Tooltip title="Profile">
        <IconButton 
          aria-controls={open ? 'basic-menu' : undefined}
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
          onClick={handleClick}
        >
          <Avatar>{Array.from(userData.firstName)[0]}</Avatar>
        </IconButton>
      </Tooltip>
      <Menu
        disableScrollLock={true}
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        elevation={0}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        sx={{
          position: 'absolute',
          pt: '0',
          '& .MuiAvatar-root': {
            width: 32,
            height: 32,
            ml: -0.5,
            mr: 1,
          },
        }}
      > 
        <Link href={'/dashboard'}>
          <MenuItem sx={{mb: 0}} onClick={handleClose}>
            <Avatar /> Profile
          </MenuItem>
        </Link>
        <Divider />
        <Link href='/dashboard/settings'>
          <MenuItem sx={{mb: 0}} onClick={handleClose}>
            <ListItemIcon>
              <Settings fontSize="small" />
            </ListItemIcon>
            Settings
          </MenuItem>
        </Link>
        <MenuItem onClick={handleLogoutClick}>
          <ListItemIcon>
            <Logout fontSize="small" />
          </ListItemIcon>
          Logout
        </MenuItem>
      </Menu>
    </>
  )
}

export default ProfileMenu;