Vote = {
    vote_plus_id: null,
    vote_plus_nickname: "",
    vote_plus_reason: "",
    vote_moins_id: null,
    vote_moins_nickname: "",
    vote_moins_reason: ""
}

let _ = load_page(0)

async function load_page(id) {
    if (get_state()) {
        confirm_popup();
        return;
    }
    let players = await fetch("data/players").then(r => r.json());

    const header = document.createElement("h1");
    const buttons = document.createElement("div");
    buttons.className = "buttons";

    const vote_id = document.createElement("h2");
    vote_id.textContent = "Pour qui votes-tu?"
    const vote_id_select = document.createElement("select");
    const vote_nickname = document.createElement("h2");
    vote_nickname.textContent = "As-tu un surnom à lui donner?";
    const vote_nickname_input = document.createElement("input");
    vote_nickname_input.inputMode = "text";
    vote_nickname_input.maxLength = 100;
    const vote_reason = document.createElement("h2");
    vote_reason.textContent = "Pourquoi votes-tu pour lui?";
    const vote_reason_input = document.createElement("textarea");
    vote_reason_input.maxLength = 1000;

    players.forEach((player) => {
        const player_option = document.createElement("option");
        player_option.value = player["id"];
        player_option.innerText = player["name"];
        vote_id_select.appendChild(player_option);
    })

    if (id) {
        vote_id_select.value = Vote.vote_moins_id;
        vote_nickname_input.value = Vote.vote_moins_nickname;
        vote_reason_input.value = Vote.vote_moins_reason;
        header.textContent = "Vote -";
        let previous = document.createElement("button");
        previous.textContent = "Précédent";
        previous.addEventListener("click", () => {
            Vote.vote_moins_id = vote_id_select.value;
            Vote.vote_moins_nickname = vote_nickname_input.value;
            Vote.vote_moins_reason = vote_reason_input.value;
            load_page(0)
        });
        let submit = document.createElement("button");
        submit.textContent = "A Voté";
        submit.addEventListener("click", async () => {
	    if (vote.vote_plus_id === null || vote.vote_moins_id === null) {
		const popUp = document.createElement("div");
		popUp.className = "popup";
		const message = document.createElement("h2");
		message.textContent = "Tu dois dire pour qui tu vote!";
		const page = document.body;
		popUp.append(message);
		page.append(popUp);
            } else {
                Vote.vote_moins_id = vote_id_select.value;
                Vote.vote_moins_nickname = vote_nickname_input.value;
                Vote.vote_moins_reason = vote_reason_input.value;
                if (await send_vote(Vote)) {
                    confirm_popup();
                    save_state();
                }
	    }
        })
        submit.className = "right";
        previous.className = "left";
        buttons.append(previous, submit);
    } else {
        vote_id_select.value = Vote.vote_plus_id;
        vote_nickname_input.value = Vote.vote_plus_nickname;
        vote_reason_input.value = Vote.vote_plus_reason;
        header.textContent = "Vote +";
        let next = document.createElement("button");
        next.innerText = "Suivant";
        next.addEventListener("click", () => {
            Vote.vote_plus_id = vote_id_select.value;
            Vote.vote_plus_nickname = vote_nickname_input.value;
            Vote.vote_plus_reason = vote_reason_input.value;
            load_page(1)
        });
        next.className = "right";
        buttons.appendChild(next);
    }


    const div = document.getElementById("app");
    div.innerHTML = "";
    div.append(header, vote_id, vote_id_select, vote_nickname, vote_nickname_input, vote_reason, vote_reason_input, buttons);
}

function confirm_popup() {
    const div = document.getElementById("app");
    div.innerText = "";
    div.className = "confirm";
    let success = document.createElement("h1");
    success.textContent = "Merci d'avoir voté!"
    let sub = document.createElement("h3");
    sub.textContent = "Ton vote a bien été prit en compte!";
    div.append(success, sub);
}
function save_state() {
    // create cookie with expiration the next day.
    let date = new Date(Date.now());
    date.setDate(date.getDate() + 1);
    date.setHours(0, 0, 0, 0);
    document.cookie = "hasvoted=true; expires=" + date.toUTCString()
}

function get_state() {
    // get the cookie if exists => already voted.
    let cookie = document.cookie;
    return cookie.includes("hasvoted=true");
}
async function send_vote(vote) { 
    vote.vote_plus_id = parseInt(vote.vote_plus_id, 10);
    vote.vote_moins_id = parseInt(vote.vote_moins_id, 10);
    let body = JSON.stringify(vote);
    let result = await fetch(window.location.href + "post", {method: "POST", body: body}).then(r => r.status);
    return result === 200;
}