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";
import { useModal } from "../providers/ModalProvider";

const Header = () => {
  const { isConnected } = useAccount();
  const { isRegistered, player, army } = usePlayer();
  const { openRegistrationModal } = useModal();

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

  const subtitle = useMemo(() => {
    if (isRegistered && player?.has_active_session) {
      return <Counter />
    } else {
      return <p className={`${styles.counter} ${isConnected && !player?.has_active_session ? bgStyles.excited : ""}`}>SLAY THE MOLOCH</p>
    }
  }, [isRegistered, player?.has_active_session, isConnected])

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

  const onRegister = useCallback(() => {
    if (player?.has_active_session) return
    openRegistrationModal()
  }, [player?.has_active_session, openRegistrationModal])

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

// export default Header

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