import { h, } from "@stencil/core";
import { createRandomString } from "../../../util/random-string";
/**
 * @private
 */
export class DockButton {
    constructor() {
        /**
         * When the dock is expanded or collapsed, dock items
         * show labels and tooltips as suitable for the layout.
         */
        this.expanded = false;
        /**
         * When dock is using mobile layout, dock items
         * show labels and tooltips as suitable for the layout.
         */
        this.useMobileLayout = false;
        /**
         * Indicated whether the popover that renders a component is open.
         */
        this.isOpen = false;
        this.renderNotification = () => {
            if (this.item.badge !== undefined) {
                return h("limel-badge", { label: this.item.badge });
            }
        };
        this.openPopover = (event) => {
            event.stopPropagation();
            this.isOpen = true;
            this.menuOpen.emit(this.item);
        };
        this.setCustomComponentElement = (element) => {
            this.customComponentElement = element;
        };
        this.onPopoverClose = () => {
            this.isOpen = false;
            this.close.emit();
        };
        this.handleClick = (event) => {
            event.stopPropagation();
            this.itemSelected.emit(this.item);
        };
        this.focusCustomComponentElement = (entries) => {
            var _a, _b, _c;
            const entry = entries.find((e) => e.target === this.customComponentElement);
            if (!entry) {
                return;
            }
            if (!entry.isIntersecting) {
                return;
            }
            if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
                (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
            }
        };
        this.getOpenDirection = () => {
            if (this.useMobileLayout) {
                return 'top';
            }
            return 'right';
        };
        this.tooltipId = createRandomString();
    }
    render() {
        var _a, _b;
        if ((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu) === null || _b === void 0 ? void 0 : _b.componentName) {
            return this.renderPopover();
        }
        return this.renderButton(this.handleClick);
    }
    openWatcher() {
        if (!this.isOpen) {
            return;
        }
        if (!this.intersectionObserver) {
            this.intersectionObserver = new IntersectionObserver(this.focusCustomComponentElement);
            this.intersectionObserver.observe(this.customComponentElement);
        }
    }
    disconnectedCallback() {
        var _a;
        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        this.intersectionObserver = undefined;
    }
    renderPopover() {
        var _a;
        const CustomComponent = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu.componentName;
        return (h("limel-popover", { openDirection: this.useMobileLayout ? 'top' : 'right-start', open: this.isOpen || this.item.dockMenu.menuOpen, onClose: this.onPopoverClose }, this.renderButton(this.openPopover, 'trigger'), h(CustomComponent, Object.assign({ ref: this.setCustomComponentElement }, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
    }
    renderButton(handleClick, slot) {
        var _a;
        return (h("button", { slot: slot, tabindex: "0", id: this.tooltipId, type: "button", class: {
                button: true,
                selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
            }, onClick: handleClick, "aria-live": "polite" }, this.renderIcon(), this.renderLabel(), this.renderTooltip(), this.renderNotification()));
    }
    renderIcon() {
        if (!this.item.icon) {
            return;
        }
        return h("limel-icon", { name: this.item.icon, class: "icon" });
    }
    renderLabel() {
        if (this.expanded) {
            return h("span", { class: "text" }, this.item.label);
        }
    }
    renderTooltip() {
        if (!this.expanded && this.item.label) {
            return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.label, helperLabel: this.item.helperLabel, openDirection: this.getOpenDirection() }));
        }
        if (this.expanded && this.item.helperLabel) {
            return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.helperLabel, openDirection: this.getOpenDirection() }));
        }
    }
    static get is() { return "limel-dock-button"; }
    static get originalStyleUrls() {
        return {
            "$": ["dock-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dock-button.css"]
        };
    }
    static get properties() {
        return {
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DockItem",
                    "resolved": "DockItem",
                    "references": {
                        "DockItem": {
                            "location": "import",
                            "path": "../dock.types",
                            "id": "src/components/dock/dock.types.ts::DockItem",
                            "referenceLocation": "DockItem"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Item that is placed in the dock."
                },
                "getter": false,
                "setter": false
            },
            "expanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "When the dock is expanded or collapsed, dock items\nshow labels and tooltips as suitable for the layout."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "expanded",
                "defaultValue": "false"
            },
            "useMobileLayout": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "When dock is using mobile layout, dock items\nshow labels and tooltips as suitable for the layout."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "use-mobile-layout",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "itemSelected",
                "name": "itemSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when a dock item has been selected from the dock."
                },
                "complexType": {
                    "original": "DockItem",
                    "resolved": "DockItem",
                    "references": {
                        "DockItem": {
                            "location": "import",
                            "path": "../dock.types",
                            "id": "src/components/dock/dock.types.ts::DockItem",
                            "referenceLocation": "DockItem"
                        }
                    }
                }
            }, {
                "method": "menuOpen",
                "name": "menuOpen",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when a dock menu is opened."
                },
                "complexType": {
                    "original": "DockItem",
                    "resolved": "DockItem",
                    "references": {
                        "DockItem": {
                            "location": "import",
                            "path": "../dock.types",
                            "id": "src/components/dock/dock.types.ts::DockItem",
                            "referenceLocation": "DockItem"
                        }
                    }
                }
            }, {
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when the popover is closed."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "isOpen",
                "methodName": "openWatcher"
            }];
    }
}
