import {
  CreateLobbyEvent,
  handleCreateLobby,
  handleJoinLobby,
  JoinLobbyEvent,
} from "interface";
import React, { ChangeEvent } from "react";
import { Socket } from "socket.io-client";

export interface LandingPageProps {
  socket: Socket;
}

const LandingPage = (props: LandingPageProps) => {
  const { socket } = props;

  const createLobbyPayload: CreateLobbyEvent = { userName: "" };
  const joinLobbyPayload: JoinLobbyEvent = { userName: "", lobbyId: "" };
  const registerUsername = (event: ChangeEvent<HTMLInputElement>) => {
    createLobbyPayload.userName = event.target.value;
    joinLobbyPayload.userName = event.target.value;
  };
  const registerLobbyId = (event: ChangeEvent<HTMLInputElement>) =>
    (joinLobbyPayload.lobbyId = event.target.value);

  return (
    <React.Fragment>
      <div className="landing-page-title">
        <h1>Trains And Roads</h1>
      </div>
      <div className="user-name-input">
        <input placeholder="Enter username" onChange={registerUsername}></input>
      </div>
      <div className="create-lobby-button">
        <button onClick={() => handleCreateLobby(socket, createLobbyPayload)}>
          Create Lobby
        </button>
      </div>
      <div className="join-lobby">
        <input
          className="lobby-id-input"
          placeholder="Enter Lobby Id"
          onChange={registerLobbyId}
        ></input>
        <button
          className="join-lobby-button secondary"
          onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
        >
          Join Lobby
        </button>
      </div>
    </React.Fragment>
  );
};
export default LandingPage;