jQuery(document).ready(checkContainer);

function checkContainer() {
    if ($('[data-filter]:not(input)').is(':visible')) {
        filtering();
        categorySelection();
    } else {
        setTimeout(checkContainer, 1000);
    }
}
var filterValueArray = []
function filtering() {
    console.log("yes")
    console.log("checking length", $('[data-filter]:not(input)').length)
    console.log("checking length c tag", $('.c-tag li').length)
    $('[data-filter]:not(input)').click(function () {
        console.log("clicked");
        $("#loady").fadeOut("slow");
        $('[data-filter]').each(function () {
            var filterValue = $(this).attr('data-filter').trim();
            if (filterValue.includes("All")) {
                $(this).removeClass("is-active")
            }
        })
        var filterValue = $(this).attr('data-filter').trim();
        if (!filterValue.includes("All")) {
            if (filterValueArray.includes('All')) {
                filterValueArray = []
                $('[data-tags]').each(function () {
                    $(this).removeClass("show")
                })
            }
            if (!filterValueArray.includes(filterValue)) {
                $(this).addClass("is-active")
                filterValueArray.push(filterValue)
                filter(filterValueArray)
            } else {
                $(this).removeClass("is-active")
                var index = filterValueArray.indexOf(filterValue);
                if (index >= 0) {
                    filterValueArray.splice(index, 1);
                }
                if (filterValueArray.length >= 1) {
                    filter(filterValueArray)
                } else {
                    $('[data-tags]').each(function () {
                        if ($(this).hasClass("selected")) {
                            $(this).show()
                        }

                    })
                }

            }
        } else {
            console.log("all");
            $(this).addClass("is-active")
            $('[data-filter]').each(function () {
                var filterValue = $(this).attr('data-filter').trim();
                if (!filterValue.includes("All")) {
                    $(this).removeClass("is-active")
                }
            })
            filterValueArray = []
            var selectedCategory = '';
            var isselectedCategory = false;
            $('[category-filter]').each(function () {
                if ($(this).hasClass("is-active")) {
                    isselectedCategory = true
                    selectedCategory = $(this).attr('category-filter');
                }
                console.log("selectedCategoryselectedCategory", selectedCategory)
            })
            console.log("isselectedCategory", isselectedCategory)
            $('[data-tags]').each(function (index) {
                console.log("selectedCategory", selectedCategory)
                var category = $(this).attr('data-category')
                console.log("category", category)
                if (isselectedCategory) {
                    if (index <= 8 && category == selectedCategory) {
                        $(this).show()
                    } else {
                        $(this).hide()
                    }
                } else {
                    if (index <= 8) {
                        $(this).show()
                    } else {
                        $(this).hide()
                    }
                }

            })
            if ($('[data-tags]').length > 9) {
                $("#loady").fadeIn("slow");
            } else {
                $("#loady").fadeOut("slow");
            }

        }

    });
    function filter(filterValueArray) {
        console.log("filterValueArray", filterValueArray);
        var isActiveCategory = false;
        $('[data-tags]').each(function () {
            var tags = $(this).attr('data-tags');
            var tofilter = tags.split(',');
            let checker = (arr, target) => target.every(v => arr.includes(v));
            console.log("checker", checker(tofilter, filterValueArray))
            $('[category-filter]').each(function () {
                if ($(this).hasClass("is-active")) {
                    isActiveCategory = true
                }
            })
            if (isActiveCategory) {
                if (checker(tofilter, filterValueArray) && $(this).hasClass("selected")) {
                    $(this).show()
                    $(this).addClass("show");
                } else {
                    $(this).hide()
                }
            } else {
                if (checker(tofilter, filterValueArray)) {
                    $(this).show()
                    $(this).addClass("show");
                } else {
                    $(this).hide()
                }
            }
        })
    }
    function unfilter(filterValue, filterValueArray) {
        console.log("filterValueArray unfilter", filterValueArray);
        $('[data-tags]').each(function () {
            var tags = $(this).attr('data-tags');
            var tofilter = tags.split(',');
            if (tofilter.some((val) => filterValueArray.indexOf(val) !== -1)) {

            } else {
                $(this).hide()
                $(this).removeClass("show");
            }
        })
    }

};
function categorySelection() {
    $('[category-filter]:not(input)').click(function () {
        console.log("clickedsss");

        var CategoryValue = $(this).attr('category-filter').trim();
        var isActiveCheck = false;
        if ($(this).hasClass("is-active")) {
            isActiveCheck = true;
        }
        console.log("CategoryValue", CategoryValue);
        $('[category-filter]').each(function () {
            $(this).removeClass("is-active")
        })
        $('[data-filter]').each(function () {
            $(this).removeClass("is-active")
        })
        $('[data-tags]').each(function () {
            $(this).removeClass("selected")
            $(this).removeClass("show")
        })
        console.log("filterValueArray", filterValueArray)
        filterValueArray = []
        if (isActiveCheck) {
            console.log("yes")
            $(this).removeClass("is-active")
        } else {
            console.log("no")
            $(this).addClass("is-active")
        }

        categoryFilter(CategoryValue, isActiveCheck)
    })
    function categoryFilter(CategoryValue, isActiveCheck) {
        $('[data-category]').each(function (index) {
            var category = $(this).attr('data-category');
            if (category == CategoryValue) {
                $(this).show()
                $(this).addClass("selected");
            } else {
                $(this).hide()
            }
            if (isActiveCheck) {
                if (index <= 8) {
                    $(this).show()
                    $(this).removeClass("selected");
                } else {
                    $(this).hide()
                }

            }
        })
    }
}