let cel = 0;
let czas = 0;
let zaklad = 0;
let wToku = false;

document.addEventListener("DOMContentLoaded", () => {
    /**
     * @type {HTMLFormElement}
     */
    const konfiguracja = document.querySelector('#konfiguracja form');
    konfiguracja.onsubmit = ev => {
        ev.preventDefault();
        new FormData(konfiguracja);
    }
    konfiguracja.onformdata = zacznijGre;

    /**
     * @type {HTMLFormElement}
     */
    const liczba = document.querySelector('#liczba form');
    liczba.onsubmit = ev => {
        ev.preventDefault();
        new FormData(liczba);
    }
    liczba.onformdata = zamknijNumer;

    for (let i = 1; i <= 100; i++) {
        /**
         * @type {HTMLButtonElement}
         */
        const przycisk = document.getElementById(i);
        przycisk.onclick = klikLiczby;
    }
});

function pokazKonfiguracje() {
    if (wToku) {
        return;
    }
    /**
     * @type {HTMLFormElement}
     */
    const konfiguracja = document.getElementById('konfiguracja');
    konfiguracja.className = 'dialog dialog-pokaz';

    /**
     * @type {HTMLInputElement}
     */
    const lManual = document.getElementById('l-manual');
    lManual.checked = false;

    /**
     * @type {HTMLInputElement}
     */
    const lAuto = document.getElementById('l-auto');
    lAuto.checked = false;
}

/**
 * 
 * @param {FormDataEvent} event 
 */
function zacznijGre(event) {
    event.preventDefault();
    if (wToku) {
        return;
    }
    wToku = true;

    if (event.formData.get("losowosc") == "komputer") {
        cel = Math.floor(Math.random() * 99 + 1);
    }

    zaklad = Number(event.formData.get("zaklad"))
 
    /**
     * @type {HTMLFormElement}
     */
    const konfiguracja = document.getElementById('konfiguracja');
    konfiguracja.className = 'dialog dialog-ukryj';

    /**
     * @type {HTMLFormElement}
     */
    const tytul = document.getElementById('tytul');
    tytul.className = 'ukryj';

    /**
     * @type {HTMLParagraphElement}
     */
    const pudla = document.getElementById('pudla');
    pudla.innerText = '0';

    /**
     * @type {HTMLParagraphElement}
     */
    const kwota = document.getElementById('kwota');
    kwota.innerText = zaklad + 'zł';
}

function koniecGry() {
    if (!wToku) {
        return;
    }
    wToku = false;

    /**
     * @type {HTMLFormElement}
     */
    const koniec = document.getElementById('koniec');
    koniec.className = 'dialog dialog-pokaz';
}

/**
 * 
 * @param {Event} event 
 */
function klikLiczby(event) {
    if (!wToku) {
        return;
    }
    if (Number(event.target.id) == cel) {
        event.target.className = 'poprawna';
        koniecGry();
    } else if (event.target.className != "bledna") {
        /**
         * @type {HTMLParagraphElement}
         */
        const pudla = document.getElementById('pudla');
        pudla.innerText = Number(pudla.innerText) + 1;

        event.target.className = 'bledna';
    }
}

function pokazNumer() {
    if (wToku) {
        return;
    }
    /**
     * @type {HTMLFormElement}
     */
    const liczba = document.getElementById('liczba');
    liczba.className = 'dialog dialog-pokaz';

    /**
     * @type {HTMLInputElement}
     */
    const numer = document.getElementById('numer');
    numer.value = "";
}

/**
 * 
 * @param {FormDataEvent} event 
 */
function zamknijNumer(event) {   
    if (wToku) {
        return;
    } 
    /**
     * @type {HTMLFormElement}
     */
    const liczba = document.getElementById('liczba');
    liczba.className = 'dialog dialog-ukryj';

    cel = Number(event.formData.get("liczba"));

    /**
     * @type {HTMLInputElement}
     */
    const numer = document.getElementById('numer');
    numer.value = "";
}