// FilterBar.tsx
import { h, Host } from "@stencil/core";
export class FilterBar {
    constructor() {
        this.selectedOptions = [];
        this.showAllFilters = false;
        this.maxShownFilters = 4; // Default to 4, can be overridden by parent component
        this.showMoreFiltersButton = true;
        this.handleMoreFiltersClick = () => {
            this.showAllFilters = true;
            this.updateVisibleSlots(); // Recalculate visible slots based on the new state
        };
        this.handleResetEvent = () => {
            var _a;
            const filterSearchSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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);
        };
        this.handleSearchChange = (event) => {
            this.handleTopbarFilterChange(event);
        };
        this.handleFilterSelect = (event) => {
            this.handleTopbarFilterChange(event);
        };
        this.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);
        };
    }
    /* 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);
    }
    componentWillUnload() {
        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;
    }
    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: '91806ec3053192b0d29e8af30ac276b496e19c8d' }, h("div", { key: 'b1a6fe7e875962fab99b329778ea2b45688b4368', class: "search-container" }, h("slot", { key: 'b17e991036999fe827f37ca6716db836c187c9bb', name: "filter-search" }), " "), h("div", { key: 'dc14e0b6f02f0bab27dc8548b8f7066d190be8c5', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '9a34b9077612476b7e8ca45e56e65b78d877cbec', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '5350c02d1c7ddd2c53cfb38d6f3f01afce04b7bb', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '4767e5dec3f4fcd6927b5fbafadc1db12695fc39', 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",
                "attribute": "max-shown-filters",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "4"
            },
            "showMoreFiltersButton": {
                "type": "boolean",
                "attribute": "show-more-filters-button",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "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
