/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
import { awaitTopbar } from "../../../globals/helpers";
/**
 * There are no events or features other than the `icon`, `small` and `language` prop.
 *
 * Our rule is to not have disabled buttons.
 * However, this component is an exception for a very specific use case regarding portal users.
 */
export class PnReadOnlyButton {
    hostElement;
    readOnlyModeText = '';
    tooltipOpen = false;
    tooltipEl;
    tooltipDx;
    /** The SVG content of the icon you want. */
    icon;
    /** Icon on the left side instead of on the right. */
    leftIcon = false;
    /** If you're using a button with only an icon, button text is still REQUIRED for the tooltip. */
    iconOnly = false;
    /** Smaller button. */
    small = false;
    /** Set the language manually. */
    language = null;
    setReadOnlyModeText() {
        const translations = {
            en: 'You cannot complete this action while in read only mode',
            sv: 'Du kan inte utföra denna handling i skrivskyddat läge',
            da: 'Du kan ikke gennemføre denne handling i skrivebeskyttet tilstand',
            fi: 'Et voi suorittaa tätä toimintoa vain luku -tilassa',
            no: 'Du kan ikke utføre denne handlingen i skrivebeskyttet modus',
        };
        this.readOnlyModeText = translations[this.language];
    }
    async componentWillLoad() {
        this.setReadOnlyModeText();
        if (this.language)
            return;
        await awaitTopbar(this.hostElement);
    }
    componentDidLoad() {
        this.initTooltip();
    }
    /*---------------------------------------TOOLTIP LOGIC-------------------------------------------*/
    openHandler() {
        if (this.tooltipOpen) {
            this.checkTooltipPosition();
            return;
        }
        this.setTooltipOffset();
    }
    initTooltip() {
        this.tooltipEl = this.hostElement.querySelector('.button-tooltip');
        const tooltipAnchor = this.hostElement;
        const openEvents = ['mouseenter', 'focus'];
        const closeEvents = ['mouseleave', 'blur'];
        const eventListeners = [...openEvents, ...closeEvents];
        eventListeners.forEach(e => {
            tooltipAnchor.addEventListener(e, event => {
                // Should open?
                if (openEvents.includes(event.type)) {
                    this.tooltipOpen = true;
                    return;
                }
                // Should close?
                if (closeEvents.includes(event.type)) {
                    this.tooltipOpen = false;
                }
            });
        });
    }
    setTooltipOffset() {
        this.tooltipEl.style.transform = `translateX(-50%) translateX(${this.tooltipDx}px)`;
    }
    checkTooltipPosition() {
        this.tooltipEl.style.transform = 'translateX(-50%)';
        requestAnimationFrame(() => {
            const { x, right } = this.tooltipEl.getBoundingClientRect();
            const extraMargin = 8;
            this.tooltipDx = '0';
            this.tooltipEl.style.transform = '';
            if (x < 0)
                this.tooltipDx = `${x * -1 + extraMargin}`;
            if (right > window.innerWidth)
                this.tooltipDx = `${window.innerWidth - right - extraMargin}`;
            requestAnimationFrame(() => {
                this.setTooltipOffset();
            });
        });
    }
    /* ---------------------------------------/TOOLTIP--------------------------------------- */
    getClassNames() {
        let classNames = 'pn-button ';
        if (this.small)
            classNames += 'pn-button-small ';
        if (this.leftIcon)
            classNames += 'pn-button-left-icon ';
        if (this.iconOnly)
            classNames += 'icon-only ';
        return classNames;
    }
    render() {
        return (h(Host, { key: '050c438370b6d5c86e327be03d206880f2f572e5', class: "pn-read-only-button" }, h("button", { key: 'a6cd36bc8f112d3ff7cb6ea65768339dd789813c', class: this.getClassNames(), "data-tooltip-open": this.tooltipOpen, disabled: true }, !this.iconOnly && h("slot", { key: '94979edec979712e7ecc1f683dcf2f32a7889f48' }), this.icon && h("pn-icon", { key: '14012e9a320767c993fab05c614c659f188783e3', icon: this.icon, color: "gray700" }), this.iconOnly && (h("span", { key: '4f75372bf50ec504504ecbd808d3bf1e746c1418', class: "read-only-icon-only" }, h("slot", { key: 'a12bca58ae471729cbb2442b1791bb4ee16c7db5' }))), h("div", { key: '3ec03d46dc7c44229112a90b0df8ea4737a09e79', class: "button-tooltip" }, this.readOnlyModeText))));
    }
    static get is() { return "pn-read-only-button"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-read-only-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-read-only-button.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The SVG content of the icon you want."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "leftIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Icon on the left side instead of on the right."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "left-icon",
                "defaultValue": "false"
            },
            "iconOnly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If you're using a button with only an icon, button text is still REQUIRED for the tooltip."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-only",
                "defaultValue": "false"
            },
            "small": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Smaller button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "small",
                "defaultValue": "false"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PnLanguages",
                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
                    "references": {
                        "PnLanguages": {
                            "location": "import",
                            "path": "@/globals/types",
                            "id": "src/globals/types.ts::PnLanguages",
                            "referenceLocation": "PnLanguages"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the language manually."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "readOnlyModeText": {},
            "tooltipOpen": {},
            "tooltipEl": {},
            "tooltipDx": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "language",
                "methodName": "setReadOnlyModeText"
            }, {
                "propName": "tooltipOpen",
                "methodName": "openHandler"
            }];
    }
}
