import { h, transformTag } from "../../utils/renderer";
import { getDirectChildren } from "../../utils/dom";
/**
 * Groups multiple details elements together, allowing only one to be open at a time.
 *
 * @version 1.0
 * @status stable
 */
export class NanoAccordion {
    indexOpened;
    elementOpened;
    el;
    /** Force one details element to always be open */
    alwaysOpen = false;
    /** Fires when accordion elements toggle */
    nanoToggle;
    onToggleHandler(event) {
        if (event.target?.tagName !== 'NANO-DETAILS')
            return;
        event.stopPropagation();
        const items = getDirectChildren(this.el, transformTag('nano-details'));
        items.forEach((item, i) => {
            if (item !== event.target)
                item.open = false;
            else if (item === event.target) {
                this.indexOpened = i;
            }
        });
        this.nanoToggle.emit({ element: event.target, index: this.indexOpened });
    }
    onClosedHandler(event) {
        event.stopPropagation();
        if (this.alwaysOpen) {
            let foundOpen;
            const items = getDirectChildren(this.el, transformTag('nano-details'));
            items.forEach((item) => {
                if (item !== event.target && item.open) {
                    foundOpen = true;
                }
            });
            if (!foundOpen) {
                event.preventDefault();
                return;
            }
        }
        if (this.elementOpened === event.target) {
            this.elementOpened = null;
            this.indexOpened = null;
            this.nanoToggle.emit();
        }
    }
    render() {
        return h("slot", { key: 'a16b340b9312672847ee022b2beb6767fc0dfb86' });
    }
    static get is() { return "nano-accordion"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["accordion.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["accordion.css"]
        };
    }
    static get properties() {
        return {
            "alwaysOpen": {
                "type": "boolean",
                "attribute": "always-open",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Force one details element to always be open"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "nanoToggle",
                "name": "nanoToggle",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fires when accordion elements toggle"
                },
                "complexType": {
                    "original": "{\n    element: HTMLNanoDetailsElement;\n    index: number;\n  }",
                    "resolved": "{ element: HTMLNanoDetailsElement; index: number; }",
                    "references": {
                        "HTMLNanoDetailsElement": {
                            "location": "global",
                            "id": "global::HTMLNanoDetailsElement"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "nanoOpen",
                "method": "onToggleHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "nanoClose",
                "method": "onClosedHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
