import React from 'react';
import Avatar from '@mui/material/Avatar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import Icon from '@mui/material/Icon';
import { PaperProps } from '@mui/material/Paper';

interface KOSAccountMenuProps {
  avatarUrl?: string;
  userName?: string;
  signOutText?: string;
  menuPaperProps?: Partial<PaperProps>;
  onLogoutClick?: () => void;
}

const KOSAccountMenu = (props: KOSAccountMenuProps): React.ReactElement => {
  const { avatarUrl, userName, signOutText, onLogoutClick, menuPaperProps } =
    props;

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleCloseMenu = () => {
    setAnchorEl(null);
  };

  const handleLogoutClick = () => {
    if (onLogoutClick !== undefined) {
      onLogoutClick();
    }
  };

  return (
    <>
      <Tooltip title="Cuenta">
        <IconButton
          onClick={handleClick}
          size="small"
          sx={{ ml: 2, marginLeft: '0' }}
        >
          <Avatar
            src={avatarUrl}
            alt={userName?.charAt(0) ?? '?'}
            sx={{ width: 32, height: 32 }}
          />
        </IconButton>
      </Tooltip>

      {onLogoutClick !== undefined && (
        <Menu
          anchorEl={anchorEl}
          open={open}
          onClose={handleCloseMenu}
          onClick={handleCloseMenu}
          PaperProps={{
            elevation: 0,
            sx: {
              overflow: 'visible',
              filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
              mt: 1.5,
              '&:before': {
                content: '""',
                display: 'block',
                position: 'absolute',
                top: 0,
                right: 14,
                width: 10,
                height: 10,
                bgcolor: 'background.paper',
                transform: 'translateY(-50%) rotate(45deg)',
                zIndex: 0,
              },
            },
            ...(menuPaperProps ?? {}),
          }}
          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
        >
          <MenuItem onClick={handleLogoutClick}>
            <ListItemIcon>
              <Icon sx={{ mr: '24px' }}>exit_to_app_black_24dp</Icon>
            </ListItemIcon>
            {signOutText ?? 'Sign out'}
          </MenuItem>
        </Menu>
      )}
    </>
  );
};
export default KOSAccountMenu;