import { ReactNode } from 'react'
import Image from 'components/Image'

import system from '~/config/system.json'
import styles from './InfoBar.module.css'

interface ArbitraryChildrenProps {
  children: ReactNode
}

interface SideNoteProps {
  text: string
}

interface PostInfoPros {
  publishedDate: Date,
  authorName: string
}

interface SystemMemberInfoProps {
  memberName: string
}

type InfobarProps = (
  ArbitraryChildrenProps
  | SideNoteProps
  | PostInfoPros
  | SystemMemberInfoProps
)

export default function InfoBar(props: InfobarProps) {
  if ('text' in props) {
    return (
      <aside className={`${styles.infobar} ${styles.sideNote}`}>
        {props.text}
      </aside>
    )
  }

  if ('authorName' in props) {
    const author = system.members.find((member) => member.name === props.authorName)
    const style = { '--author-color': author?.color } as React.CSSProperties
    const picture = author.profileImg

    return (
      <aside className={`${styles.infobar} ${styles.postMeta}`} style={style}>
        {picture && <Image alt="" width={50} height={50} src={picture} />}
        <span>
          by <span className={styles.author}>{props.authorName}</span>;{' '}
          <span className={styles.date}>published {props.publishedDate.toLocaleDateString()}</span>
        </span>
      </aside>
    )
  }

  if ('memberName' in props) {
    const memberKey = props.memberName.toLowerCase()
    const member = system.members.find((member) => member.name === props.memberName)
    const style = { '--member-color': member?.color } as React.CSSProperties
    const picture = member.profileImg

    return (
      <aside className={`${styles.infobar} ${styles.memberProfile}`} style={style}>
        <Image alt="" width={150} height={150} src={picture} />
        <h1>{props.memberName}</h1>
      </aside>
    )
  }

  if ('children' in props) {
    return (
      <aside className={styles.infobar}>
        {props.children}
      </aside>
    )
  }

  throw new Error('Unknown infobar type')
}