"use client";
import { CSSProperties } from "react";
import { arrayOfSize } from "../lib/game";
import { useBoardDimensions, useVariants } from "../lib/hooks";
import { GameButton } from "./game/game-button";
import { GameHeader } from "./game/game-header";
import { Celebration } from "./game/celebration";
import { ClearButton } from "./game/clear-button";
import { NewGameButton } from "./game/new-game-button";
import { PreferencesButton } from "./game/preferences-button";

interface GameProperties extends CSSProperties {
  "--game-width": number;
  "--game-height": number;
}

export function Game() {
  const variants = useVariants();
  const [width, height] = useBoardDimensions();

  return (
    <>
      <div>
        <div
          style={
            { "--game-width": width, "--game-height": height } as GameProperties
          }
          className="grid grid-cols-[repeat(2,auto)_repeat(var(--game-width),3rem)_repeat(2,auto)] grid-rows-[repeat(2,auto)_repeat(var(--game-height),3rem)_repeat(2,auto)] gap-1 content-stretch"
        >
          <GameHeader position={"left"} variant={0} />
          <GameHeader position={"top"} variant={1} />
          {variants.length > 2 && <GameHeader position={"right"} variant={2} />}
          {variants.length > 3 && (
            <GameHeader position={"bottom"} variant={3} />
          )}
          <div className="grid grid-rows-subgrid grid-cols-subgrid row-start-3 -row-end-3 col-start-3 -col-end-3">
            {arrayOfSize(width * height).map((_, i) => (
              <GameButton key={i} index={i} />
            ))}
          </div>
        </div>
      </div>
      <div className="grid grid-cols-2 my-6 pt-6 gap-4 border-t-2">
        <ClearButton>Clear</ClearButton>
        <NewGameButton>New game</NewGameButton>
        <PreferencesButton>Preferences</PreferencesButton>
      </div>
      <Celebration />
    </>
  );
}