import { Host, h, } from "@stencil/core";
import classNames from "classnames";
import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
import { detectFramework } from "../..//shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class Button {
    /** Button style level (visual prominence). */
    variant = "primary";
    /** Color theme of the button. */
    theme = "default";
    /** Button size (xs, s, m, l). */
    size = "m";
    /** Wether the button is disabled and not clickable. */
    disabled = false;
    internalHref;
    /** URL the Button should navigate to when clicked.  */
    href;
    /** Where to open the link. */
    target = "_self";
    /** Native button type. */
    type = "button";
    /** If true, button stretches to fill the available width. */
    fullWidth = false;
    /** Accessible label for screen readers when text is not enough */
    ariaLabelText;
    el;
    focusableElement;
    nativeButton;
    setInternalHref(newValue) {
        this.internalHref = newValue;
    }
    /** Move keayboard focus to the button. */
    async setFocus() {
        this.focusableElement.focus();
    }
    insertNativeButton() {
        this.nativeButton = document.createElement("button");
        this.nativeButton.type = this.type;
        this.nativeButton.style.display = "none";
        this.el.closest("form").appendChild(this.nativeButton);
    }
    handleFormAndInternalHref() {
        if (this.el.closest("form")) {
            if (this.el.href) {
                this.internalHref = undefined;
            }
            this.insertNativeButton();
        }
        else {
            this.internalHref = this.href;
        }
    }
    handleButtonWidth() {
        if (this.fullWidth) {
            this.el.style.setProperty("--bw", "100%");
        }
        else {
            this.el.style.setProperty("--bw", "fit-content");
        }
    }
    componentWillLoad() {
        this.handleFormAndInternalHref();
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-button", await framework);
        }
    }
    componentWillRender() {
        this.handleButtonWidth();
    }
    handleClick = (ev) => {
        if (this.el.shadowRoot) {
            const parentForm = this.el.closest("form");
            if (parentForm) {
                ev.preventDefault();
                if (this.type === "reset") {
                    // If the button type is 'reset', manually reset all custom form fields
                    this.resetClickHandler(); //this will reset all ifx-text-fields within a form
                }
                else {
                    const fakeButton = document.createElement("button");
                    if (this.type) {
                        fakeButton.type = this.type;
                    }
                    fakeButton.style.display = "none";
                    parentForm.appendChild(fakeButton);
                    fakeButton.click();
                    fakeButton.remove();
                }
            }
        }
    };
    resetClickHandler() {
        const formElement = this.el.closest("form");
        if (!formElement) {
            return;
        }
        const customElements = formElement.querySelectorAll("ifx-text-field, ifx-textarea");
        customElements.forEach((element) => {
            if ("reset" in element && typeof element.reset === "function") {
                element.reset();
            }
        });
    }
    handleKeyDown(ev) {
        if (ev.key === " " || (ev.key === "Enter" && !this.disabled)) {
            this.focusableElement.click();
        }
    }
    handleHostClick(event) {
        if (this.disabled === true) {
            event.stopImmediatePropagation();
        }
    }
    handleFocus(event) {
        if (this.disabled) {
            event.preventDefault();
            this.focusableElement.blur();
        }
    }
    render() {
        return (h(Host, { key: 'f3e7815eb04fb1f1036ea28bcb26db8acbaca7c6' }, h("a", { key: '4b0a87257ce6bb3a07958a002d035eaf6f350afd', role: this.href ? "link" : "button", tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === "_blank" ? "noopener noreferrer" : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? "true" : null, "aria-describedby": this.theme === "danger" ? "Dangerous action" : undefined, "aria-label": this.ariaLabelText || undefined }, h("slot", { key: 'da7e63c7c4b2695551c642fbe009a7b74910070f' }))));
    }
    getVariantClass() {
        return `${this.variant}` === "secondary"
            ? `secondary-${this.theme}`
            : `${this.variant}` === "tertiary"
                ? `tertiary-${this.theme}`
                : `${this.theme}`;
    }
    getSizeClass() {
        if (`${this.size}` === "xs") {
            return "xs";
        }
        else if (`${this.size}` === "s") {
            return "s";
        }
        else if (`${this.size}` === "l") {
            return "l";
        }
        else
            return "";
    }
    getClassNames() {
        return classNames("btn", this.size && `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? "disabled" : "");
    }
    static get is() { return "ifx-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["button.css"]
        };
    }
    static get properties() {
        return {
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"primary\" | \"secondary\" | \"tertiary\"",
                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Button style level (visual prominence)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "\"primary\""
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"default\" | \"danger\" | \"inverse\"",
                    "resolved": "\"danger\" | \"default\" | \"inverse\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Color theme of the button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme",
                "defaultValue": "\"default\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Button size (xs, s, m, l)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "\"m\""
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Wether the button is disabled and not clickable."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "URL the Button should navigate to when clicked."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Where to open the link."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "\"_self\""
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"button\" | \"submit\" | \"reset\"",
                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Native button type."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "\"button\""
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, button stretches to fill the available width."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "full-width",
                "defaultValue": "false"
            },
            "ariaLabelText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Accessible label for screen readers when text is not enough"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-label-text"
            }
        };
    }
    static get states() {
        return {
            "internalHref": {}
        };
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Move keayboard focus to the button.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "href",
                "methodName": "setInternalHref"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "click",
                "method": "handleHostClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
