import { Badge } from '@mui/material'
import styles from './style.module.scss'
import { UserAvatar } from '../UserAvatar'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faCheck,
  faEllipsis,
  faExclamation,
  faEye,
  faHourglass,
  faQuestion
} from '@fortawesome/free-solid-svg-icons'
import { SignStatus } from '../../utils'
import { Spinner } from '../Spinner'

type DisplaySignerProps = {
  pubkey: string
  status: SignStatus
}

const getStatusIcon = (status: SignStatus) => {
  switch (status) {
    case SignStatus.Signed:
      return <FontAwesomeIcon icon={faCheck} />
    case SignStatus.Awaiting:
      return (
        <Spinner>
          <FontAwesomeIcon icon={faHourglass} />
        </Spinner>
      )
    case SignStatus.Pending:
      return <FontAwesomeIcon icon={faEllipsis} />
    case SignStatus.Invalid:
      return <FontAwesomeIcon icon={faExclamation} />
    case SignStatus.Viewer:
      return <FontAwesomeIcon icon={faEye} />

    default:
      return <FontAwesomeIcon icon={faQuestion} />
  }
}

export const DisplaySigner = ({ status, pubkey }: DisplaySignerProps) => {
  return (
    <Badge
      className={styles.signer}
      overlap="circular"
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      badgeContent={
        <div className={styles.statusBadge}>{getStatusIcon(status)}</div>
      }
    >
      <UserAvatar pubkey={pubkey} />
    </Badge>
  )
}
