import { h } from "@stencil/core";
export class HamburgerMenu {
    constructor() {
        this.isToggled = false;
        this.messages = [];
        this.isLiveAgentEnabled = false;
        this.hasCheckedLiveAgent = false; // ✅ Track if we've already checked
        this.liveAgentButtonText = "Connect to Live Agent";
        // ✅ bind once so add/remove work
        this.boundHandleClickOutside = this.handleClickOutside.bind(this);
    }
    handleClickOutside(event) {
        // Check if the clicked target is outside the menu
        const target = event.target;
        if (this.isToggled && this.menuV2Ref && !this.menuV2Ref.contains(target)) {
            // console.log("Clicked outside the menu, closing...")
            this.isToggled = false;
            this.toggledChange.emit(this.isToggled);
        }
        // if (this.showMenu && this.plusIconRef && !this.plusIconRef.contains(target)) {
        //   this.showMenu = false
        // }
    }
    /** ✅ Watch for isToggled changes to attach/remove listener dynamically */
    watchToggled(newValue) {
        if (newValue === true) {
            document.addEventListener("click", this.boundHandleClickOutside);
        }
        else {
            document.removeEventListener("click", this.boundHandleClickOutside);
        }
    }
    // ✅ Watch messages array but only check once
    watchMessages(newMessages) {
        // Only check if we haven't checked before AND we have enough messages
        if (!this.hasCheckedLiveAgent && newMessages && newMessages.length === 2) {
            this.hasCheckedLiveAgent = true; // ✅ Mark as checked so it won't run again
        }
    }
    watchLiveAgentButtonText(newText) {
        if (!newText || newText.trim() === "") {
            this.liveAgentButtonText = "Connect to Live Agent";
        }
    }
    componentDidLoad() {
        if (this.isToggled) {
            document.addEventListener("click", this.boundHandleClickOutside);
        }
    }
    disconnectedCallback() {
        document.removeEventListener("click", this.boundHandleClickOutside);
    }
    render() {
        var _a, _b;
        return (h("div", { key: 'fb76552fc3799bef70ebddc3833e99b9058f180d', id: "dropdown-menu", role: "menu", class: `flex flex-col gap-y-1 grow-wrap absolute bg-white border-b border-gray-80 border-solid rounded-lg shadow-lg p-2 mt-4 min-w-[200px] left-5 overflow-hidden ${this.isToggled ? "show" : ""} dropdown-menu`, style: { height: "auto" }, ref: el => (this.menuV2Ref = el) }, (_b = (_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 :
            _b.map(button => (h("div", { class: "w-full dropdown-item" }, h("button", { class: "dropdown-item-button", role: "menuitem", "aria-label": button.label, onClick: _e => {
                    this.hamburgerMenuClick.emit({ button, type: 'menu' });
                } }, button.label)))), h("div", { key: 'e9df71a3d62ac65517854d31816d08bdaff947e6', class: "w-full dropdown-item" }, h("button", { key: 'f043a9273787790c12e1a8a002982f16a21925b0', class: "dropdown-item-button", role: "menuitem", "aria-label": "Start Over", "aria-disabled": this.messages.length === 0, disabled: this.messages.length === 0, style: { opacity: this.messages.length === 0 ? "0.5" : "1", cursor: this.messages.length === 0 ? "not-allowed" : "pointer" }, onClick: ev => {
                ev.preventDefault();
                this.hamburgerMenuClick.emit({ type: 'startover', event: ev });
            } }, "Start Over")), h("div", { key: 'f434964275c80de42847907f60711eaef0ce0460', class: "w-full dropdown-item" }, h("button", { key: 'ed23384ef53f9e9b25a8215bafcfda0f51778f6c', class: "dropdown-item-button", role: "menuitem", "aria-label": "View Recent Chat", onClick: _e => {
                this.hamburgerMenuClick.emit({ type: 'history' });
            } }, "View Recent chat")), this.isLiveAgentEnabled && this.botSettings.enableHamburgerMenu && (h("div", { key: 'd0fdceeb92d6ec7b1754c5e338dddeaf6ca46081', class: "w-full dropdown-item" }, h("button", { key: '21d6f48f44898a459b0224cdab3f65ed0b93124c', class: `dropdown-item-button ${!this.isLiveAgentEnabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "opacity-100 cursor-pointer"}`, role: "menuitem", "aria-label": this.liveAgentButtonText, style: { opacity: !this.isLiveAgentEnabled ? "0.5" : "1", cursor: !this.isLiveAgentEnabled ? "not-allowed" : "pointer" }, onClick: ev => {
                ev.preventDefault();
                if (!this.isLiveAgentEnabled)
                    return;
                this.handleByLiveAgent.emit();
            } }, this.liveAgentButtonText)))));
    }
    static get is() { return "hamburger-menu"; }
    static get properties() {
        return {
            "isToggled": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "is-toggled",
                "defaultValue": "false"
            },
            "messages": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "botSettings": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "bot-settings"
            },
            "isLiveAgentEnabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-live-agent-enabled",
                "defaultValue": "false"
            },
            "liveAgentButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "live-agent-button-text",
                "defaultValue": "\"Connect to Live Agent\""
            }
        };
    }
    static get states() {
        return {
            "hasCheckedLiveAgent": {}
        };
    }
    static get events() {
        return [{
                "method": "hamburgerMenuClick",
                "name": "hamburgerMenuClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "handleByLiveAgent",
                "name": "handleByLiveAgent",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "toggledChange",
                "name": "toggledChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "isToggled",
                "methodName": "watchToggled"
            }, {
                "propName": "messages",
                "methodName": "watchMessages"
            }, {
                "propName": "liveAgentButtonText",
                "methodName": "watchLiveAgentButtonText"
            }];
    }
}
