import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
import classNames from "classnames"
import Head from "next/head"
import { useEffect, useState } from "react"

export default function Home() {
  const [enemy, setEnemy] = useState(false)
  const [dots, setDots] = useState(0)

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

  return (
    <div id="box">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <button className="absolute top-16 left-16 flex h-24 w-24 items-center justify-center rounded-lg bg-grayish">
        <img
          className="pixelart h-20 w-20"
          src="/assets/burger-menu.png"
          alt="Burger Menu"
        />
      </button>
      <div className="flex flex-row bg-shield-gray bg-[url('/assets/shield.png')] bg-cover bg-no-repeat">
        <div className="flex flex-col items-center justify-between">
          <h1 className="font-checkpoint my-4 mx-32 border-y-4 border-slate-700 text-center text-6xl leading-tight tracking-widest">
            Leaky
            <br />
            Ships
          </h1>
        </div>
      </div>
      <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" text="Chat" />
          <h1 className="font-farro text-5xl font-medium">
            Game-PIN: <span className="underline">3169</span>
          </h1>
          <Icon src="gear.png" text="Settings" />
        </div>
        <div className="flex items-center justify-around">
          <Player
            src="player_blue.png"
            text="Spieler 1 (Du)"
            primary={true}
            edit={true}
          />
          <p
            className="font-farro m-4 text-6xl font-semibold"
            onClick={() => setEnemy((e) => !e)}
          >
            VS
          </p>
          {enemy ? (
            <Player src="player_red.png" text="Spieler 2" />
          ) : (
            <p className="font-farro m-12 w-64 text-center text-5xl font-medium">
              Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
            </p>
          )}
        </div>
        <div className="flex items-center justify-center border-t-2 border-slate-900">
          <button className="font-farro m-8 rounded-xl bg-amber-400 px-12 py-4 text-5xl font-medium">
            START
          </button>
        </div>
      </div>
    </div>
  )
}

function Icon({ src, text }: { src: string; text: string }) {
  return (
    <button className="mx-4 mt-4 flex flex-col items-center border-none">
      <img
        className="pixelart mb-1 box-content w-16 rounded-xl bg-white p-1"
        src={"/assets/" + src}
        alt={src}
      />
      <span className="font-semibold">{text}</span>
    </button>
  )
}
function Player({
  src,
  text,
  primary,
  edit,
}: {
  src: string
  text: string
  primary?: boolean
  edit?: boolean
}) {
  return (
    <div className="m-4 flex flex-col items-center">
      <p
        className={classNames(
          "font-farro my-8 text-5xl",
          primary ? "font-semibold" : "font-normal"
        )}
      >
        {text}
      </p>
      <div className="relative m-8">
        <img className="pixelart w-64" src={"/assets/" + src} alt={src} />
        {edit ? (
          <button className="absolute top-4 right-4  h-14 w-14 rounded-lg border-2 border-dashed border-warn bg-gray-800 bg-opacity-90">
            <FontAwesomeIcon
              className="h-full w-full text-warn"
              icon={faCaretDown}
            />
          </button>
        ) : (
          <></>
        )}
      </div>
    </div>
  )
}
