import { client, navigateTo } from "../index.js";
import { clear, fill_errors } from "../utils/formUtils.js";
import AbstractView from "./abstracts/AbstractView.js";

export default class extends AbstractView {
    constructor(params)
    {
        super(params, "Matchmaking");
    }

    async press_button()
    {
        if (client.matchmaking.searching)
        {
            client.matchmaking.stop();
            document.getElementById("button").value = "Find a game"
        }
        else
        {
            let nb_players = document.getElementById("nb_players-input").value

            await client.matchmaking.start(this.display_data, this.ondisconnect, nb_players);

            document.getElementById("button").value = "Stop matchmaking"
        }
    }

    ondisconnect()
    {
        document.getElementById("button").value = "Find a game"
    }

    display_data(data)
    {
        clear("innerText", ["detail"]);
        fill_errors(data, "innerText");
    }

    async postInit()
    {
        document.getElementById("button").onclick = this.press_button.bind(this)
    }

    async getHtml() {
        return `
			<h1>Select mode</h1>
            <input type="number" value="2" id="nb_players-input">
            <input type="button" value="Find a game" id="button">
            <span id="detail"></span>
        `;
    }

    async leavePage()
    {
		await client.matchmaking.stop();
    }
}