import { h, } from "@stencil/core";
import { getInitiallySelectedItems } from "../utils";
export class FilterAccordion {
    initialized = false;
    el;
    expanded = false;
    /** Max number of items to display before truncating/collapsing the list */
    maxVisibleItems;
    count = 0;
    totalItems = 0;
    /** Identifier/label for the filter group */
    filterGroupName = "";
    /** Emitted when the filter accordion`s state or selection changes */
    ifxFilterAccordionChange;
    componentWillLoad() {
        this.el.addEventListener("ifxListUpdate", this.handleCheckedChange);
    }
    componentDidLoad() {
        if (!this.initialized) {
            const selectedItems = getInitiallySelectedItems(this.el);
            this.count = selectedItems.length;
            this.initialized = true; // Prevent further execution in future calls
        }
    }
    handleCheckedChange = (event) => {
        const selectedItems = event.detail.selectedItems;
        this.count = selectedItems.length;
        this.ifxFilterAccordionChange.emit({
            filterGroupName: this.filterGroupName,
            selectedItems,
        });
    };
    disconnectedCallback() {
        this.el.removeEventListener("ifxListUpdate", this.handleCheckedChange);
    }
    toggleAccordion = (event) => {
        event.stopPropagation();
        this.expanded = !this.expanded;
    };
    render() {
        return (h("div", { key: '0740d98898997013417cf38f39e63a301be16dfd', class: `accordion ${this.expanded ? "expanded" : ""}` }, h("div", { key: 'b44e498b3bff48715af1c2c6bdcf314762713618', class: `header ${this.expanded ? "expanded" : ""}`, onClick: this.toggleAccordion }, h("div", { key: '88c0a5831935c7e651970ce44b24c09de3a0b149', class: `text-and-icon ${this.expanded ? "expanded" : ""}` }, h("div", { key: '9b45de6f6d50f5bc5486212c389e7b1bf01d89f4', class: "text" }, h("span", { key: '8864f251b18fd6e95ded2c562b2f9a18aaed1747' }, this.filterGroupName), h("ifx-indicator", { key: '525a7f528a09e9a2e45a2f55f9b38a5df02e436c', variant: "number", number: this.count })), h("ifx-icon", { key: 'dac4cfdfd877430b37aa263acf66f4b3b1bb3669', class: this.expanded ? "" : "hidden", icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '676d3c7356ef81a4d6e353226ba67fed173e2bb0', class: this.expanded ? "hidden" : "", icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded && (h("div", { key: '516286fe33b675b737d0eb832f7d280a619ca254', class: "filter-accordion-container" }, h("slot", { key: '3031b8ad0800d733eb5262bc5b4b5ac90b293667', name: "list" })))));
    }
    static get is() { return "ifx-filter-accordion"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["filter-accordion.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["filter-accordion.css"]
        };
    }
    static get properties() {
        return {
            "maxVisibleItems": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Max number of items to display before truncating/collapsing the list"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-visible-items"
            },
            "filterGroupName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"\"",
                    "resolved": "\"\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Identifier/label for the filter group"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "filter-group-name",
                "defaultValue": "\"\""
            }
        };
    }
    static get states() {
        return {
            "expanded": {},
            "count": {},
            "totalItems": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxFilterAccordionChange",
                "name": "ifxFilterAccordionChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the filter accordion`s state or selection changes"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
