import {client} from "../index.js";
import AbstractAuthentifiedView from "./abstracts/AbstractAuthentifiedView.js";

export default class extends AbstractAuthentifiedView
{
    constructor(params)
	{
        super(params, "Tournament");
		this.id = params.id;
    }

	pressButton()
	{
		this.tournament.toggle_participation();
		document.getElementById("button").value = this.tournament.isParticipating ? "Leave tournament" : "Join tournament";
	}

	async receive(data)
	{
		if (data.detail === "nb_participants" || data.detail === "update_participants")
			document.getElementById("nb_participants").innerText = `${data.nb_participants} / ${this.tournament.nb_players}`
	}

	async ondisconnect(event)
	{
	}

	async postInit()
	{
		this.tournament = await client.tournaments.getTournament(this.id);

		if (this.tournament === null)
			return 1;

		this.tournament.join(this.receive.bind(this), this.ondisconnect.bind(this));

		let button = document.getElementById("button")
		
		button.onclick = this.pressButton.bind(this);

		document.getElementById("name").innerText = this.tournament.name;
		document.getElementById("nb_players").innerText = this.tournament.nb_players;
		document.getElementById("nb_players_by_game").innerText = this.tournament.nb_players_by_game;
		document.getElementById("level").innerText = this.tournament.level;
		document.getElementById("state").innerText = this.tournament.state;

		if (this.tournament.state === "waiting")
			button.disabled = false;
	}

	async getHtml()
	{
		return `
			<table>
				<thead>
					<tr>
						<th id="name">Loading...</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Number of players</td>
						<td id="nb_players">Loading...</td>
					</tr>
					<tr>
						<td>Number of players by game</td>
						<td id="nb_players_by_game">Loading...</td>
					</tr>
					<tr>
						<td>Number of round</td>
						<td id="level">Loading...</td>
					</tr>
					<tr>
						<td>Number of player</td>
						<td id="nb_participants">Loading...</td>
					</tr>
					<tr>
						<td>status</td>
						<td id="state">Loading...</td>
					</tr>
				</tbody>
			</table>
			<input type="button" id="button" value="Join tournament" disabled>
		`
	}
}