Aquarius.component.define('Frontend/Allergen', function ($element, options) {

    var defaults = {};

    function Allergen() {
    }

    Allergen.prototype = {
        init: function () {
            var self = this;

            this.$element = $element;
            this.allergenek = [];
            this.defaults = defaults;
            this.options = Aquarius.extend(this.defaults, options);

            this.events();
        },
        events: function () {
            const self = this;

            this.$element.find('.openFilters').on('click', function () {
                self.$element.find('.filters').addClass('filters--opened');
            });

            this.$element.find('.filters__close').on('click', function () {
                self.$element.find('.filters').removeClass('filters--opened');
            });

            this.$element.find('.smallinfo').off('click').on('click', function () {
                if (!$(this).hasClass('active')) {
                    self.filterArray($(this).attr('data-allergen'));
                    $(this).addClass('active');
                } else {
                    self.filterArray($(this).attr('data-allergen'));
                    $(this).removeClass('active');
                }

            });
        },
        filterArray: function (type) {
            const self = this;
            /**
             * tömb
             */
            if (this.allergenek.indexOf(type) > -1) {
                this.allergenek = this.allergenek.filter(function (item) {
                    return item !== type;
                })
            } else {
                this.allergenek.push(type);
            }
            /**
             * szűrés
             */
            this.filter();
        },
        filter: function () {
            const self = this;
            let filtered = [];
            $('.product-box').removeClass('d-none');
            /**
             * szűrés
             */
            for (let item of this.allergenek) {
                for (var elem of document.querySelectorAll('[data-filter]')) {
                    if (elem.dataset.filter.indexOf(item) > -1) {
                        elem.classList.add('d-none');
                    }
                }
            }
        }
    };

    return Allergen;
});