import { Profile } from "../../api/Profile.js";
import { Tourmanent } from "../../api/tournament/Tournament.js";
import {client, navigateTo} from "../../index.js";
import AbstractAuthenticatedView from "../abstracts/AbstractAuthenticatedView.js";

const TEXT_CONVENTION = {
	"error": "[ERROR]"
}

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

	pressButton()
	{
		this.tournament.setParticipation(!this.tournament.isParticipating);
		this.updateParticipating()
	}

	updateParticipating()
	{
		document.getElementById("button").value = this.tournament.isParticipating ? `Leave ${this.tournament.name}` : `Join ${this.tournament.name}`;
		document.getElementById("display").innerText = this.tournament.isParticipating ? "You are a particpant" : "You are not a participant";
	}

	async onDisconnect(event)
	{

	}

	async onError(data)
	{
		this.addChatMessage(`${TEXT_CONVENTION} data.error_message`);
	}

	async onFinish()
	{
		document.getElementById("state").innerText = "finished"
	}

	async onStart()
	{
		document.getElementById("state").innerText = "started"
	}

	async onGoTo(data)
	{
		await navigateTo(`/games/pong/${data.game_id}`)
	}

	async onAddParticipant(nb_participants)
	{
		document.getElementById("nb_participants").innerText = nb_participants;
	}

	async onDelParticipant(nb_participants)
	{
		document.getElementById("nb_participants").innerText = nb_participants;
	}

	async postInit()
	{
		/**
		 * @type {Tourmanent}
		 */
		this.tournament = await client.tournaments.getTournament(this.id);

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

		this.tournament.join(this.onAddParticipant, this.onDelParticipant, this.onStart, this.onFinish, this.onError, this.onGoTo, this.onDisconnect);

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

		document.getElementById("name").innerText = this.tournament.name;
		document.getElementById("nb_participants").innerText = this.tournament.participantList.length;
		document.getElementById("expected_nb_participants").innerText = this.tournament.nb_participants;
		document.getElementById("round").innerText = this.tournament.round;
		document.getElementById("state").innerText = this.tournament.state;

		if (this.tournament.started === false)
			button.disabled = false;

		this.chat = document.getElementById("chat");
	}

	addChatMessage(message)
	{
		this.chat.innerText += message;
	}

	async getHtml()
	{
		return `
			<link rel="stylesheet" href="/static/css/TournamentPage.css">
			<table>
				<thead>
					<tr>
						<th id="name">Loading...</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Number of round</td>
						<td id="round">Loading...</td>
					</tr>
					<tr>
						<td>Number of participants</td>
						<td id="nb_participants">Loading...</td>
					</tr>
					<tr>
						<td>Expected number of participants</td>
						<td id="expected_nb_participants">Loading...</td>
					</tr>
					<tr>
						<td>state</td>
						<td id="state">Loading...</td>
					</tr>
				</tbody>
			</table>
			<input type="button" id="button" value="Join tournament" disabled>
			<span id="display"></span>
			<textarea id="chat" rows="4" cols="50" readonly>
			</textarea>
		`;
	}
}