'use strict';

var index = require('./index-CpWVsZ_u.js');

const filterBarCss = () => `:host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}`;

const FilterBar = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxTopbarFilterChange = index.createEvent(this, "ifxTopbarFilterChange", 7);
    }
    get el() { return index.getElement(this); }
    selectedOptions = [];
    ifxTopbarFilterChange;
    showAllFilters = false;
    maxShownFilters = 4; // Default to 4, can be overridden by parent component
    visibleSlots;
    showMoreFiltersButton = true;
    /* If the component is ever removed and then reattached to the DOM,
connectedCallback ensures that the event listeners are properly set up again */
    connectedCallback() {
        this.el.addEventListener("ifxFilterSelect", this.handleTopbarFilterChange);
        this.el.addEventListener("ifxFilterSearchChange", this.handleSearchChange);
        window.addEventListener("ifxResetFiltersEvent", this.handleResetEvent);
    }
    disconnectedCallback() {
        this.el.removeEventListener("ifxFilterSelect", this.handleTopbarFilterChange);
        this.el.removeEventListener("ifxFilterSearchChange", this.handleSearchChange);
        window.removeEventListener("ifxResetFiltersEvent", this.handleResetEvent);
    }
    componentWillLoad() {
        this.updateVisibleSlots();
    }
    // Modify updateVisibleSlots to use showAllFilters to determine the number of slots
    updateVisibleSlots() {
        this.visibleSlots = this.showAllFilters
            ? Number.MAX_SAFE_INTEGER
            : this.maxShownFilters;
    }
    handleMoreFiltersClick = () => {
        this.showAllFilters = true;
        this.updateVisibleSlots(); // Recalculate visible slots based on the new state
    };
    handleResetEvent = () => {
        const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name="filter-search"]');
        if (filterSearchSlot instanceof HTMLSlotElement) {
            // Ensure it's treated as HTMLSlotElement
            const filterSearchSlottedElements = filterSearchSlot.assignedElements({
                flatten: true,
            });
            filterSearchSlottedElements.forEach((filterSearchWrapper) => {
                const filterSearch = filterSearchWrapper.querySelector("ifx-filter-search");
                const searchField = filterSearch.shadowRoot.querySelectorAll("ifx-search-field");
                if (searchField.length > 0) {
                    searchField.forEach((searchFieldElement) => {
                        searchFieldElement.value = "";
                    });
                }
            });
        }
        this.selectedOptions = [];
        // Emit the change to inform any parent components that the filters have been reset
        this.ifxTopbarFilterChange.emit(this.selectedOptions);
    };
    handleSearchChange = (event) => {
        this.handleTopbarFilterChange(event);
    };
    handleTopbarFilterChange = (event) => {
        const newSelectedOptions = [...this.selectedOptions];
        if (event.type === "ifxFilterSearchChange") {
            const { filterName, filterValue } = event.detail;
            const existingOptionIndex = newSelectedOptions.findIndex((option) => option.filterName === filterName);
            if (existingOptionIndex !== -1) {
                // If an existing filter is found, update its value
                newSelectedOptions[existingOptionIndex].filterValues = [filterValue];
            }
            else {
                newSelectedOptions.push({
                    filterName: filterName,
                    filterValues: [filterValue],
                    type: "text",
                });
            }
        }
        else if (event.type === "ifxFilterSelect") {
            const { filterName, filterValues, type } = event.detail;
            const existingOptionIndex = newSelectedOptions.findIndex((option) => option.filterName === filterName);
            if (existingOptionIndex !== -1) {
                newSelectedOptions[existingOptionIndex].filterValues = filterValues;
                newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items
            }
            else {
                newSelectedOptions.push({
                    filterName: filterName,
                    filterValues: filterValues,
                    type: type,
                });
            }
        }
        this.selectedOptions = newSelectedOptions;
        this.ifxTopbarFilterChange.emit(this.selectedOptions);
    };
    render() {
        const safeVisibleSlots = Math.max(0, this.visibleSlots);
        const actualNumberOfComponents = this.el.querySelectorAll("ifx-set-filter").length;
        // Calculate slotsToShow safely
        const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
        const slots = Array.from({ length: slotsToShow }, (_, i) => (index.h("div", { class: "filter-slot-wrapper" }, index.h("slot", { name: `filter-component-${i + 1}` }))));
        return (index.h(index.Host, { key: '60f59cd921c6b9ef7e2c0940d9af4a831db25e3f' }, index.h("div", { key: '180858e8ca59a4b59fc82e94da8469413af81d07', class: "search-container" }, index.h("slot", { key: '0faf70261e9626dd292125b0c0ecde676f5a80c8', name: "filter-search" }), " "), index.h("div", { key: 'f257b7a6704b44b580357e7d552a2d3c8f9d033c', class: "components-container" }, slots.length > 0 ? slots : index.h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (index.h("div", { key: 'ca9fbecb493ab564c4c0f807769869d80a0edd6c', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, index.h("ifx-button", { key: '82945c7339ded3d56de43e32ad96ea65785a0bff', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, index.h("ifx-icon", { key: '06e16472e9093226f95ccae72566251e6b1d252d', icon: "filter-16" }), "More filters"))))));
    }
};
FilterBar.style = filterBarCss();

exports.ifx_filter_bar = FilterBar;
//# sourceMappingURL=ifx-filter-bar.entry.cjs.js.map

//# sourceMappingURL=ifx-filter-bar.cjs.entry.js.map