let latestURL = window.location.search;
let entryUrl = window.location.search;
function updateQueryStringParameter(key, value, checkbox)
{
    const url = new URL(window.location.href);
    const params = url.searchParams;

    allToggle(checkbox, params);

    const existingKey = Array.from(params.keys())
        .find(k => k.toLowerCase() === key.toLowerCase());

    if (value) {
        if (existingKey)
        {
            params.delete(existingKey);
        }

        params.set(key, value);
        params.delete("p");
    } else
    {
        if (existingKey) {
            params.delete(existingKey);
        } else
        {
            params.delete(key);
        }
        params.delete("p");
    }

    window.location.href = url.toString();
}

function updatePendingQueryString(key, value, checkbox) {
    const url = new URL(window.location.origin + window.location.pathname + latestURL);
    const params = url.searchParams;

    allToggle(checkbox, params);

    const existingKey = Array.from(url.searchParams.keys())
        .find(k => k.toLowerCase() === key.toLowerCase());

    if (value)
    {
        if (existingKey)
        {
            url.searchParams.delete(existingKey);
        }

        url.searchParams.set(key, value);
        url.searchParams.delete("p");
    } else
    {
        if (existingKey)
        {
            url.searchParams.delete(existingKey);
        } else
        {
            url.searchParams.delete(key);
        }
        url.searchParams.delete("p");
    }

    const sortedParams = Array.from(url.searchParams.entries())
        .sort(([a], [b]) => a.localeCompare(b));
    const sortedSearchParams = new URLSearchParams();
    for (const [param, val] of sortedParams) {
        sortedSearchParams.append(param, val);
    }

    latestURL = '?' + sortedSearchParams.toString();
    if (latestURL === "?" && entryUrl === "") {
        latestURL = entryUrl;
    }
    if (latestURL != entryUrl) {
        document.getElementById("applyFiltersWrapper").classList.remove("hidden");
    } else {
        document.getElementById("applyFiltersWrapper").classList.add("hidden");
    }
}

function handleCheckboxChange(checkbox, filterName) {
    if(!filterName){
        return;
    }
    
    const isChecked = checkbox && checkbox.checked;
    if (checkbox.classList.contains('mobileToggle')) {
        updatePendingQueryString(filterName, isChecked ? 'true' : null, checkbox);
    } else {
        updateQueryStringParameter(filterName, isChecked ? 'true' : null, checkbox);
    }
}

function redirectToPendingURL() {
    window.location.href = window.location.origin + window.location.pathname + latestURL;
}

function allToggle(checkbox, params) {
    if (checkbox.classList.contains('foodOption')) {
        if (params.has('Food')) {
            document.getElementById("Food").checked = false;
            params.delete("Food");
        }
    }

    if (checkbox.classList.contains('foodAll')) {
        const foodOptionCheckboxes = document.querySelectorAll('input[type="checkbox"].foodOption');

        foodOptionCheckboxes.forEach(foodCheckbox => {
            if (foodCheckbox.checked) {
                foodCheckbox.checked = false;

                if (foodCheckbox.id) {
                    params.delete(foodCheckbox.id);
                }
            }
        });
    }

    if (checkbox.classList.contains('pharmaOption')) {
        if (params.has('Pharmaceutical')) {
            document.getElementById("Pharmaceutical").checked = false;
            params.delete("Pharmaceutical");
        }
    }

    if (checkbox.classList.contains('pharmaAll')) {
        const pharmaOptionCheckboxes = document.querySelectorAll('input[type="checkbox"].pharmaOption');

        pharmaOptionCheckboxes.forEach(pharmaCheckbox => {
            if (pharmaCheckbox.checked) {
                pharmaCheckbox.checked = false;

                if (pharmaCheckbox.id) {
                    params.delete(pharmaCheckbox.id);
                }
            }
        });
    }

    if (checkbox.classList.contains('materialOption')) {
        if (params.has('Materials')) {
            document.getElementById("Materials").checked = false;
            params.delete("Materials");
        }
    }

    if (checkbox.classList.contains('materialAll')) {
        const materialOptionCheckboxes = document.querySelectorAll('input[type="checkbox"].materialOption');

        materialOptionCheckboxes.forEach(materialCheckbox => {
            if (materialCheckbox.checked) {
                materialCheckbox.checked = false;

                if (materialCheckbox.id) {
                    params.delete(materialCheckbox.id);
                }
            }
        });
    }

    if (checkbox.classList.contains('cosmeticOption')) {
        if (params.has('Cosmetics')) {
            document.getElementById("Cosmetics").checked = false;
            params.delete("Cosmetics");
        }
    }

    if (checkbox.classList.contains('cosmeticAll')) {
        const cosmeticOptionCheckboxes = document.querySelectorAll('input[type="checkbox"].cosmeticOption');

        cosmeticOptionCheckboxes.forEach(cosmeticCheckbox => {
            if (cosmeticCheckbox.checked) {
                cosmeticCheckbox.checked = false;

                if (cosmeticCheckbox.id) {
                    params.delete(cosmeticCheckbox.id);
                }
            }
        });
    }
}

