export default (function (){


    const defaults = {
        selectors: {
            panel: '.filterPanel',
            filter: '.filterPanel-filter',
            search: '.filterPanel-search',
            placeholder: '[data-filter-placeholder]',
            status: '.filterPanel-status',
            sorting: '.filterPanel-sorting',
        },
        keySeparator: '\|',
        splitPattern: /\| ?/,
    };

    function init(options) {

        options = options || {};

        const filterPanels = document.querySelectorAll(defaults.selectors.panel);

        filterPanels.forEach((filterPanel) => {

            const settings = Object.assign({}, defaults, options);

            settings.isCascading = filterPanel.querySelector('[data-cascading="true"]') !== null;

            if (typeof filterPanel.dataset.target === "string" && filterPanel.dataset.target !== "") {
                new FilterPanel(filterPanel, settings);
            } else if (settings.isCascading) {
                new CascadingFilters(filterPanel, null, settings);
            }

        });

    }

    /************************/
    /***** Filter Panel *****/
    /************************/

    const FilterPanel = function(container, options) {

        this.settings = Object.assign({}, options);

        this.container = container;

        this.selector = "#" + this.container.dataset.target;

        this.settings.isCascading = this.container.querySelector('[data-cascading="true"]') !== null;

        // Target

        if (typeof this.container.dataset.target !== "string" || this.container.dataset.target === "") {
            return;
        }

        this.target = document.querySelector(this.selector);

        if (! this.target) {
            console.warn(`filterPanel: No target match selector "${this.selector}"`);
            return false;
        }

        // Placeholder

        this.placeholder = this.target.querySelector(this.settings.selectors.placeholder);

        // Filters

        this.filters = {};
        this.currentFilters = {};

        const filters = this.container.querySelectorAll("[data-filter-id]");

        filters.forEach((filter) => {

            const filterId = getFilterId(filter);

            this.filters[filterId] = new Filter(filter, filterId, this);

        });

        this.items = this.getItems();

        // Sorting

        this.sorters = [];

        const sorters = document.querySelectorAll(`[data-target='${this.container.dataset.target}'] ${this.settings.selectors.sorting}`);

        sorters.forEach((sorter) => {

            const select = sorter.querySelector("select");

            if (! select) {
                return;
            }

            if (typeof this.defaultSortingString === "undefined" && select.value) {
                this.defaultSortingString = select.value;
            }

            select.addEventListener(
                "change",
                (e) => {
                    e.preventDefault();
                    this.sort(e.target.value);
                }
            );

            let values = [];

            select.querySelectorAll("option").forEach(option => {

                if (option.value && option.value !== "") {
                    values.push(option.value);
                }

            });

            this.sorters.push({
                select: select,
                values: values,
            });

        });

        // Cascading

        if (this.settings.isCascading) {
            this.cascadingFilters = new CascadingFilters(this.container, this, this.settings);
        }

        // Live filter

        this.currentLiveFilter;
        this.liveFilter = new LiveFilter(this.container, this, this.settings);

        // Statuses

        this.messages = {};

        const template = this.container.querySelector("template[data-filter-messages]");

        if (template) {

            const messages = template.content.querySelectorAll("[data-count]");

            messages.forEach((message) => {
                const type = message.dataset.count;
                this.messages[type] = message;
            });

        }


        this.status = new Status(this);

        // To prevent resetting the formerly set status,
        //   only set the statuses if filters are part of the element

        if (filters.length !== 0 || this.liveFilter.input !== null) {

            let count = "default";

            if (this.items.length === 0) {
                count = 0;
            }

            this.status.update(count);

        }

        // Show hidden items

        this.target.removeAttribute("filterpanel-cloak");

        this.setFilters();
        this.setSorting();

        this.isInitialized = true;

    }

    FilterPanel.prototype.filter = function(filter, value) {

        this.liveFilter.reset();

        this.currentFilters[filter.filterId] = value;

        if (this.settings.isCascading && typeof filter.index === "number") {

            const currentIndex = filter.index;

            Object.keys(this.currentFilters).forEach((filterId, index) => {
                const filter = this.filters[filterId];

                if (filter.index > currentIndex) {
                    this.currentFilters[filter.filterId] = "";
                }

            });

        }

        let count = 0;

        this.items.forEach((item) => {

            let isFilteredOut = false;

            for (let [key, value] of Object.entries(this.currentFilters)) {

                const values = this.getItemValues(item, key);

                values.forEach((value, index) => {
                    values[index] = value.toLowerCase();
                });

                value = value.toLowerCase();

                isFilteredOut = isFilteredOut || (value !== "") && ! values.includes(value);

            }

            item.dataset.filteredOut = isFilteredOut;

            if (! isFilteredOut) {
                count++;
            }

        });

        if (count !== 0 && count === this.items.length) {
            count = "default";
        }

        this.status.update(count);
        this.updateFilters();
        this.updateURL();
        this.scrollIntoView();

        return count;

    }

    FilterPanel.prototype.sort = function(sortString) {

        let useDefaultSorting = (typeof sortString !== "string" || sortString === this.defaultSortingString);

        if (useDefaultSorting) {
            sortString = this.defaultSortingString;
        }

        const items = Array.from(this.items);

        if (items.length === 0) {
            return;
        }

        items.sort(this.getSortFunction(sortString));

        const parentNode = items[0].parentNode;

        items.forEach((item) => {
            parentNode.appendChild(item)
        });

        this.currentSorting = sortString;

        this.synchroniseSorter(sortString);
        this.updateURL();

    }

    FilterPanel.prototype.synchroniseSorter = function(value) {

        this.sorters.forEach((sorter) => {
            sorter.select.value = value;
        });

    }

    FilterPanel.prototype.setSorting = function(value) {

        if (! window.location.search) {
            return;
        }

        if (typeof this.sorters !== "object" || this.sorters.length === 0) {
            return;
        }

        const sorter = this.sorters[0];

        const queryString = window.location.search.replace(/^\?/, ""),
              params = new URLSearchParams(queryString);

        if (! params.get("sorting")) {
            this.sort();
            return;
        }

        const sortString = params.get("sorting");

        // Check if search string is an option of select

        const isValid = sorter.values.some(value => value === sortString);

        if (! isValid) {
            console.warn(`filterPanel: Sorting is ignored because sorting string "${sortString}" is not found an option of select.`);
            return;
        }

        this.sort(sortString);

    }

    FilterPanel.prototype.getSortFunction = function(sortString) {

        let sortFunction = () => {
            return true;
        };

        let direction = 1;

        if (typeof sortString === "string" && sortString.match(/^(ASC|DESC) /)) {

            let matches = sortString.match(/^(ASC|DESC) (.*)$/);

            direction = (matches[1] !== "DESC") ? direction : -1 * direction;

            sortString = matches[2];

        }

        if (typeof sortString !== "string" || sortString === "") {

            sortFunction = (a, b) => {

                const items = [
                    {
                        value: a.innerText,
                        isPreferred: typeof a.dataset.preferred === "string" && a.dataset.preferred !== "false",
                    },
                    {
                        value: b.innerText,
                        isPreferred: typeof b.dataset.preferred === "string" && b.dataset.preferred !== "false",
                    }
                ];

                return this.compareItems(items, direction);

            };

        } else if (sortString.match(/^\[data-([^\]=]+)\]$/)) {

            const matches = sortString.match(/^\[data-([^\]=]+)\]$/),
                  name = matches[1];

            sortFunction = (a, b) => {

                const items = [
                    {
                        value: a.dataset[name],
                        isPreferred: typeof a.dataset.preferred === "string" && a.dataset.preferred !== "false",
                    },
                    {
                        value: b.dataset[name],
                        isPreferred: typeof b.dataset.preferred === "string" && b.dataset.preferred !== "false",
                    }
                ];

                return this.compareItems(items, direction);

            };

        } else {

            sortFunction = (a, b) => {

                const childOfA = a.querySelector(sortString),
                      childOfB = b.querySelector(sortString);

                if (! childOfA || ! childOfB) {
                    return true;
                }

                const items = [
                    {
                        value: childOfA.innerText,
                        isPreferred: typeof a.dataset.preferred === "string" && a.dataset.preferred !== "false",
                    },
                    {
                        value: childOfB.innerText,
                        isPreferred: typeof b.dataset.preferred === "string" && b.dataset.preferred !== "false",
                    }
                ];

                return this.compareItems(items, direction);

            };

        }

        return sortFunction;

    }

    FilterPanel.prototype.compareItems = function (items, direction) {

        if (typeof direction !== "number") {
            direction = 1;
        }

        // Check if value is string with boolean value or undefined.
        //   If so, sort empty strings before undefined values

        items.forEach((item) => {

            if (typeof item.value === "undefined") {
                item.value = "0";
            } else if (typeof item.value === "string" && ["true", "false"].includes(item.value)) {
                item.value = (item.value === "true") ? (-1 * direction) + "" : direction + "";
            }

        });

        let comparison = items[0].value.localeCompare(items[1].value);

        // If items have same value, sort preferred before others

        if (comparison === 0) {

            if (items[0].isPreferred) {
                comparison = -1 * direction;
            } else if (items[1].isPreferred) {
                comparison = direction;
            }

        }

        return direction * comparison;

    }

    FilterPanel.prototype.getItems = function() {

        if (this.target.querySelectorAll('[data-item]')) {
            return this.target.querySelectorAll('[data-item]');
        }

        // Support of legacy method using data attributes with filter names
        //   Attention: Does not work with groups

        let selectors = [];

        if (Object.keys(this.filters).length === 0) {
            return {};
        }

        for (let key of Object.keys(this.filters)) {
            selectors.push(`[data-filter-${key}]`);
        }

        return this.target.querySelectorAll(selectors.join());

    }

    FilterPanel.prototype.countItems = function(currentFilters) {

        const items = this.items;

        if (typeof currentFilters !== "object" || Object.keys(currentFilters).length === 0) {
            return items.length;
        }

        let count = 0;

        items.forEach((item) => {

            let isFilteredOut = false;

            for (let [key, value] of Object.entries(currentFilters)) {

                const values = this.getItemValues(item, key);

                isFilteredOut = isFilteredOut || (value !== "") && ! values.includes(value);

            }

            if (! isFilteredOut) {
                count++;
            }

        });

        return count;

    }

    FilterPanel.prototype.getItemValues = function(item, keys) {

        let values = [];

        keys.split(/\+/).forEach((name) => {

            const datasetName = camelCase(`filter-${name}`);

            if (! item.dataset[datasetName]) {
                return;
            }

            const data = item.dataset[datasetName].split(this.settings.splitPattern);

            values = values.concat(data);

        });

        return values;

    }

    FilterPanel.prototype.updateFilters = function() {

        // Deactivate updateFilters because it returns unexpected results
        return;

        Object.keys(this.filters).forEach((key) => {
            this.filters[key].update();
        });

    }

    FilterPanel.prototype.updateFilter = function(key) {

        if (typeof this.filters !== "object") {
            return;
        }

        const keys = Object.keys(this.filters);

        if (! keys.includes(key)) {
            return;
        }

        this.filters[key].update({
            removeFiltered: true,
        });

    }

    FilterPanel.prototype.resetFilters = function() {

        Object.keys(this.filters).forEach((key) => {
            this.filters[key].reset();
        });

        if (this.cascadingFilters) {
            this.cascadingFilters.resetFilters();
        }

    }

    FilterPanel.prototype.setFilters = function() {
        /*
         * FIXME: If filters has option groups, filtering only works if last filter has options.
         */

        if (! window.location.search) {
            return;
        }

        let values = {},
            isLiveFilter = false,
            queryString = window.location.search.replace(/^\?/, "");

        const filterIds = Object.keys(this.filters);

        queryString.split(/&/).forEach(entry => {

            let [key, value] = entry.split(/=/);

            value = decodeURIComponent(value);

            if (key === "search") {

                values = {
                    "search": value,
                };

                isLiveFilter = true;

                return;

            }

            const filterId = filterIds.find(filterId => {
                return filterId.split(/\+/).includes(key);
            });

            if (filterId) {
                values[filterId] = decodeURIComponent(value);
            }

        });

        if (Object.keys(values).length === 0) {
            return;
        }

        if (isLiveFilter && this.liveFilter) {
            this.liveFilter.filter(values["search"]);
            return;
        }

        // Sort values by filters

        let sortedValues = {};

        Object.keys(this.filters).forEach((key) => {

            let value = "";

            if (typeof values[key] === "string") {
                value = values[key];
            }

            sortedValues[key] = value;

        });

        let anchestorValue = null,
            currentFilters = {};

        Object.keys(sortedValues).forEach((key, index) => {

            if (this.settings.isCascading && (anchestorValue === "")) {
                console.warn(`filterPanel: Can’t set cascading filters, because the ancestor of the filter with key "${key}" is not set.`);
                return
            } else {
                anchestorValue = "";
            }

            let isValid = false,
                filterItems = false;

            currentFilters[key] = sortedValues[key];

            if (! this.settings.isCascading) {

                let currentFilter = {};
                currentFilter[key] = sortedValues[key];

                isValid = (this.countItems(currentFilter) !== 0);

            } else {

                isValid = (this.countItems(currentFilters) !== 0);

            }

            if (isValid) {

                const value = sortedValues[key];

                anchestorValue = value;

                this.filter(this.filters[key], value);

                if (this.filters[key].input.select) {

                    this.filters[key].input.update(value);

                } else if (this.filters[key].input.combobox && value !== "") {

                    const combobox = this.filters[key].input.combobox;

                    if (combobox.querySelector(`[data-value="${value}"]`)) {

                        const event = new CustomEvent('combobox:update', {
                            detail: {
                                value: value,
                            },
                        });

                        combobox.dispatchEvent(event);

                    }

                }

                if (this.settings.isCascading) {
                    this.cascadingFilters.updateFilters(index);
                }

            }

        });

    }

    FilterPanel.prototype.updateURL = function() {

        if (typeof this.currentFilters !== "object" || Object.keys(this.currentFilters).length === 0) {
            this.currentFilters = {};
        }

        let parameters = {};

        if (window.location.search) {

            let queryString = window.location.search.replace(/^\?/, "");

            queryString.split(/&/).forEach(entry => {

                const [key, value] = entry.split(/=/);
                parameters[key] = value;

            });

        }

        function setParameter(key, value) {

            if (typeof value === "string" && value !== "") {
                parameters[key] = value;
            } else if (parameters[key]) {
                delete parameters[key];
            }

        }

        if (typeof this.currentFilters === "object" || Object.keys(this.currentFilters).length !== 0) {

            for (let [key, value] of Object.entries(this.currentFilters)) {

                // If key is option group, only pass the parameter witch have items

                if (key.includes("+")) {

                    let valueAlreadyFound = false;

                    key.split(/\+/).forEach((filterId) => {

                        setParameter(filterId);

                        let currentFilter = {};
                            currentFilter[filterId] = value;

                        let isValid = value !== "" && (this.countItems(currentFilter) !== 0);

                        if (! isValid) {
                            return;
                        }

                        if (valueAlreadyFound) {
                            console.warn(`filterPanel: Value "${value}" of Option Group "${key}" is ambiguous.`);
                            return;
                        }

                        valueAlreadyFound = true;
                        setParameter(filterId, value);

                    });

                } else {

                    const isValid = (value !== "");

                    if (! isValid) {
                        value = "";
                    }

                    setParameter(key, value);

                }

            }

        }

        // Live filter

        if (typeof this.currentLiveFilter === "string") {
            setParameter("search", this.currentLiveFilter);
        }

        // Sorting

        if (typeof this.currentSorting === "string") {

            if (this.currentSorting !== "" && this.currentSorting !== this.defaultSortingString) {
                setParameter("sorting", this.currentSorting);
            } else {
                setParameter("sorting");
            }

        }

        let url = window.location.origin + window.location.pathname;

        if (Object.keys(parameters).length !== 0) {

            let queryString = [];

            Object.keys(parameters).forEach(key => {
                queryString.push(`${key}=${parameters[key]}`);
            });

            url += "?" + queryString.join("&");

        }

        history.replaceState(null, "", url);

    }

    FilterPanel.prototype.scrollIntoView = function() {

        if (! this.isInitialized) {
            return;
        }

        this.container.scrollIntoView();

    }

    /******************/
    /***** Filter *****/
    /******************/

    const Filter = function(container, filterId, parent) {

        this.container = container;
        this.parent = parent;
        this.root = parent;

        this.settings = this.parent.settings;

        this.filterId = filterId;

        this.datasetNames = this.filterId.split(/\+/);

        // Items

        let selectors = [];

        this.datasetNames.forEach((id) => {
            selectors.push(`[data-filter-${id}]`);
        });

        this.items = this.parent.target.querySelectorAll(selectors.join(","));

        // Input

        this.input = new Input(this.container);

        if (! this.input) {
            this.update = function() {};
            return;
        }

        // Index for cascading filters

        if (this.settings.isCascading) {
            this.index = Object.keys(this.parent.filters).length;
        }

        // Init

        if (this.items.length === 0) {
            this.input.disable();
            this.update = function() {};
            return;
        }

        // Options

        this.options = [];

        this.update();
        this.setDisabledOptions();

        // Events

        if (this.input.combobox) {

            this.input.combobox.addEventListener('combobox:update', (event) => {

                if (typeof event.detail.value !== "string" || typeof event.detail.element !== "object") {
                    return;
                }

                const element = event.detail.element,
                      filter = element.closest(`${this.settings.selectors.filter}[data-filter-id]`);

                if (typeof filter !== "object" || getFilterId(filter) !== this.filterId) {
                    return;
                }

                this.root.filter(this, event.detail.value);

            }, false);

        }

        if (this.input.select) {

            this.input.select.addEventListener(
                "change",
                (event) => {
                    this.root.filter(this, this.input.select.value);
                }
            );

        }

    }

    Filter.prototype.update = function(settings) {

        settings = settings || {};

        const removeFiltered = settings.removeFiltered || false;

        if (this.datasetNames.length  > 1) {

            if (this.input.select) {
                this.options = Array.from(this.input.select.querySelectorAll("option"));
            }

            this.datasetNames.forEach((id) => {

                const items = this.parent.target.querySelectorAll(`[data-filter-${id}]`);

                let label = this.container.getAttribute(`data-label-${id}`);

                if (typeof label !== "string" || label === "") {
                    label = capitalize(id);
                }

                if (this.input.select) {

                    let optionGroup = this.input.select.querySelector(`optgroup[label="${label}"]`);

                    if (! optionGroup) {

                        optionGroup = document.createElement("optgroup");
                        optionGroup.label = label;

                        this.input.select.appendChild(optionGroup);

                    }

                    const options = this.updateOptions({
                        element: optionGroup,
                        items: items,
                        filterId: id,
                        removeFiltered: removeFiltered,
                    });

                    this.options = this.options.concat(options);

                } else if (this.input.combobox) {

                    this.options = this.updateOptions({
                        element: this.input.container,
                        items: items,
                        filterId: this.filterId,
                        removeFiltered: removeFiltered,
                    });

                }

            });

        } else {

            let selectors = [];

            this.datasetNames.forEach((id) => {
                selectors.push(`[data-filter-${id}]`);
            });

            const items = this.parent.target.querySelectorAll(selectors.join(","));

            this.options = this.updateOptions({
                element: this.input.container,
                items: items,
                filterId: this.filterId,
                removeFiltered: removeFiltered,
            });

        }

    }

    Filter.prototype.updateOptions = function(settings) {

        settings = settings || {};

        const element = settings.element,
              items = settings.items,
              filterId = settings.filterId;

        const removeFiltered = (typeof settings.removeFiltered === "boolean" && settings.removeFiltered);

        let values = [];

        items.forEach((item) => {

            if (removeFiltered && item.dataset.filteredOut === "true") {
                return;
            }

            const itemValues = this.parent.getItemValues(item, filterId);

            itemValues.forEach((value) => {

                if (! values.includes(value)) {
                    values.push(value);
                }

            });

        });

        values = values.sort();

        const options = [];

        if (this.input.select) {

            element.querySelectorAll("option").forEach((option) => {

                if (! option.value) {
                    return;
                }

                if (removeFiltered && ! values.includes(option.value) ) {
                    element.removeChild(option);
                    return;
                }

                options.push(option);

            });

            values.forEach((value) => {

                if (element.querySelector(`option[value="${value}"]`)) {
                    return;
                }

                const option = document.createElement("option");

                option.value = value;
                option.innerHTML = value;

                options.push(option);
                element.appendChild(option);

            });

        } else if (this.input.combobox) {

            // To keep things simple, no new entries are added to the combo box. Instead, existing entries are activated or deactivated depending on the search results.

            element.querySelectorAll(".combobox-item").forEach((option) => {

                if (! option.hasAttribute("data-value")) {
                    return;
                }

                const value = option.getAttribute("data-value");

                if (value !== "" && ! values.includes(value)) {
                    option.setAttribute("aria-disabled", true);
                    return;
                }

                option.removeAttribute("aria-disabled");
                options.push(option);

            });

        }

        return options;

    }

    Filter.prototype.setDisabledOptions = function() {

        this.options.forEach((option) => {

            if (typeof option.value === "string" && option.value === "") {
                return;
            }

            let selectors = [];

            this.datasetNames.forEach((name) => {

                selectors = selectors.concat([
                    `[data-filter-${name}="${option.value}"]`,     // Is
                    `[data-filter-${name}^="${option.value},"]`,   // Starts with
                    `[data-filter-${name}$=", ${option.value}"]`,  // Ends with
                    `[data-filter-${name}$=",${option.value}"]`,   //
                    `[data-filter-${name}*=", ${option.value},"]`, // Contains
                    `[data-filter-${name}*=",${option.value},"]`,  //
                ]);

            });

            const items = this.parent.target.querySelectorAll(selectors.join(","));

            const matches = Array.from(items).filter((item) => {
                return item.dataset.filteredOut !== "true";
            });

            option.disabled = (matches.length === 0);

        });

    }

    Filter.prototype.reset = function() {
        this.input.reset();
    }

    /***********************/
    /***** Live Filter *****/
    /***********************/

    const LiveFilter = function(container, parent, options) {

        this.settings = Object.assign({}, options);

        this.input =  container.querySelector(`${this.settings.selectors.search} input[type="text"]`)

        if (! this.input) {
            return;
        }

        this.container = container;
        this.parent = parent || {};

        const items = this.parent.items;

        if (items.length === 0) {
            this.input.disabled = true;
            return;
        }

        this.items = [];

        items.forEach((item) => {

            let keywords = [];

            if (typeof item.dataset.keywords === "string") {
                keywords = item.dataset.keywords.toLowerCase().split(this.settings.splitPattern);
            }

            this.items.push({
                container: item,
                keywords: keywords,
            })

        });

        this.input.addEventListener(
            "input",
            (e) => {
                this.filter(e.target.value);
                e.preventDefault();
            }
        );

    }

    LiveFilter.prototype.filter = function(searchString) {

        if (typeof this.parent === "undefined") {
            return;
        }

        this.parent.resetFilters();

        if (typeof searchString !== "string") {
            searchString = "";
        }

        const items = this.parent.items;

        let count = 0;

        function stringContainAllItems(string, items) {

            return items.every(item => {
                const regex = new RegExp(`^${item.toLowerCase()}| ${item.toLowerCase()}`);
                return regex.test(string);
            });

        }

        items.forEach((item) => {

            if (searchString === "") {
                item.dataset.filteredOut = false;
                return;
            }

            if (typeof item.dataset.keywords !== "string" || item.dataset.keywords === "") {
                item.dataset.filteredOut = true;
                return;
            }

            const searchStrings = searchString.split(' ');

            // Replace special characters with spaces
            const keywords = item.dataset.keywords.toLowerCase().replace(/[.,;\/\-] ?/g, " ");

            const isFilteredOut = ! stringContainAllItems(keywords, searchStrings);

            item.dataset.filteredOut = isFilteredOut;

            if (! isFilteredOut) {
                count++;
            }

        });

        this.parent.currentLiveFilter = searchString;
        this.input.value = searchString;

        if (searchString === "" && items.length !== 0) {
            count = "default";
        }

        this.parent.status.update(count);
        this.parent.updateURL();
        this.parent.scrollIntoView();

    }

    LiveFilter.prototype.reset = function() {

        if (! this.input) {
            return;
        }

        this.input.value = "";

    }

    /******************/
    /***** Status *****/
    /******************/

    const Status = function(parent) {

        this.parent = parent;
        this.messages = this.parent.messages;

        this.statuses = document.querySelectorAll(`[data-target='${parent.container.dataset.target}'] ${parent.settings.selectors.status}`);

        if (! this.statuses) {
            this.update = function(){};
            return;
        }

    }

    Status.prototype.update = function(type) {

        this.statuses.forEach((status) => {
            status.innerHTML = "";
        });

        let count;

        if (typeof type === "number") {

            count = type;

            if (count === 0) type = "zero"
            else if (count === 1) type = "one"
            else type = "other";

        }

        if (typeof type !== "string" || this.messages[type] === "") {
            return;
        }

        if (typeof this.messages[type] === "undefined") {
            console.warn(`filterPanel: Message type "${type}" is not defined!`);
            return;
        }

        if (this.parent.placeholder) {
            this.parent.placeholder.dataset.visible = (type === "zero");
        }

        this.statuses.forEach((status) => {

            let message = this.messages[type].cloneNode(true);

            message.innerHTML = message.innerHTML.replace(/\{\{count\}\}/, count);

            status.appendChild(message);

        });

    }

    /*****************************/
    /***** Cascading Filters *****/
    /*****************************/

    const CascadingFilters = function(container, parent, options) {

        const settings = {
            disabledMarker: "–",
        };

        this.settings = Object.assign({}, settings, options);

        this.container = container;
        this.parent = parent || {};

        const filters = this.container.querySelectorAll(defaults.selectors.filter);

        if (! filters) {
            return;
        }

        this.filters = {};

        filters.forEach((filter, index) => {

            let label;

            if (filter.querySelector('label')) {

                const element = filter.querySelector('label');

                label = {
                    container: element,
                    content: element.innerHTML,
                };

            }

            // Input

            const input = new Input(filter);

            if (! input) {
                return;
            }

            input.disable(index !== 0);

            // Filter ID

            let filterId = getFilterId(filter);

            // Event listener

            if (input.combobox) {

                input.combobox.addEventListener('combobox:update', (event) => {

                    if (typeof event.detail.value !== "string" || typeof event.detail.element !== "object") {
                        return;
                    }

                    this.updateFilters(index);

                }, false);

            }

            input.container.addEventListener(
                "change",
                (e) => {
                    e.preventDefault();
                    this.updateFilters(index);
                }
            );

            // Add filter

            this.filters[filterId] = {
                container: filter,
                label: label,
                input: input,
                select: input.select,
                combobox: input.combobox,
            };

        });

        this.updateFilters(-1);

    }

    CascadingFilters.prototype.updateFilters = function(baseIndex) {

        let ancestor;

        Object.keys(this.filters).forEach((key, index) => {

            const filter = this.filters[key];

            let isDisabled = (index > baseIndex + 1);

            if (ancestor) {
                isDisabled = (ancestor.input.getValue() === "");
            }

            if (typeof this.parent.items === "object" && this.parent.items.length === 0) {
                isDisabled = true;
            }

            if (index !== 0) {
                filter.container.dataset.disabled = isDisabled;
            }

            filter.input.disable(isDisabled);

            if (typeof filter.label === "object") {
                filter.label.container.innerHTML = isDisabled && index !== 0 ? " " : filter.label.content;
            }

            if (typeof filter.input.placeholder === "object") {

                const placeholder = (isDisabled ? this.settings.disabledMarker : filter.input.placeholder.content);
                filter.input.setPlaceholder(placeholder);

            }

            if (index > baseIndex) {
                filter.input.update("");
            }

            if (typeof this.parent === "object" && typeof this.parent.updateFilter === "function" && index === baseIndex + 1) {
                this.parent.updateFilter(key);
            }

            ancestor = filter;

        });

    }

    CascadingFilters.prototype.resetFilters = function() {
        this.updateFilters(0);
    }

    /*****************/
    /***** Input *****/
    /*****************/

    const Input = function(parent) {

        this.select = parent.querySelector("select"),
        this.combobox = parent.querySelector(".combobox");

        if (! this.select && ! this.combobox) {
            return;
        }

        this.container = this.select || this.combobox;

        this.placeholder = this.getPlaceholder();

    }

    Input.prototype.disable = function(disable) {

        if (typeof disable !== "boolean") {
            disable = true;
        }

        if (this.select) {

            this.select.disabled = disable;

        } else if (this.combobox) {

            const event = new CustomEvent('combobox:disable', {
                detail: {
                    disable: disable,
                }
            });

            this.combobox.dispatchEvent(event);

        }

    }

    Input.prototype.reset = function() {

        if (this.select) {

            this.select.value = "";

        } else if (this.combobox) {

            const event = new CustomEvent('combobox:update', {
                detail: {
                    value: "",
                },
            });

            this.combobox.dispatchEvent(event);

        }

    }

    Input.prototype.update = function(value) {

        if (this.select) {

            this.select.value = value;

        } else if (this.combobox) {

            const event = new CustomEvent('combobox:update', {
                detail: {
                    value: value,
                },
            });

            this.combobox.dispatchEvent(event);

        }

    }

    Input.prototype.getPlaceholder = function() {

        let placeholder;

        const entry = this.container.querySelector('[value=""], [data-value=""]');

        if (! entry) {
            return placeholder;
        }

        if (entry.dataset.label) {
            // Is combobox

            placeholder = {
                container: entry,
                content: entry.dataset.label,
            }

            this.setPlaceholder(placeholder.content);

        } else if (entry.innerHTML) {
            // Is select

            placeholder = {
                container: entry,
                content: entry.innerHTML,
            }

        }

        return placeholder;

    }

    Input.prototype.getValue = function() {

        let value = "";

        if (this.select) {

            value =  this.select.value;

        } else if (this.combobox) {

            const input = this.combobox.querySelector("input");

            if (input && input.value) {
                value =  input.value;
            }

        }

        return value;

    }

    Input.prototype.setPlaceholder = function(content) {

        if (this.combobox) {

            const comboboxInput = this.combobox.querySelector("input");

            if (comboboxInput) {
                comboboxInput.placeholder = content;
            }

        } else if (this.select) {

            this.placeholder.container.innerHTML = content;

        }

    }

    /*************************/
    /***** Miscellaneous *****/
    /*************************/

    function getFilterId(filter, fallback) {

        fallback = fallback || Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16);

        if (typeof filter !== "object" || typeof filter.dataset !== "object") {
            return fallback;
        }

        if (typeof filter.dataset.filterId === "string" && filter.dataset.filterId !== "") {
            return filter.dataset.filterId.replace(defaults.splitPattern, "+");
        }

        return fallback;

    }

    function camelCase(input) {

        return input.toLowerCase().replace(/-(.)/g, (match, capture) => {
            return capture.toUpperCase();
        });

    }

    function capitalize(input) {

        return input.toLowerCase().replace(/-/, " ").replace(/\b\w/g, (match) => {
            return match.toUpperCase();
        });

    }

    return {
        init: init
    }

})();