async function getCountryData() {
    let countryData = await fetch(`cclist.json`);
    let countryList = await countryData.json();

    let countryTableBody = document.querySelector("#country-list tbody");
    for (let co of countryList) {
        let newTR = document.createElement("tr");
        newTR.dataset["code"] = co.Code.toLowerCase();
        newTR.dataset["name"] = co.Name.toLowerCase();
        newTR.dataset["role"] = "country";

        let newTD = document.createElement("td");
        newTD.textContent = co.Code;
        newTR.appendChild(newTD);

        newTD = document.createElement("td");
        newTD.textContent = co.Name;
        newTR.appendChild(newTD);

        countryTableBody.appendChild(newTR);
    }
};

function applyFilter(fval) {
    if (fval == "") {
        document.querySelectorAll('tr[data-role="country"]').forEach((x) => {
            x.classList.remove("hidden", "exact");
        })
    }
    
    const fvalLower = fval.toLowerCase();
    
    document.querySelectorAll('tr[data-role="country"]').forEach((x) => {
        const matches = (x.dataset["code"].indexOf(fvalLower) != -1) ||
            (x.dataset["name"].indexOf(fvalLower) != -1);
        
        if (!matches) {
            x.classList.add("hidden");
            x.classList.remove("exact");
        } else {            
            x.classList.remove("hidden");
            
            if ((x.dataset["code"] == fvalLower) || (x.dataset["name"] == fvalLower)) {
                x.classList.add("exact");
            } else {
                x.classList.remove("exact");
            }
        }
    })    
}

function setupCountryFilter() {
    let lastFilterValue = "";
    let filter = document.querySelector("#filter");
    filter.addEventListener("keyup", (ev) => {
        ev.preventDefault();

        if (filter.value == lastFilterValue) {
            return;
        }
        lastFilterValue = filter.value;

        applyFilter(filter.value);
    });
}

document.addEventListener("DOMContentLoaded", () => {
    getCountryData();
    setupCountryFilter();
});