import { Typography } from '@mui/material'
import { useSelector } from 'react-redux'
import { State } from '../store/rootReducer'

import styles from './username.module.scss'
import { AvatarIconButton } from './UserAvatarIconButton'

type Props = {
  username: string
  avatarContent: string
  handleClick: (event: React.MouseEvent<HTMLElement>) => void
}

/**
 *  This component will be used for the displaying logged in user in AppBar.
 *  Clicking will open the menu.
 */
const Username = ({ username, avatarContent, handleClick }: Props) => {
  const hexKey = useSelector((state: State) => state.auth.usersPubkey)

  return (
    <div className={styles.container}>
      <Typography
        variant="h6"
        sx={{
          fontWeight: 500,
          fontSize: '14px',
          color: 'var(--text-color)',
          display: { xs: 'none', md: 'flex' }
        }}
      >
        {username}
      </Typography>
      <AvatarIconButton
        src={avatarContent}
        hexKey={hexKey}
        aria-label="account of current user"
        aria-controls="menu-appbar"
        aria-haspopup="true"
        onClick={handleClick}
      />
    </div>
  )
}

export default Username