import { Divider, Tooltip } from '@mui/material'
import {
  formatTimestamp,
  fromUnixTimestamp,
  hexToNpub,
  npubToHex,
  SignStatus
} from '../../utils'
import { useSigitMeta } from '../../hooks/useSigitMeta'
import { UserAvatarGroup } from '../UserAvatarGroup'

import styles from './style.module.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faCalendar,
  faCalendarCheck,
  faCalendarPlus,
  faEye,
  faFile,
  faFileCircleExclamation
} from '@fortawesome/free-solid-svg-icons'
import { getExtensionIconLabel } from '../getExtensionIconLabel'
import { useAppSelector } from '../../hooks/store'
import { DisplaySigner } from '../DisplaySigner'
import { Meta } from '../../types'
import { extractFileExtensions } from '../../utils/file'
import { UserAvatar } from '../UserAvatar'

interface UsersDetailsProps {
  meta: Meta
}

export const UsersDetails = ({ meta }: UsersDetailsProps) => {
  const {
    submittedBy,
    exportedBy,
    signers,
    viewers,
    fileHashes,
    signersStatus,
    createdAt,
    completedAt,
    parsedSignatureEvents,
    signedStatus,
    isValid
  } = useSigitMeta(meta)
  const { usersPubkey } = useAppSelector((state) => state.auth)
  const userCanSign =
    typeof usersPubkey !== 'undefined' &&
    signers.includes(hexToNpub(usersPubkey))

  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))

  return submittedBy ? (
    <div className={styles.container}>
      <div className={styles.section}>
        <p>Signers</p>
        <div className={styles.users}>
          {submittedBy && (
            <DisplaySigner
              status={isValid ? SignStatus.Signed : SignStatus.Invalid}
              pubkey={submittedBy}
            />
          )}

          {submittedBy && signers.length ? (
            <Divider orientation="vertical" flexItem />
          ) : null}

          <UserAvatarGroup max={20}>
            {signers.map((signer) => {
              const pubkey = npubToHex(signer)!
              return (
                <DisplaySigner
                  key={pubkey}
                  status={signersStatus[signer]}
                  pubkey={pubkey}
                />
              )
            })}
          </UserAvatarGroup>
        </div>

        {viewers.length > 0 && (
          <>
            <p>Viewers</p>
            <div className={styles.users}>
              <UserAvatarGroup max={20}>
                {viewers.map((signer) => {
                  const pubkey = npubToHex(signer)!

                  return (
                    <DisplaySigner
                      key={pubkey}
                      status={SignStatus.Viewer}
                      pubkey={pubkey}
                    />
                  )
                })}
              </UserAvatarGroup>
            </div>
          </>
        )}

        {exportedBy && (
          <>
            <p>Exported By</p>
            <div className={styles.users}>
              <UserAvatar pubkey={exportedBy} />
            </div>
          </>
        )}
      </div>
      <div className={styles.section}>
        <p>Details</p>

        <Tooltip
          title={'Publication date'}
          placement="top"
          arrow
          disableInteractive
        >
          <span className={styles.detailsItem}>
            <FontAwesomeIcon icon={faCalendarPlus} />{' '}
            {createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}
          </span>
        </Tooltip>

        <Tooltip
          title={'Completion date'}
          placement="top"
          arrow
          disableInteractive
        >
          <span className={styles.detailsItem}>
            <FontAwesomeIcon icon={faCalendarCheck} />{' '}
            {completedAt ? formatTimestamp(completedAt) : <>&mdash;</>}
          </span>
        </Tooltip>

        {/* User signed date */}
        {userCanSign ? (
          <Tooltip
            title={'Your signature date'}
            placement="top"
            arrow
            disableInteractive
          >
            <span className={styles.detailsItem}>
              <FontAwesomeIcon icon={faCalendar} />{' '}
              {hexToNpub(usersPubkey) in parsedSignatureEvents ? (
                parsedSignatureEvents[hexToNpub(usersPubkey)].created_at ? (
                  formatTimestamp(
                    fromUnixTimestamp(
                      parsedSignatureEvents[hexToNpub(usersPubkey)].created_at
                    )
                  )
                ) : (
                  <>&mdash;</>
                )
              ) : (
                <>&mdash;</>
              )}
            </span>
          </Tooltip>
        ) : null}
        <span className={styles.detailsItem}>
          <FontAwesomeIcon icon={faEye} /> {signedStatus}
        </span>
        {extensions.length > 0 ? (
          <span className={styles.detailsItem}>
            {!isSame ? (
              <>
                <FontAwesomeIcon icon={faFile} /> Multiple File Types
              </>
            ) : (
              getExtensionIconLabel(extensions[0])
            )}
          </span>
        ) : (
          <>
            <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
          </>
        )}
      </div>
    </div>
  ) : undefined
}