import { h } from "@stencil/core";
export class List {
    constructor() {
        this.expanded = false;
        this.showMore = false;
        this.selectedCount = 0;
        this.totalItems = 0;
        this.name = "";
        this.maxVisibleItems = 6;
        this.type = "checkbox"; //default value
        this.internalResetTrigger = false;
        this.handleMutation = () => {
            const newTotalItems = this.getTotalItems();
            if (newTotalItems !== this.totalItems) {
                this.totalItems = newTotalItems;
                this.handleCheckedChange();
            }
            this.updateListEntriesType(this.type);
        };
        this.toggleList = (event) => {
            event.stopPropagation();
            this.expanded = !this.expanded;
        };
        this.toggleShowMore = (event) => {
            event.stopPropagation();
            this.showMore = !this.showMore;
        };
        this.handleCheckedChange = (event) => {
            // If the type of the changed entry is 'radio-button' and its value is true, deselect all other radio buttons
            if (event && event.detail.type === 'radio-button' && event.detail.value) {
                const otherRadioButtons = Array.from(this.el.querySelectorAll('ifx-list-entry'))
                    .filter(entry => entry.getAttribute('type') === 'radio-button' && entry !== event.target);
                otherRadioButtons.forEach(radioButton => radioButton.setAttribute('value', 'false'));
            }
            const selectedItems = this.getSelectedItems(this.el);
            this.selectedCount = selectedItems.length;
            this.ifxListUpdate.emit({ name: this.name, selectedItems });
        };
    }
    handleTypeChange(newType) {
        this.updateListEntriesType(newType);
    }
    resetTriggerChanged(newValue) {
        if (newValue) {
            this.reset();
            this.resetTrigger = false; // Resetting the trigger after the action is performed
        }
    }
    componentWillLoad() {
        this.setupListenersAndObservers();
        this.initializeList();
    }
    disconnectedCallback() {
        this.cleanupListenersAndObservers();
    }
    reset() {
        this.resetListEntries();
        this.expanded = false;
        this.showMore = false;
        this.selectedCount = 0;
        this.ifxListUpdate.emit({ name: this.name, selectedItems: [] });
    }
    render() {
        return this.renderList();
    }
    // Refactored methods for clarity and maintainability
    setupListenersAndObservers() {
        this.el.addEventListener('ifxListEntryChange', this.handleCheckedChange);
        this.observer = new MutationObserver(this.handleMutation);
        this.observer.observe(this.el, { childList: true });
    }
    cleanupListenersAndObservers() {
        this.el.removeEventListener('ifxListEntryChange', this.handleCheckedChange);
        this.observer.disconnect();
    }
    initializeList() {
        this.selectedCount = this.getSelectedItems(this.el).length;
        this.totalItems = this.getTotalItems();
        this.updateListEntriesType(this.type);
        this.checkRadioButtonConstraint();
    }
    updateListEntriesType(newType) {
        const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));
        listEntries.forEach(entry => entry.setAttribute('type', newType));
    }
    resetListEntries() {
        const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));
        listEntries.forEach(entry => {
            entry.value = false;
            entry.setAttribute('value', 'false');
        });
    }
    checkRadioButtonConstraint() {
        if (this.type === 'radio-button' && this.selectedCount > 1) {
            this.resetListEntries(); // Reset all and let the user select again
            this.selectedCount = 0;
        }
    }
    getTotalItems() {
        return this.el.querySelectorAll('ifx-list-entry').length;
    }
    getSelectedItems(el) {
        return Array.from(el.querySelectorAll('ifx-list-entry'))
            .filter(entry => entry.getAttribute('value') === 'true')
            .map(entry => ({
            label: entry.getAttribute('label'),
            value: entry.getAttribute('value'),
            type: entry.getAttribute('type'),
            element: entry
        }));
    }
    renderList() {
        const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));
        const visibleItems = this.showMore ? listEntries : listEntries.slice(0, this.maxVisibleItems);
        const remainingItems = listEntries.length - visibleItems.length;
        return (h("div", { class: "list-wrapper" }, visibleItems.map(entry => h("slot", { name: entry.getAttribute('slot') })), (remainingItems > 0 || this.showMore) && (h("div", { class: "link-wrapper", onClick: this.toggleShowMore }, h("ifx-icon", { key: this.showMore.toString(), icon: this.showMore ? 'chevron-up-16' : 'chevron-down-16' }), h("ifx-link", { size: "s", href: "", target: "_blank", variant: "underlined", disabled: false }, this.showMore ? 'Show less' : `Show ${remainingItems} more`)))));
    }
    static get is() { return "ifx-list"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["list.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["list.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"\""
            },
            "maxVisibleItems": {
                "type": "number",
                "attribute": "max-visible-items",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "6"
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"checkbox\""
            },
            "resetTrigger": {
                "type": "boolean",
                "attribute": "reset-trigger",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "expanded": {},
            "showMore": {},
            "selectedCount": {},
            "totalItems": {},
            "internalResetTrigger": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxListUpdate",
                "name": "ifxListUpdate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "type",
                "methodName": "handleTypeChange"
            }, {
                "propName": "resetTrigger",
                "methodName": "resetTriggerChanged"
            }];
    }
}
//# sourceMappingURL=list.js.map
