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


document.getElementById('searchForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const creatureName = document.getElementById('creature').value;
    const queryParams = new URLSearchParams({
        creature: creatureName,
    });

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

    setTimeout(() => {
        fetch(`${window.BASE_URL}/rules/creature?${queryParams}`)
            .then((response) => {
                if (!response.ok) {
                    throw response;
                }
                return response.json(); // we only get here if there is no error
            })
            .then((json) => {
                if (json === null) { // if json is null update the image and stop execution
                    imgElement.src = '/assets/img/404.jpg';
                    throw new Error('No data found'); // this will stop the execution and go to the catch block
                }
                resultSection.innerHTML = ''; // Clear previous content
                if (creatureName === 'android') {
                    androidResultTable(json, creatureName);
                } else {
                    setCreatureTable(json, creatureName);
                }
            })
            .catch((err) => {
                console.log(err);
                if (!resultSection.hasChildNodes()) { // Only update the image if it wasn't already updated
                    imgElement.src = '/assets/img/404.jpg';
                }
            });
    }, 1000);
});