import { h, } from "@stencil/core";
import { createRandomString } from "../../../util/random-string";
import { makeEnterClickable, removeEnterClickable, } from "../../../util/make-enter-clickable";
import { getIconColor, getIconName, getIconTitle, } from "../../icon/get-icon-props";
/**
 * @private
 */
export class ActionBarButton {
    constructor() {
        /**
         * When the item is displayed in the available width,
         * this will be `false`.
         */
        this.isVisible = true;
        /**
         * When the item is selected, this will be `true`.
         */
        this.selected = false;
        this.handleClick = (event) => {
            event.stopPropagation();
            this.select.emit(this.item);
        };
        this.tooltipId = createRandomString();
    }
    componentWillLoad() {
        makeEnterClickable(this.host);
    }
    componentDidLoad() {
        this.triggerIconColorWarning();
    }
    disconnectedCallback() {
        removeEnterClickable(this.host);
    }
    render() {
        if (!this.isItem(this.item) && this.item.separator) {
            return h("hr", null);
        }
        return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled(), class: {
                'is-selected': this.isItem(this.item) && this.item.selected,
            } }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
    }
    isItem(item) {
        return !('separator' in item);
    }
    isDisabled() {
        if (this.isItem(this.item) && this.item.disabled) {
            return true;
        }
        if (!this.isVisible) {
            return true;
        }
    }
    renderIcon() {
        if (this.isItem(this.item) && !this.item.icon) {
            return;
        }
        if ('icon' in this.item) {
            const name = getIconName(this.item.icon);
            const color = getIconColor(this.item.icon, this.item.iconColor);
            const title = getIconTitle(this.item.icon);
            return (h("limel-icon", { name: name, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
                    '--action-bar-item-icon-color': `${color}`,
                } }));
        }
    }
    renderLabel() {
        if (!this.isItem(this.item) || this.item.iconOnly) {
            return;
        }
        return h("span", { class: "text" }, this.item.text);
    }
    renderTooltip() {
        if (!this.isItem(this.item)) {
            return;
        }
        return (h("limel-tooltip", { elementId: this.tooltipId, label: this.getTooltipLabel(this.item), helperLabel: this.item.commandText }));
    }
    getTooltipLabel(item) {
        const iconTitle = getIconTitle(item.icon);
        const tooltipLabel = item.text;
        if (iconTitle && tooltipLabel) {
            return `${iconTitle} ${tooltipLabel}`;
        }
        return tooltipLabel;
    }
    triggerIconColorWarning() {
        if (this.isItem(this.item) && this.item.iconColor) {
            console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
        }
    }
    static get is() { return "limel-action-bar-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["action-bar-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["action-bar-item.css"]
        };
    }
    static get properties() {
        return {
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ActionBarItem | ListSeparator",
                    "resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any> | ListSeparator",
                    "references": {
                        "ActionBarItem": {
                            "location": "import",
                            "path": "../../action-bar/action-bar.types",
                            "id": "src/components/action-bar/action-bar.types.ts::ActionBarItem",
                            "referenceLocation": "ActionBarItem"
                        },
                        "ListSeparator": {
                            "location": "import",
                            "path": "../../list-item/list-item.types",
                            "id": "src/components/list-item/list-item.types.ts::ListSeparator",
                            "referenceLocation": "ListSeparator"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Item that is placed in the action bar."
                },
                "getter": false,
                "setter": false
            },
            "isVisible": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When the item is displayed in the available width,\nthis will be `false`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "is-visible",
                "defaultValue": "true"
            },
            "selected": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When the item is selected, this will be `true`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "selected",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "select",
                "name": "select",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "public",
                            "text": undefined
                        }],
                    "text": "Fired when a action bar item has been clicked."
                },
                "complexType": {
                    "original": "ActionBarItem | ListSeparator",
                    "resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any> | ListSeparator",
                    "references": {
                        "ActionBarItem": {
                            "location": "import",
                            "path": "../../action-bar/action-bar.types",
                            "id": "src/components/action-bar/action-bar.types.ts::ActionBarItem",
                            "referenceLocation": "ActionBarItem"
                        },
                        "ListSeparator": {
                            "location": "import",
                            "path": "../../list-item/list-item.types",
                            "id": "src/components/list-item/list-item.types.ts::ListSeparator",
                            "referenceLocation": "ListSeparator"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
}
