import ClimateChart from "./ClimateChart";

const CHART_DOM_ID: string = "myChart";
let rootUrl: string = "";

function createClimateChart() {
    const pathname = window.location.pathname;
    if (pathname !== "/") {
        rootUrl += pathname.match(/\/[^?\s]*/)[0];
    }
    let minutesDisplayed = 60;
    const argsStart = pathname.search(/\?minute-span=/);
    if (argsStart !== -1) {
        const parsedMins = Number(pathname[12]);
        if (!isNaN(parsedMins) && parsedMins > 0) {
            minutesDisplayed = parsedMins;
        }
    }
    return new ClimateChart(rootUrl, CHART_DOM_ID, minutesDisplayed);
}

const overlay = document.createElement('div');
overlay.classList.add('overlay', 'center');
const textContainer = document.createElement('span');
textContainer.innerText = 'Loading data...';
overlay.appendChild(textContainer);

document.onreadystatechange = (e) => {
    document.getElementById("root").appendChild(overlay);
    const climateChart = createClimateChart();
    climateChart.onLoaded(() => {
        overlay.classList.add('hidden');
    });
    climateChart.onErrored((e) => {
        overlay.classList.remove('hidden');
        textContainer.innerText = `An error occurred: ${e}\nTry restarting the page.`;
    });
    document.onreadystatechange = () => {};
};