document.addEventListener("DOMContentLoaded", function () {
    showTable('build', buildings);
    let tableIsDisplayed = true;
    tableVisibilityButton.addEventListener("click", () => {
        if (tableIsDisplayed) {
            clearTable('build')
            tableVisibilityButton.innerHTML = "Показать таблицу";
        } else {
            showTable('build', buildings);
            tableVisibilityButton.innerHTML = "Скрыть таблицу";
        }
        tableIsDisplayed = !tableIsDisplayed;
    })
    updateGraph();
    drawButton.addEventListener("click", () => {
        clearGraph();
        updateGraph();
    });
    document.querySelectorAll("[name=\"OY\"]").forEach((x) => { 
        x.addEventListener("click", () => { d3.select("#drawButton").attr("class",  getOY().length == 0 ? "error" : ""); }) 
    })

});


function updateGraph() {
    const keyX = ["Год", "Страна"][getOX()];
    const yAxis = getOY();
    d3.select("#drawButton").attr("class", yAxis.length == 0 ? "error" : "");
    drawGraph(buildings, keyX, yAxis.includes(0), yAxis.includes(1), getGraphType());

}


function getOX() {
    return Number(document.querySelector("input[name=\"OX\"]:checked").value);
}

function getOY() {
    return d3.map(document.querySelectorAll("input[name=\"OY\"]:checked"),
        (x) => Number(x.value));
}

function clearGraph() {
    d3.select("svg").selectAll('*').remove();
}

function getGraphType() {
    return Number(graphType.value);
}