import React, { useCallback, useMemo } from "react"
import styles from "../styles/Header.module.css"
import bgStyles from "../styles/Background.module.css"
import { usePlayer } from "../providers/PlayerProvider";
import { useAccount } from 'wagmi';
import dynamic from "next/dynamic";
import Counter, { toReadable } from "./Counter";

const Header = () => {
  const { isConnected } = useAccount();
  const { isRegistered, register, army } = usePlayer();

  const title = useMemo(() => {
    return isRegistered ? `SLAY THE MOLOCH` :
      !isConnected ? "Connect your wallet traveler ☝️  and then ..." :
        "Click here to start 😈"
  }, [isConnected, isRegistered])

  const subtitle = useMemo(() => {
    if (isRegistered) {
      return <Counter />
    } else {
      return <p className={styles.counter}>SLAY THE MOLOCH</p>
    }
  }, [isRegistered])

  const perSecondParagraph = useMemo(() => {
    const perSecond = toReadable(army?.profit_per_second ?? BigInt(0))
    return (isRegistered) ?
      <p className={styles.counter_per_seconds}>per second: {perSecond}</p>
      : null
  }, [isRegistered, army?.profit_per_second])

  const onRegister = useCallback(() => {
    if (isRegistered) return
    register();
  }, [isRegistered, register])

  return <header onClick={onRegister} className={styles.header}>
    <h1 className={`${styles.title} ${isConnected && !isRegistered ? bgStyles.excited : ""}`}>{title}</h1>
    {subtitle}
    {perSecondParagraph}
  </header>
}

// export default Header

export default dynamic(() => Promise.resolve(Header), {
  ssr: false,
});