window.onload = function ()
{
    var elementSet = new Set();
    var mobileOpen = false;
        const productTypeParent = document.getElementById('productTypeParent');
        const probeTypeParent = document.getElementById('probeTypeParent');

        const urlParams = new URLSearchParams(window.location.search);
        const trueKeys = [];

        urlParams.forEach((value, key) => {
            if (value.toLowerCase() === 'true') {
                trueKeys.push(key);
            }
        });

        function toggleFilter(element) 
        {
            console.log(element);
            const options = element.nextElementSibling;
            const icon = element.querySelector('i');

            options.classList.toggle('hidden');

            if (options.classList.contains('hidden')) 
            {
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            } else {
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            }
        }

        function toggleAllChildren(parentSection) 
        {
            const childSections = parentSection.querySelectorAll('.filter-section');
            
            childSections.forEach(childSection => 
            {
                var icon = childSection.querySelector('i');

                if (icon) 
                {
                    childSection.classList.toggle('hidden');

                    if (!childSection.classList.contains('hidden')) {
                        icon.classList.remove('fa-chevron-up');
                        icon.classList.add('fa-chevron-down');
                    } else {
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                    }
                }
            });
        }

        function getClosestParent(element, className) 
        {
            const closestParent = element.closest(`.${className}`);
            return closestParent ? closestParent : null;
        }

        function getClosestChild(parentId, className) 
        {
            const parent = document.getElementById(parentId);

            const closestChild = parent.querySelector(`:scope > .${className}`);
            return closestChild || null;
        }

        function handleScreenResize() {
            if (window.innerWidth >= 1024) {
                document.querySelectorAll("#filterPanel input[type='checkbox']").forEach(checkbox => {
                    checkbox.classList.remove("mobileToggle");
                });
            }
        }

        document.querySelectorAll('.parent-filter-heading').forEach(parentHeading =>
        {
            parentHeading.addEventListener('click', function ()
            {
                const icon = parentHeading.querySelector('i');
                const childCategories = parentHeading.parentElement.querySelectorAll(':scope > .filter-section');

                childCategories.forEach(child =>
                {
                    child.classList.toggle('hidden');
                });

                if (childCategories[0].classList.contains('hidden'))
                {
                    icon.classList.remove('fa-chevron-up');
                    icon.classList.add('fa-chevron-down');
                } else
                {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                }
            });
        });

        document.querySelectorAll('.filter-heading').forEach(heading =>
        {
            heading.addEventListener('click', function ()
            {
                toggleFilter(this);
            });
        });

        document.getElementById("OpenMobileFilters").addEventListener("click", () => {
            document.getElementById("filterPanel").classList.remove("hidden");
            
            document.body.classList.add("overflow-hidden");

            document.querySelectorAll("#filterPanel input[type='checkbox']").forEach(checkbox => {
                checkbox.classList.add("mobileToggle");
            });
        });

        document.getElementById("CloseMobileFilters").addEventListener("click", () => {
            document.getElementById("filterPanel").classList.add("hidden");
            
            document.body.classList.remove("overflow-hidden");

            document.querySelectorAll("#filterPanel input[type='checkbox']").forEach(checkbox => {
                checkbox.classList.remove("mobileToggle");
            });
        });

        document.getElementById("applyFilters").addEventListener("click", () => {
            redirectToPendingURL();
        });

        handleScreenResize();
        window.addEventListener('resize', handleScreenResize);
    };