// FilterBar.tsx
import { Host, h, } from "@stencil/core";
export class FilterBar {
    el;
    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) => (h("div", { class: "filter-slot-wrapper" }, h("slot", { name: `filter-component-${i + 1}` }))));
        return (h(Host, { key: '60f59cd921c6b9ef7e2c0940d9af4a831db25e3f' }, h("div", { key: '180858e8ca59a4b59fc82e94da8469413af81d07', class: "search-container" }, h("slot", { key: '0faf70261e9626dd292125b0c0ecde676f5a80c8', name: "filter-search" }), " "), h("div", { key: 'f257b7a6704b44b580357e7d552a2d3c8f9d033c', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'ca9fbecb493ab564c4c0f807769869d80a0edd6c', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '82945c7339ded3d56de43e32ad96ea65785a0bff', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '06e16472e9093226f95ccae72566251e6b1d252d', icon: "filter-16" }), "More filters"))))));
    }
    static get is() { return "ifx-filter-bar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["filter-bar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["filter-bar.css"]
        };
    }
    static get properties() {
        return {
            "maxShownFilters": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-shown-filters",
                "defaultValue": "4"
            },
            "showMoreFiltersButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-more-filters-button",
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "selectedOptions": {},
            "showAllFilters": {},
            "visibleSlots": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxTopbarFilterChange",
                "name": "ifxTopbarFilterChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=filter-bar.js.map
