import { requireElement } from '/js/iemjs/domUtils.js';
let station = null;
let network = null;
let metar_show = false;
let madis_show = false;

function buildUrl(dateStr) {
    // Centralized URL building logic
    const sortDirElement = document.querySelector('select[name="sortdir"]');
    const windUnitsElement = document.querySelector('select[name="windunits"]');
    const sortDir = sortDirElement ? sortDirElement.value : "asc";
    const windUnits = windUnitsElement ? windUnitsElement.value : "mph";

    // Use URLSearchParams to properly encode parameters
    const params = new URLSearchParams({
        station,
        network,
        date: dateStr,
        sortdir: sortDir,
        windunits: windUnits
    });

    if (metar_show) {
        params.set("metar", "1");
    }
    if (madis_show) {
        params.set("madis", "1");
    }

    return `${window.location.origin}${window.location.pathname}?${params.toString()}`;
}

function updateURI() {
    // Update browser URL without reload
    const datePicker = requireElement("date_picker");
    const url = buildUrl(datePicker.value);
    window.history.pushState({}, "", url);
}

function handlePrevButtonClick() {
    const prevButton = document.getElementById("prevbutton");
    const targetDate = prevButton.dataset.date;
    if (targetDate) {
        navigateToDate(targetDate);
    }
}

function handleNextButtonClick() {
    const nextButton = document.getElementById("nextbutton");
    const targetDate = nextButton.dataset.date;
    if (targetDate && !nextButton.disabled) {
        navigateToDate(targetDate);
    }
}

function navigateToDate(dateStr) {
    // Navigate to the new URL using centralized URL builder
    window.location.href = buildUrl(dateStr);
}

function showMETAR() {
    document.querySelectorAll(".metar").forEach(element => {
        element.style.display = "table-row";
    });
    if (madis_show) {
        document.querySelectorAll(".hfmetar").forEach(element => {
            element.style.display = "table-row";
        });
    }
    const toggle = document.getElementById("metar_toggle");
    toggle.textContent = "";
    const icon = document.createElement("i");
    icon.className = "bi bi-dash-lg";
    icon.setAttribute("aria-hidden", "true");
    toggle.appendChild(icon);
    toggle.appendChild(document.createTextNode(" Hide METARs"));
}

function toggleMETAR() {
    if (metar_show) {
        // Hide both METARs and HFMETARs
        document.querySelectorAll(".metar").forEach(element => {
            element.style.display = "none";
        });
        document.querySelectorAll(".hfmetar").forEach(element => {
            element.style.display = "none";
        });
        const toggle = document.getElementById("metar_toggle");
        toggle.textContent = "";
        const icon = document.createElement("i");
        icon.className = "bi bi-plus-lg";
        icon.setAttribute("aria-hidden", "true");
        toggle.appendChild(icon);
        toggle.appendChild(document.createTextNode(" Show METARs"));
        document.getElementById("hmetar").value = "0";
    } else {
        // show
        showMETAR();
        document.getElementById("hmetar").value = "1";
    }
    metar_show = !metar_show;
    updateURI();
}

function showMADIS() {
    document.querySelectorAll("tr[data-madis='1']").forEach(element => {
        element.style.display = "table-row";
    });
    if (metar_show) {
        document.querySelectorAll(".hfmetar").forEach(element => {
            element.style.display = "table-row";
        });
    }
    const toggle = document.getElementById("madis_toggle");
    toggle.textContent = "";
    const icon = document.createElement("i");
    icon.className = "bi bi-dash-lg";
    icon.setAttribute("aria-hidden", "true");
    toggle.appendChild(icon);
    toggle.appendChild(document.createTextNode(" Hide High Frequency MADIS"));
}

function toggleMADIS() {
    if (madis_show) {
        // Hide MADIS
        document.querySelectorAll("tr[data-madis='1']").forEach(element => {
            element.style.display = "none";
        });
        document.querySelectorAll(".hfmetar").forEach(element => {
            element.style.display = "none";
        });
        const toggle = document.getElementById("madis_toggle");
        toggle.textContent = "";
        const icon = document.createElement("i");
        icon.className = "bi bi-plus-lg";
        icon.setAttribute("aria-hidden", "true");
        toggle.appendChild(icon);
        toggle.appendChild(document.createTextNode(" Show High Frequency MADIS"));
        document.getElementById("hmadis").value = "0";
    } else {
        // Show
        showMADIS();
        document.getElementById("hmadis").value = "1";
    }
    madis_show = !madis_show;
    updateURI();
}

document.addEventListener('DOMContentLoaded', () => {
    // Get form values
    const hiddenStation = document.querySelector('input[name="station"]');
    const hiddenNetwork = document.querySelector('input[name="network"]');

    station = hiddenStation.value;
    network = hiddenNetwork.value;
    metar_show = document.getElementById("hmetar").value === "1";
    madis_show = document.getElementById("hmadis").value === "1";

    // Set up event listeners
    const metar_toggle = document.getElementById("metar_toggle");
    if (metar_toggle) {
        metar_toggle.addEventListener('click', toggleMETAR);
    }
    const madis_toggle = document.getElementById("madis_toggle");
    if (madis_toggle) {
        madis_toggle.addEventListener('click', toggleMADIS);
    }
    requireElement("prevbutton").addEventListener('click', handlePrevButtonClick);
    requireElement("nextbutton").addEventListener('click', handleNextButtonClick);

    // Initial state for METAR/MADIS display
    if (metar_show) {
        showMETAR();
    }
    if (madis_show) {
        showMADIS();
    }
});
