import ms from "pretty-ms";
import iso from "iso-3166-1";
import { useState } from "react";
import { useGameId } from "../../../domain/gameStore";
import { useGameConfig, usePlayers } from "../../../hooks/useGameInfo";
import ClickToCopy from "../../util/ClickToCopy";
import Loading from "../../util/Loading";
import JoinForm from "./JoinForm";
import styles from "./Lobby.module.css";
import StartGame from "./StartGame";
import {
  TIME_BANK,
  FROZEN,
  COUNTRY_RACE,
  RACE,
} from "../../../domain/constants";

export const GameInfo = () => {
  const {
    rounds,
    timer,
    countryLock,
    gameMode,
    clockMode,
    scoreMethod,
    roundPointCap,
  } = useGameConfig();

  if (!rounds || !timer) {
    return <Loading />;
  }

  return (
    <>
      <span className={styles.label}>
        Game will run for {rounds} round{rounds !== 1 && "s"}
      </span>
      {clockMode === TIME_BANK ? (
        <span className={styles.label}>
          Your time will be banked, with {ms(timer * 1000 * rounds)} available
          across all rounds
        </span>
      ) : (
        <span className={styles.label}>
          Each round will have a time limit of {ms(timer * 1000)}
        </span>
      )}
      {clockMode === RACE && (
        <span className={styles.label}>
          If someone submits before you your remaining time will be cut down to
          just 10 seconds!
        </span>
      )}
      {scoreMethod === COUNTRY_RACE && (
        <span className={styles.label}>
          Your score will be based on how quickly you select the right country -
          you will get 0 points for the wrong country!
        </span>
      )}
      {gameMode === FROZEN && (
        <span className={styles.label}>
          You will not be able to adjust your view
        </span>
      )}
      {roundPointCap && (
        <span className={styles.label}>
          Only {roundPointCap} total points will be up for grabs each round
        </span>
      )}
      {countryLock && (
        <span className={styles.label}>
          This game will only use locations within:{" "}
          {iso.whereAlpha2(countryLock).country}
        </span>
      )}
    </>
  );
};

const getUrl = gameId => {
  const u = new URL(window.location.href);
  u.searchParams.append("join", gameId);
  return u.href;
};

export const PlayerList = ({ playerNames }) => (
  <div className={styles.players}>
    <span className={styles.playersTitle}>Players</span>
    <ul>
      {playerNames.map(name => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  </div>
);

const Lobby = ({ onStart }) => {
  const gameId = useGameId();
  const players = usePlayers();
  const [joined, setJoined] = useState(false);

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

  return (
    <div className={styles.page}>
      <div className={styles.info}>
        <GameInfo />
        <div className={styles.form}>
          {joined ? (
            <StartGame onStart={onStart} />
          ) : (
            <JoinForm onJoined={() => setJoined(true)} />
          )}
        </div>
        <span className={styles.label}>
          <ClickToCopy text={getUrl(gameId)}>
            Click here to copy an invite link!
          </ClickToCopy>
        </span>
      </div>
      <PlayerList playerNames={players.map(({ name }) => name)} />
    </div>
  );
};

export default Lobby;
