// frameworks
import HTMLTemplate from "/emcJS/util/html/template/HTMLTemplate.js";
import CustomElement from "/emcJS/ui/element/CustomElement.js";

// Track-OOT
import RTCController from "/script/util/rtc/RTCController.js";
import "./MultiplayerLobby.js";
import "./MultiplayerRoomClient.js";
import "./MultiplayerRoomMaster.js";

const TPL = new HTMLTemplate(`
    <style>
        :host {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: 10px;
        }
        :host > * {
            flex: 1;
        }
        :host > :not(.active) {
            display: none;
        }
        #logger {
            max-height: 30dvh;
            min-height: 20dvh;
        }
    </style>
    <ootrt-multiplayerlobby id="lobby_view" class="active"></ootrt-multiplayerlobby>
    <ootrt-multiplayerroommaster id="room_master"></ootrt-multiplayerroommaster>
    <ootrt-multiplayerroomclient id="room_client"></ootrt-multiplayerroomclient>
    <ootrt-mplogger id="logger" class="active"></ootrt-mplogger>
`);

class HTMLMultiplayer extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());

        const lobby_view = this.shadowRoot.getElementById("lobby_view");
        const room_master = this.shadowRoot.getElementById("room_master");
        const room_client = this.shadowRoot.getElementById("room_client");
        const logger = this.shadowRoot.getElementById("logger");

        RTCController.setLogger(logger);

        RTCController.addEventListener("roomupdate", function(event) {
            room_master.updateRoom(event.data);
            room_client.updateRoom(event.data);
        });

        lobby_view.addEventListener("host", function() {
            lobby_view.classList.remove("active");
            room_master.classList.add("active");
        });

        lobby_view.addEventListener("join", function() {
            lobby_view.classList.remove("active");
            room_client.classList.add("active");
        });

        room_master.addEventListener("close", function() {
            room_master.classList.remove("active");
            lobby_view.classList.add("active");
        });

        room_client.addEventListener("leave", function() {
            room_client.classList.remove("active");
            lobby_view.classList.add("active");
        });
    }

}

customElements.define("ootrt-multiplayer", HTMLMultiplayer);
