import { getProfileRoute } from '../../routes'

import styles from './styles.module.scss'
import { AvatarIconButton } from '../UserAvatarIconButton'
import { Link } from 'react-router-dom'
import { useProfileMetadata } from '../../hooks/useProfileMetadata'
import { Tooltip } from '@mui/material'
import { shorten } from '../../utils'
import { TooltipChild } from '../TooltipChild'

interface UserAvatarProps {
  pubkey: string
  isNameVisible?: boolean
}

/**
 *  This component will be used for the displaying username and profile picture.
 *  Clicking will navigate to the user's profile.
 */
export const UserAvatar = ({
  pubkey,
  isNameVisible = false
}: UserAvatarProps) => {
  const profile = useProfileMetadata(pubkey)
  const name = profile?.display_name || profile?.name || shorten(pubkey)
  const image = profile?.picture

  return (
    <Link
      to={getProfileRoute(pubkey)}
      className={styles.container}
      tabIndex={-1}
    >
      <Tooltip
        key={pubkey}
        title={name}
        placement="top"
        arrow
        disableInteractive
      >
        <TooltipChild>
          <AvatarIconButton
            src={image}
            hexKey={pubkey}
            aria-label={`account of user ${name}`}
            color="inherit"
            sx={{
              padding: 0
            }}
          />
        </TooltipChild>
      </Tooltip>
      {isNameVisible && name ? (
        <span className={styles.username}>{name}</span>
      ) : null}
    </Link>
  )
}
