import { useState } from "react";
import "./LobbyPage.scss";
import { Socket } from "socket.io-client";
import { attachHandlerToUpdateLobbyEvent, ClientEvent } from "interface";

export interface LobbyPageProps {
  initialPlayerNames: string[];
  gameCode: string;
  socket: Socket;
}

const LobbyPage = (props: LobbyPageProps) => {
  const { initialPlayerNames, gameCode, socket } = props;
  const [playerNames, setPlayerNames] = useState(initialPlayerNames);

  attachHandlerToUpdateLobbyEvent(socket, (event) => {
    setPlayerNames(event.playerNames);
  });
  const startGame = () => socket.emit(ClientEvent.START_GAME);

  return (
    <div className="lobby-page">
      <div className="landing-page-title">
        <h1>Trains And Roads</h1>
      </div>
      <div className="lobby-page-body">
        {playerNames.map((name) => (
          <article className="lobby-user-name">{name}</article>
        ))}
        <div className="start-game-button">
          <button onClick={startGame}>Start Game</button>
        </div>
        <article className="game-code">Game code: {gameCode}</article>
      </div>
    </div>
  );
};

export default LobbyPage;