var filteredValues = [];
var currentFilterBoxes = [];
var filteredProducts = [];
var filterPage = 0;
var productsPerPage = 12;
var lastProductPosition = 0;
var loadTrigger = 5000;
var configurableProducts = [];

function loadFilters() {
    currentFilterBoxes = AjaxJSONSync("GET", "/UIData/filterBoxes/all");
    paintFilters(currentFilterBoxes);
}
function paintFilters(filterBoxes) {
    let suffix = "";
    if (currentVisibility == 1)
        suffix = "Small";
    let flgPainted = false;

    $("#filterBoxes" + suffix).empty();
    $("#currentFilters" + suffix).empty(); 
    for (i in filterBoxes) {
        let filterBox = filterBoxes[i];
        for (v in filterBox.values) {
            let item = filterBox.values[v];
            if (filteredValues.indexOf(item.value) > -1) {
                let h = getFilterBoxItemHTML(item, filterBox.filterBehavior, filterBox.id);
                $("#currentFilters" + suffix).append(h);
            }
        }
        if ((filterBoxes[i].values.length > 1) || (filteredValues.length == 0)) {
            let h = getFilterBoxHTML(filterBoxes[i]);
            flgPainted = flgPainted || (h.trim() != "");
            $("#filterBoxes" + suffix).append(h);
        }
    }
    if ((filteredValues == undefined) || (filteredValues.length == 0)) {
        document.getElementById("chooseFilter").style.display = "inline";    
    }
    else {
        document.getElementById("chooseFilter").style.display = "none";    
    }

    extraFiltersExist = flgPainted;
    if (flgPainted == false) {
        document.getElementById("nomorefilter" + suffix).style.display = "block";
        document.getElementById("addFilterButtonSmall").style.display = "none";
        showProducts();
        return;
    }
    else {
        document.getElementById("nomorefilter" + suffix).style.display = "none";
        if (document.getElementById("filterContainerSmall").style.display == "none") {
            document.getElementById("addFilterButtonSmall").style.display = "inline";
        }
        else {
            document.getElementById("addFilterButtonSmall").style.display = "none";
        }
    }

    document.getElementById("filterBoxesSmall").scrollTop = 0;

    setProductContainerHeight();    

}
function setProductContainerHeight() {

    let vh100 = window.innerHeight;

    let suffix = "";
    if (currentVisibility == 1)
        suffix = "Small";

    document.getElementById("contentContainer" + suffix).style.height = (vh100 - 75) + "px";

    let newHeight = 0;
    if (document.getElementById("currentFilter" + suffix).style.display != "none") {
        newHeight = document.getElementById("currentFilter" + suffix).offsetHeight;
        if (newHeight == 0)
            newHeight = 45;
    }
    newHeight += 75;
    let newTop = newHeight;

    document.getElementById("productContainer" + suffix).style.height = (vh100 - newHeight) + "px";
    document.getElementById("productContainer" + suffix).style.top = newTop + "px";

    if (suffix == "Small") {
        document.getElementById("filterContainer" + suffix).style.height = document.getElementById("productContainer" + suffix).style.height
        document.getElementById("filterContainer" + suffix).style.top = document.getElementById("productContainer" + suffix).style.top;
        if (document.getElementById("nomorefilterSmall").style.display != "none") {
            newHeight += document.getElementById("nomorefilterSmall").offsetHeight;
        }
        newHeight += document.getElementById("showProducts").offsetHeight;
        document.getElementById("filterBoxes" + suffix).style.height = (vh100 - newHeight - 20) + "px";
    }
    else {
        let boxHeight = 120;
        if (document.getElementById("nomorefilter").style.display != "none") {
            boxHeight += document.getElementById("nomorefilter").offsetHeight;
        }
        document.getElementById("filterBoxes").style.height = (vh100 - boxHeight) + "px";
    }
}
function setProductContainerHeightOld() {
    let suffix = "";
    if (currentVisibility == 1)
        suffix = "Small";
    let newHeight = 0;
    if (document.getElementById("currentFilter" + suffix).style.display != "none") {
        newHeight = document.getElementById("currentFilter" + suffix).offsetHeight;
        if (newHeight == 0)
            newHeight = 45;
    }
    newHeight += 75;
    let newTop = newHeight;

    document.getElementById("productContainer" + suffix).style.height = "calc(100vh - " + newHeight + "px)";
    document.getElementById("productContainer" + suffix).style.top = newTop + "px";

    if (suffix == "Small") {
        document.getElementById("filterContainer" + suffix).style.height = document.getElementById("productContainer" + suffix).style.height
        document.getElementById("filterContainer" + suffix).style.top = document.getElementById("productContainer" + suffix).style.top;
        if (document.getElementById("nomorefilterSmall").style.display != "none") {
            newHeight += document.getElementById("nomorefilterSmall").offsetHeight;
        }
        newHeight += document.getElementById("showProducts").offsetHeight;
        document.getElementById("filterBoxes" + suffix).style.height = "calc(100vh - " + newHeight + "px)";;
    }
    else {
        let boxHeight = 120;
        if (document.getElementById("nomorefilter").style.display != "none") {
            boxHeight += document.getElementById("nomorefilter").offsetHeight;
        }
        document.getElementById("filterBoxes").style.height = "calc(100vh - " + boxHeight + "px)";
    }
}
function getFilterBoxItemHTML(item, filterBehavior, attributeId) {
    let html = "";
    if (filteredValues.indexOf(item.value) > -1) {
        html += "<div id='v_"+item.value+"' label='" + item.label + "' style='display:inline-block' class='currentfilter' onclick='removeFilterValue(\"" + item.value + "\",true)'>" + item.label;
        html += "<span style='margin-left:10px' aria-hidden='true'>&times;</span>";
        html += "</div> ";
    }
    else {
        html += "<div class='radio'>";
        html += "<input type='radio' name='radio_" + attributeId + "' behavior='" + filterBehavior + "' attributeId='" + attributeId + "' ";
        html += " id='v_" + item.value + "' value='" + item.value + "' label = '" + item.label + "' style = 'margin-right:10px'";
        html += " onclick='filterClicked(event)' /> ";
        html += "<label for='v_" + item.value + "' class='filterValueLabel'>" +  item.label + "</label>";
        html += "</div>";
    }
    return html;
}
function getUnitPrice(unitPriceInCent, strikethrough = false) {
    let HTML = "";
    if (strikethrough)
        HTML += "<span class='originalProductPrice'>";
    else
        HTML += "<span class='productPrice'>";
    HTML += "<i class='fas fa-euro-sign fa-xs m-l-2'" + (strikethrough ? "style = 'text-decoration: line-through;'":"") + "></i> " + (unitPriceInCent / 100).toFixed(2);
    HTML += "</span>";
    return HTML;
}
function getProductCardHTML(product) {
    console.log(product);
    if (product.fileName == null)
        product.fileName = "default.jpg";
    let imageUrl = "/images/products/" + product.fileName;
    let HTML = "";
    HTML += "<div class='productCard' product='" + product.id + "' id='pb_" + product.id + "'>";
    HTML += (product.originalUnitPriceInCent > 0 ? "<span class='bullet-message' id=''>OUTLET</span>" : "");
    HTML += "<img class='productImage' onclick='zoom(event)' src='" + imageUrl + "'  image='" + imageUrl + "'>";
    HTML += "<div class='productActions'>";
    HTML += "<span class='btn btn-xs' onclick='zoom(event)' image='" + imageUrl + "'><i class='fas fa-search-plus'></i></span>";
    HTML += "<span class='btn btn-xs' onclick='productDetail(" + product.id + ")'><i class='fas fa-list'></i></span>";
    if ((product.configuration == undefined) || (product.configuration == null) || (product.configuration == ""))
        HTML += "<span class='btn btn-xs' onclick='addBasketProduct(" + product.id + "," + product.unitPriceInCent + ")'><i class='fas fa-cart-plus'></i></span>";
    else {
        HTML += "<span class='btn btn-xs' onclick='configureProduct(" + product.id + ")'><i class='fas fa-cart-plus'></i></span>";
    }
    HTML += "</div>";
    HTML += "<div>";
    if (product.priceType == 1)
        HTML += "vanaf ";
    HTML += getUnitPrice(product.unitPriceInCent,false);
    if (product.originalUnitPriceInCent > 0) {
        HTML += " " + getUnitPrice(product.originalUnitPriceInCent, true);
        //let discountPercentage = Math.floor((product.unitPriceInCent - product.originalUnitPriceInCent) / (product.unitPriceInCent) * 100);
        //HTML += "<span class='discountPercentage'>(" + discountPercentage + "%)</span>";
    }
    HTML += "</div>";
    HTML += "<div class='productLabel'>" + product.label + "</div>";
    HTML += "</div > ";
    HTML += "</div> ";    
    return HTML;
}
function getFilterBoxHTML(filterBox) {
    let visibleItemsHtml = "";
    let invisibleItemsHtml = "";
    for (v in filterBox.values) {
        let item = filterBox.values[v];
        if (filteredValues.indexOf(item.value) > -1)
            continue;
        itemHtml = getFilterBoxItemHTML(item, filterBox.filterBehavior, filterBox.id);
        if (item.visible) {
            visibleItemsHtml += itemHtml;
        }
        else {
            invisibleItemsHtml += itemHtml;
        }
    }
    let html = "";
    if (visibleItemsHtml != "") {
        html += "<div class='text-uppercase filterTitle'>" + filterBox.title + "</div>";
        html += visibleItemsHtml;
        if (invisibleItemsHtml != "") {
            let moreId = "more_" + filterBox.id;
            html += "<div class='filterMoreLess' less='" + moreId + "'><span><a href='#' more='" + moreId + "'  onclick='moreClicked(event)'>meer...<i class='fas fa-angle-down'></i></a></span></div>";
            html += "<div style='display:none' more='" + moreId + "'>";
            html += invisibleItemsHtml;
            html += "<div class='filterMoreLess' more='" + moreId + "'><span><a href='#' less='" + moreId + "' onclick='lessClicked(event)'>minder...<i class='fas fa-angle-up'></i> </a></span></div>";
            html += "</div>";
        }
    }
    return html;
}
function moreClicked(e) {
    let moreId = event.target.getAttribute("more");
    $("div[more='" + moreId + "']").show();
    $("div[less='" + moreId + "']").hide();
}
function lessClicked(e) {
    let lessId = event.target.getAttribute("less");
    $("div[more='" + lessId + "']").hide();
    $("div[less='" + lessId + "']").show();
}
function addFilterValue(filterValue) {
    let valueIndex = filteredValues.indexOf(filterValue);
    if (valueIndex == -1) {
        filteredValues[filteredValues.length] = filterValue;
    }
    refreshAll();
}
function clearFilter() {
    filteredValues = [];
    filteredProducts = [];
    currentFilterBoxes = [];
    loadFilters();
    refreshProducts();
    resetCurrentFilter();
}
function resetCurrentFilter() {
    if (currentVisibility == 1) {
        document.getElementById("filterContainerSmall").style.display = 'none';
        document.getElementById("currentFilterSmall").style.display = 'none';
        $("#currentFiltersSmall").empty();
        document.getElementById("filterButton").style.display = 'inline';
        setProductContainerHeight();
        document.getElementById("productContainerSmall").style.display = 'block';
        document.getElementById("productContainerSmall").scrollTop = 0;
    }
    else {
        document.getElementById("currentFilter").style.visibility = 'hidden';
        $("#currentFilters").empty();
        document.getElementById("filterContainer").scrollTop = 0;
    }
}
function resetView() {

    if ((filteredValues == undefined) || (filteredValues.length == 0)) {
        if (currentVisibility == 1) {
            if (document.getElementById("filterContainerSmall").style.display == "none") {
                document.getElementById("currentFilterSmall").style.display = 'none';
                document.getElementById("filterButton").style.display = 'inline';
            }
            else {
                document.getElementById("filterBoxesSmall").scrollTop = 0;
            }
        }
        else {
            document.getElementById("currentFilter").style.visibility = 'hidden';
            $("#currentFilters").empty();
            document.getElementById("filterBoxes").scrollTop = 0;
        }
    }
    else {
        if (currentVisibility == 0) {
            document.getElementById("currentFilter").style.visibility = 'visible';
        }
        else {
            document.getElementById("currentFilterSmall").style.display = 'block';
        }
    }

    setProductContainerHeight();
}
function filterClicked(e) {
    let value = e.currentTarget.value;
    addFilterValue(value);
}
function getProductsForPage(page) {
    let startIndex = page * productsPerPage;
    let endIndex = startIndex + productsPerPage - 1;
    if (endIndex > (filteredProducts.length-1))
        endIndex = filteredProducts.length - 1;

    if ((filteredProducts == undefined) || ((filteredProducts.length-1) < startIndex))
        return null;

    let productsToRetrieve = filteredProducts.slice(startIndex, endIndex+1);

    //retrieve products from server
    let productList = AjaxJSONSync("POST", "/products/byProductIds/all", productsToRetrieve);

    //add configurable products
    for (p in productList) {
        let product = productList[p];
        if ((product.configuration == undefined) || (product.configuration == null) || (product.configuration == ""))
            continue;

        if (configurableProducts.indexOf(product) == -1) {
            configurableProducts[configurableProducts.length] = product;
        }
    }


    return productList;
}
function loadNextProductPage() {
    let startIndex = (filterPage + 1) * productsPerPage;
    if (startIndex > filteredProducts.length )
        return;
    filterPage++;

    //get products for page
    let productList = getProductsForPage(filterPage);
    if (productList == null) {
        return;
    }

    //paint products
    paintProducts(productList);

}
function refreshProducts() {
    filterPage = 0;
    lastProductPosition = 0;
    filteredProducts = AjaxJSONSync("POST", "/products/byFilter/all", filteredValues);
    let productList = getProductsForPage(filterPage);
    let suffix = "";
    if (currentVisibility == 1)
        suffix = "Small";
    $("#products" + suffix).empty();
    paintProducts(productList);
}
function paintProducts(productList) {
    let suffix = "";
    if (currentVisibility == 1)
        suffix = "Small";
    if (productList == null) {
        $("#products" + suffix).append("Er zijn geen producten die voldoen aan alle filter criteria.");
        return;
    }
    var bodyRect = document.body.getBoundingClientRect();
    for (p in productList) {
        let product = productList[p];
        $("#products" + suffix).append(getProductCardHTML(product));
        let elemRect = document.getElementById("pb_" + product.id).getBoundingClientRect();
        lastProductPosition = elemRect.top - bodyRect.top;
    }
    if ((filteredProducts != undefined) && (filteredProducts.length != undefined) && (filteredProducts.length > 0)) {
        document.getElementById("showProducts").innerHTML = "Toon producten (" + filteredProducts.length + ")";
    }
    else {
        document.getElementById("showProducts").innerHTML = "Toon producten";
    }
}
function filterValueClicked(e) {
    let filterValue = e.currentTarget.getAttribute("filterValue");
    if (document.getElementById("v_" + filterValue).checked == true)
        document.getElementById("v_" + filterValue).checked = false;
    removeFilterValue(filterValue);
}
function removeFilterValue(filterValue) {
    let valueIndex = filteredValues.indexOf(filterValue);
    filteredValues.splice(valueIndex, 1);
    refreshAll();
}
function refreshAll() {
    getFilteredAttributeValues();
    refreshProducts();
    resetView();
}
function getProduct(productId) {
    var response = AjaxJSONSync("GET", "/products?productid=" + productId);
    return response;
}