import { gameContext } from "../../pages/_app"
import Icon from "./Icon"
import Player from "./Player"
import { Fragment, useContext, useEffect, useState } from "react"

function LobbyFrame({ openSettings }: { openSettings: () => void }) {
  const [gameProps, setGameProps] = useContext(gameContext)
  const { enemy } = gameProps
  const [dots, setDots] = useState(1)

  useEffect(() => {
    if (enemy) return
    const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
    return () => clearInterval(interval)
  }, [enemy])

  return (
    <div className="mx-32 flex flex-col self-stretch rounded-3xl bg-gray-400">
      <div className="flex items-center justify-between border-b-2 border-slate-900">
        <Icon src="speech_bubble.png">Chat</Icon>
        <h1 className="font-farro text-5xl font-medium">
          Game-PIN: <span className="underline">{gameProps.pin}</span>
        </h1>
        <Icon src="gear.png" onClick={openSettings}>
          Settings
        </Icon>
      </div>
      <div className="flex items-center justify-around">
        <Player
          src="player_blue.png"
          text={gameProps.player?.username ?? "Spieler 1 (Du)"}
          primary={true}
          edit={true}
        />
        <p className="font-farro m-4 text-6xl font-semibold">VS</p>
        {enemy ? (
          <Player src="player_red.png" text={enemy.username ?? "Spieler 2"} />
        ) : (
          <p className="font-farro w-96 text-center text-5xl font-medium">
            Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
            {Array.from(Array(3 - dots), (_, i) => (
              <Fragment key={i}>&nbsp;</Fragment>
            ))}
          </p>
        )}
      </div>
      <div className="flex items-center justify-center border-t-2 border-slate-900">
        <button className="font-farro m-4 rounded-xl border-b-4 border-orange-400 bg-warn px-12 py-4 text-5xl font-medium duration-100 active:border-t-4 active:border-b-0">
          START
        </button>
      </div>
    </div>
  )
}

export default LobbyFrame