import {loadingGif, setResultImage} from "./loading.js";

import {setCreatureTable} from "./setCreatureTable.js";
import {androidResultTable} from "./androidResultTable.js";

document.getElementById('terrainForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const terrain = document.getElementById('terrainType').value;
    const queryParams = new URLSearchParams({
        terrain: terrain,
    });

    // Insert the loading.gif before making the fetch request
    let resultSection = document.getElementById('resultSection');
    let imgElement = loadingGif(resultSection);

    setTimeout(() => {
        fetch(`${window.BASE_URL}/gameplay/encounter?${queryParams}`)
            .then((response) => {
                if (!response.ok) {
                    throw response;
                }
                return response.json(); // we only get here if there is no error
            })
            .then((json) => {
                resultSection.innerHTML = ''; // Clear previous content
                if (Object.keys(json).length === 1) { // Short version of response
                    let name = json.name !== null ? json.name : 'No Encounter';
                    setResultImage(name);
                } else { // Long version of the response
                    if (json.name === 'android') {
                        androidResultTable(json, json.name);
                    } else {
                        setCreatureTable(json, json.name);
                    }
                }
            })
            .catch((err) => {
                err.text().then(() => {
                    imgElement.src = '/assets/img/404.jpg';
                });
            });




    }, 1000);
});