const gauge_url = "https://api.camp.interhacker.space/api/gauge"
const fundraising_url = "https://api.camp.interhacker.space/api/fundraising"
const gaugeMax = 250;
const fundraisingTotalMax = 20000;

async function getGauge() {
    // REMOVE WHEN SIGNUP FORM IS OPEN
    return 0;

    try {
        const response = await fetch(gauge_url);
        if (!response.ok) {
            throw new Error(`Response status: ${response.status}`);
        }

        const result = await response.json();

        return result.gauge
    } catch (error) {
        console.error(error.message);

        return null;
    }
}

async function getFundraisingTotal() {
    try {
        const response = await fetch(fundraising_url);
        if (!response.ok) {
            throw new Error(`Response status: ${response.status}`);
        }

        const result = await response.json();

        return result.total
    } catch (error) {
        console.error(error.message);

        return null;
    }
}

function percentRatio(ratio) {
    return Math.floor(ratio * 100);
}

function setAboveHalf(ratio, element) {
    if (ratio > 0.5) {
        element.classList.remove("lessthanhalf");
        element.classList.add("morethanhalf");
    }
}

async function setGauge() {
    const gauge = await getGauge();

    if (gauge !== null) {
        const gaugeBar = document.getElementById("gauge-bar");
        const gaugeText = document.getElementById("gauge-text");

        const gaugeRatio = gauge / gaugeMax;

        gaugeBar.style.setProperty("width", percentRatio(gaugeRatio) + "%");
        gaugeText.innerText = gauge + "/" + gaugeMax;

        setAboveHalf(gaugeRatio, gaugeBar);
    }
}

async function setFundraisingTotal() {
    const fundraising_total = await getFundraisingTotal();

    if (fundraising_total !== null) {
        const fundraisingBar = document.getElementById("fundraising-bar");
        const fundraisingText = document.getElementById("fundraising-text");

        const fundraisingRatio = fundraising_total / fundraisingTotalMax;

        fundraisingBar.style.setProperty("width", percentRatio(fundraisingRatio) + "%");
        fundraisingText.innerText = percentRatio(fundraisingRatio) + " %";

        setAboveHalf(fundraisingRatio, fundraisingBar);
    }
}

async function setProgress() {
    setGauge();
    setFundraisingTotal();
}

document.addEventListener("DOMContentLoaded", setProgress);