import * as React from 'react';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
import Skeleton from '@mui/material/Skeleton';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';

import { stringToColor } from 'src/utils';
import { USER_MENU_ITEMS } from 'src/constants';

const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];

interface UserMenuProps {
  email?: string | null;
  displayName?: string | null;
  sid?: string | null;
  avatarUrl?: string | null;
  loading?: boolean;
}

export default function UserMenu(props: UserMenuProps) {
  const { email, displayName, sid, avatarUrl, loading } = props;

  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
    null
  );

  const { t } = useTranslation();

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

  const handleCloseUserMenu = () => {
    setAnchorElUser(null);
  };

  const AvatarEle = ({
    name,
    src,
  }: {
    name?: string | null;
    src?: string | null;
  }) => {
    return (
      <>
        {name && src && (
          <Avatar
            alt={name}
            // src={src}
            sx={{
              width: 20,
              height: 20,
              bgcolor: stringToColor(name || 'unset'),
            }}
          >
            {/* {stringAvatar(name)} */}
            <AccountCircleIcon
              sx={{
                backgroundColor: '#172d72',
              }}
            />
          </Avatar>
        )}
      </>
    );
  };

  return (
    <>
      {loading ? (
        <Skeleton variant="rounded" width={100} height={32} />
      ) : (
        <>
          <Button
            onClick={handleOpenUserMenu}
            startIcon={<AvatarEle name={displayName} src={avatarUrl} />}
            endIcon={<ExpandMoreIcon fontSize="inherit" />}
            // disableRipple
            sx={{
              textTransform: 'none',
              display: {
                xs: 'none',
                md: 'inline-flex',
              },
              color: 'custom.k2',
            }}
          >
            <Typography>{displayName}</Typography>
          </Button>

          <IconButton
            onClick={handleOpenUserMenu}
            size="small"
            sx={{
              display: {
                xs: 'inline-flex',
                md: 'none',
              },
              color: 'custom.k2',
            }}
          >
            <AvatarEle name={displayName} src={avatarUrl} />
          </IconButton>

          <Menu
            sx={{ mt: '45px' }}
            id="menu-appbar"
            anchorEl={anchorElUser}
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            keepMounted
            transformOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            open={Boolean(anchorElUser)}
            onClose={handleCloseUserMenu}
          >
            <MenuItem divider disabled>
              <Typography textAlign="center">{email}</Typography>
            </MenuItem>
            {/* <MenuItem divider>
              <Typography textAlign="center">{`USER_TYPE_MOCK`}</Typography>
            </MenuItem> */}
            {USER_MENU_ITEMS.map((item) => (
              <Link key={item.id} href={item.url}>
                <MenuItem>
                  <Typography textAlign="center">
                    {t(`header.${item.transKey}`)}
                  </Typography>
                </MenuItem>
              </Link>
            ))}
          </Menu>
        </>
      )}
    </>
  );
}