import { h, Host, } from "@stencil/core";
import { isSlotUsed, removeDisabledFalse } from "../../utils/helpers";
import chevronIcon from "../../assets/chevron-icon.svg";
let accordionIds = 0;
/**
 * @slot heading - Content is placed as the accordion heading.
 * @slot icon - Content is placed to the left of the heading.
 */
export class Accordion {
    constructor() {
        this.accordionId = `ic-accordion-${accordionIds++}`;
        this.CONTENT_VISIBILITY_PROPERTY = "--ic-expanded-content-visibility";
        /**
         * If `true`, the accordion will be disabled.
         */
        this.disabled = false;
        /**
         * If `true`, the accordion appears expanded.
         */
        this.expanded = false;
        /**
         * The section header outlining section content.
         */
        this.heading = "";
        /**
         * The main body message of the accordion.
         */
        this.message = "";
        /**
         * The size of the accordion.
         */
        this.size = "medium";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        this.toggleExpanded = () => {
            this.expanded = !this.expanded;
            this.accordionClicked.emit({ id: this.accordionId });
        };
        // Set accordion animation
        this.setAccordionAnimation = (el, duration, property, delay) => {
            el.style.transitionDuration = `${duration}ms`;
            el.style.transitionProperty = property;
            el.style.transitionDelay = delay;
        };
        this.setExpandedContentStyle = (ev, expandedContent) => {
            if (ev.propertyName === "height" && expandedContent.clientHeight > 0) {
                expandedContent.classList.add("expanded-content-opened");
                expandedContent.style.height = "auto";
            }
        };
        this.hideExpandedContent = (ev, expandedContent) => {
            if (ev.propertyName === "height" && expandedContent.clientHeight === 0) {
                expandedContent.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "hidden");
            }
        };
        this.animateExpandedContent = () => {
            if (this.expandedContentEl) {
                const expandedContentEl = this.expandedContentEl;
                const elementHeight = expandedContentEl.scrollHeight;
                if (elementHeight > 0 && this.expanded) {
                    expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "visible");
                    expandedContentEl.style.height = `${elementHeight}px`;
                    this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-out");
                    expandedContentEl.addEventListener("transitionend", (e) => {
                        this.setExpandedContentStyle(e, expandedContentEl);
                    });
                }
                else if (!this.expanded) {
                    const expandedContentEl = this.expandedContentEl;
                    expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;
                    if (expandedContentEl.scrollHeight > 0 && !this.expanded) {
                        expandedContentEl.style.height = "0";
                        this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-in");
                        expandedContentEl.classList.remove("expanded-content-opened");
                    }
                    expandedContentEl.addEventListener("transitionend", (e) => {
                        this.hideExpandedContent(e, expandedContentEl);
                    });
                }
            }
        };
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close
    handleExpandedWatch() {
        this.animateExpandedContent();
    }
    /**
     * Sets focus on accordion heading.
     */
    async setFocus() {
        var _a;
        (_a = this.accordionBtnHeading) === null || _a === void 0 ? void 0 : _a.focus();
    }
    componentWillLoad() {
        removeDisabledFalse(this.disabled, this.el);
    }
    disconnectedCallback() {
        const expandedContentEl = this.expandedContentEl;
        if (expandedContentEl) {
            expandedContentEl.removeEventListener("transitionend", (e) => this.setExpandedContentStyle(e, expandedContentEl), true);
            expandedContentEl.removeEventListener("transitionend", (e) => this.hideExpandedContent(e, expandedContentEl), true);
        }
    }
    componentDidLoad() {
        // So accordion opens by default if expanded set to true
        if (this.expanded && this.expandedContentEl) {
            this.expandedContentEl.style.height = "auto";
            this.expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "visible");
        }
    }
    render() {
        const { size, disabled, expanded, theme } = this;
        return (h(Host, { key: '1af99baa1066daa75be1af7329ed0a79a6a7f3cf', id: this.accordionId, class: {
                ["ic-accordion-disabled"]: !!disabled,
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, "aria-disabled": disabled ? "true" : "false" }, h("button", { key: '95695d5beebac9e84bc55159d8602182698ece75', ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
                [`${size}`]: true,
                ["section-button"]: true,
                ["section-button-open"]: !!expanded && !disabled,
            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (h("div", { key: '274fc2d72fefc6b7f52e4c11fb0dec81055aeb1e', class: "icon-container" }, h("slot", { key: 'b8fb45c64beba9a319776080ea7b764aa4a0b9db', name: "icon" }))), h("ic-typography", { key: 'c0ca1e3a7f4a8cb7b05a3892eec1db728162db91', variant: "subtitle-large", class: "section-header" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (this.heading)), h("span", { key: 'c8a70311d3d99114ff1f75c63dbbbbf1077e59c7', class: {
                ["expand-chevron"]: true,
                ["content-expanded-chevron"]: !!expanded && !disabled,
            }, "aria-hidden": "true", innerHTML: chevronIcon })), h("div", { key: '2bbae7f78c0a88f767c64fa0849c6c13bd998128', class: {
                ["expanded-content"]: true,
            }, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, h("div", { key: '49f53a7ceb1a9a13f50542e93445bacd7d9d9a1e', class: "expanded-content-inner" }, this.message ? (h("ic-typography", { variant: "body" }, this.message)) : (h("slot", null))))));
    }
    static get is() { return "ic-accordion"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-accordion.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-accordion.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the accordion will be disabled."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "expanded": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the accordion appears expanded."
                },
                "getter": false,
                "setter": false,
                "attribute": "expanded",
                "reflect": false,
                "defaultValue": "false"
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The section header outlining section content."
                },
                "getter": false,
                "setter": false,
                "attribute": "heading",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "message": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The main body message of the accordion."
                },
                "getter": false,
                "setter": false,
                "attribute": "message",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizes",
                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                    "references": {
                        "IcSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the accordion."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            }
        };
    }
    static get events() {
        return [{
                "method": "accordionClicked",
                "name": "accordionClicked",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Emitted when accordion is clicked."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "{ id: string }",
                    "resolved": "{ id: string; }",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on accordion heading.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }, {
                "propName": "expanded",
                "methodName": "handleExpandedWatch"
            }];
    }
}
//# sourceMappingURL=ic-accordion.js.map
