import { FROZEN, RACE } from "../../../domain/constants";
import { useGameConfig } from "../../../hooks/useGameInfo";
import usePreventNavigation from "../../../hooks/usePreventNavigation";
import Loading from "../../util/Loading";
import styles from "./GamePanel.module.css";
import GuessPane from "./GuessPane";
import PositionedStreetView from "./PositionedStreetView";
import RaceMode from "./RaceMode";
import { useIsFinished } from "./hooks";

const GamePanel = () => {
  // warn the user if they navigate away
  usePreventNavigation();
  const { gameMode, clockMode } = useGameConfig();
  const finished = useIsFinished();

  return finished ? (
    <Loading />
  ) : (
    <div className={styles.page}>
      {clockMode === RACE && <RaceMode rate={1000} cutoffTime={10} />}
      <div className={styles.streetview}>
        <PositionedStreetView />
        {gameMode === FROZEN && <div className={styles.freeze} />}
      </div>
      <GuessPane />
    </div>
  );
};

export default GamePanel;
