import { useGameId } from "../../../domain/gameStore";
import {
  useGameCoords,
  useLinkedGame,
  usePlayers,
} from "../../../hooks/useGameInfo";
import ClickToCopy from "../../util/ClickToCopy";
import Loading from "../../util/Loading";
import LinkedGame from "./LinkedGame";
import styles from "./GameSummary.module.css";
import ScoreBoard from "./ScoreBoard";
import SummaryMap from "./SummaryMap";

const GameSummary = () => {
  // poll the game state
  const gameId = useGameId();
  const coords = useGameCoords();
  const players = usePlayers();
  const linkedGame = useLinkedGame();

  if (!players || !coords) {
    return <Loading />;
  }

  // set up the summary URL
  const summaryURL = new URL(window.location.href);
  summaryURL.searchParams.append("summary", gameId);

  return (
    <div className={styles.page}>
      <div className={styles.top}>
        <SummaryMap {...{ players, coords }} />
        <LinkedGame {...{ linkedGame, gameId }} />
      </div>
      <ScoreBoard {...{ players }} />
      <span className={styles.label}>
        <ClickToCopy text={summaryURL.href}>
          Click here to copy a link to this summary!
        </ClickToCopy>
      </span>
    </div>
  );
};

export default GameSummary;
