const fetchStfProducts = async () => {
    const URL = stfProductsURL;
    try {
        const response = await fetch(URL);
        const data = await response.json();
        return data;
    }
    catch (error) {
        console.log("Running local server failed to fetch stf_products.json. Loading local sample.");
        const response = await fetch("/theme/json/stf_products_sample.json");
        const data = await response.json();
        return data;        
    }
}  

const eventListenerFromDpodFilters = (clickedValue) => {
    localStorage.setItem("stf_product", clickedValue);
    localStorage.setItem("product", clickedValue);
    localStorage.removeItem("selected_category");
    if (clickedValue === "All") {
        window.searchConfig.page.product = undefined;
        localStorage.removeItem("stf_product");
        localStorage.removeItem("product");
    } else {
        window.searchConfig.page.product = clickedValue;
        localStorage.setItem("stf_product", clickedValue);
        localStorage.setItem("product", clickedValue);
    }
    reloadResults();
}

const eventListenerFromAppJs = ($this) => {
    var text = $this.text();
    console.log("eventListenerFromAppJs", text);
    $this.parents(".input-dropdown").find("p").text(text);
    $this.parents(".input-dropdown").find("li").removeClass("is-active");
    $this.addClass("is-active");
    $this
    .parents(".form-search")
    .find('input[type="text"]')
    .attr("placeholder", "Search: " + text);
};

$(window).ready(async function () {
    let data = await fetchStfProducts();
    const stf_products = data.stf_products;
    if (localStorage.getItem('stf_product') != undefined){
        var sel_product=localStorage.getItem('stf_product');
    }else {
        var sel_product="All"
    }

    const ULContainer = $(".input-dropdown ul");
    stf_products.forEach(product => {
        const li = $("<li>").text(product).addClass("options");
        li.on("click", function () { 
            const $this = $(this);
            eventListenerFromDpodFilters(product);
            eventListenerFromAppJs($this);
        });
        if (product == sel_product){
            $(".input-dropdown ul li:first").removeClass("is-active");
            li.addClass("is-active");
            }
        ULContainer.append(li);
        $(".input-dropdown ul li.is-active").click();
    });

    

    if ($("body").hasClass("search")) {
        const product = localStorage.getItem("stf_product");
        if (product !== null) {
          $(".input-dropdown ul li").each(function () {
            const ulText = $(this).text();
            $(this).removeClass("is-active");
            if (ulText === product) {
              $(this).addClass("is-active");
              $(".input-dropdown").find("p").text(product);
              $(this)
                .parents(".select-with-input")
                .find('input[type="text"]')
                .attr("placeholder", "Search: " + product);
            }
          });
          window.searchConfig.page.product = product;
        }
        }
        else if ($("body").hasClass("index")) {
        $(".input-dropdown p").text() === "All"
        ? localStorage.removeItem("stf_product")
        : null;
      }

});