jQuery(document).ready(checkContainer);

function checkContainer() {
    if ($('[data-filter]:not(input)').is(':visible')) {
        filtering();
    } else {
        setTimeout(checkContainer, 1000);
    }
}
function filtering() {
    console.log("yes")
    console.log("checking length", $('[data-filter]:not(input)').length)
    console.log("checking length c tag", $('.c-tag li').length)
    var filterValueArray = []
    $('[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")) {
            console.log("not 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 () {
                        $(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 = []
            $('[data-tags]').each(function (index) {
                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);
        $('[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))
            if (checker(tofilter, filterValueArray)) {
                $(this).show()
                $(this).addClass("show");
            } else {
                $(this).hide()
            }
            // for (let [key, value] of Object.entries(filterValueArray)) {
            //     var tags = $(this).attr('data-tags');
            //     var tofilter = tags.split(',');
            //     if (tofilter.includes(value)) {
            //         $(this).show()
            //         $(this).addClass("show");
            //     } else {
            //         if ($(this).hasClass('show')) {
            //             $(this).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");
            }
        })
    }

};