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');
    resultSection.innerHTML = '';
    let imgElement = document.createElement('img');
    imgElement.src = 'img/checking.gif';
    imgElement.style.width = '500px';
    imgElement.style.height = '500px';
    imgElement.style.display = 'block';
    imgElement.style.marginLeft = 'auto';
    imgElement.style.marginRight = 'auto';
    resultSection.appendChild(imgElement);

    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';
                    console.log(name);
                    setResultImage(name);
                } else { // Long version of the response
                    setResultTable(json);
                }
            })
            .catch((err) => {
                err.text().then((errorMessage) => {
                    imgElement.src = './img/404.jpg';
                });
            });

        function setResultImage(name) {
            let imgElement = document.createElement('img');
            imgElement.src = './img/' + name + ".jpg";
            console.log(imgElement.src);
            imgElement.onerror = function () {
                this.onerror = null;
                this.src = './img/404.jpg';
            };
            resultSection.appendChild(imgElement);
        }

        function setResultTable(data) {
            let table = document.createElement('table');
            table.style.fontSize = '18px';
            table.style.fontFamily = 'Arial';

            for (let key in data) {
                let tr = document.createElement('tr');
                let tdKey = document.createElement('td');
                let tdValue = document.createElement('td');

                tdKey.innerText = key.toUpperCase();

                // Make the key names bold:
                tdKey.style.fontWeight = 'bold';

                if (Array.isArray(data[key])) {
                    if (key === 'environ' || key === 'mutations') {
                        tdValue.innerText = data[key].join(', ');
                    } else if (key === 'land speed' || key === 'water speed' || key === 'air speed') {
                        tdValue.innerText = `${data[key][0]}/${data[key][1]}/${data[key][2]}`;
                    } else {
                        tdValue.innerText = `${data[key][0]}d${data[key][1]}${data[key][2] === 0 ? "" : "+" + data[key][2]}`;
                    }
                } else if (key === 'attacks' && typeof data[key] === 'object') {
                    let attacksTable = document.createElement('table');
                    for (let attack in data[key]) {
                        let tr = document.createElement('tr');
                        let tdKey = document.createElement('td');
                        let tdValue = document.createElement('td');
                        tdKey.innerText = attack;

                        if (data[key][attack].join() === "0,0,0") {
                            tdValue.innerText = "See notes below";
                        } else {
                            tdValue.innerText = `${data[key][attack][0]}d${data[key][attack][1]}${data[key][attack][2] === 0 ? "" : "+" + data[key][attack][2]}`;
                        }

                        tr.appendChild(tdKey);
                        tr.appendChild(tdValue);
                        attacksTable.appendChild(tr);
                    }
                    tdValue.appendChild(attacksTable);
                } else {
                    tdValue.innerText = data[key];
                }

                tr.appendChild(tdKey);
                tr.appendChild(tdValue);
                table.appendChild(tr);
            }

            // append image row if name key exists
            if(data.name) {
                let tr = document.createElement('tr');
                let tdKey = document.createElement('td');
                let tdValue = document.createElement('td');
                let imgElement = document.createElement('img');

                tdKey.innerText = 'IMAGE';
                tdKey.style.fontWeight = 'bold';

                imgElement.src = './img/' + data.name + ".jpg";
                imgElement.onerror = function() {
                    this.onerror = null;
                    this.src = './img/404.jpg';
                };

                tdValue.appendChild(imgElement);
                tr.appendChild(tdKey);
                tr.appendChild(tdValue);

                table.appendChild(tr);
            }

            resultSection.appendChild(table);
        }
    }, 1000);
});