var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
  if (kind === "m")
    throw new TypeError("Private method is not writable");
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a setter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _KlevuChatLayout_instances, _KlevuChatLayout_scrollElement, _KlevuChatLayout_popupElement, _KlevuChatLayout_sendMessage;
import { Host, h } from "@stencil/core";
import { partsExports } from "../../utils/partsExports";
/**
 * Component that wraps chat elements into a layout.
 *
 * @slot header - Header of the chat layout
 * @slot footer - Footer of the chat layout
 * @slot default - Main content of the chat layout. Only one element should be used for this slot to make layout calculatios right.
 * @slot actions - Actions to be placed in the footer
 *
 */
export class KlevuChatLayout {
  constructor() {
    _KlevuChatLayout_instances.add(this);
    _KlevuChatLayout_scrollElement.set(this, void 0);
    _KlevuChatLayout_popupElement.set(this, void 0);
    this.useNativeScrollbars = undefined;
    this.text = "";
    this.menuSlotCount = 0;
  }
  componentDidLoad() {
    var _a, _b, _c;
    // listen to updates to DOM in slot and scroll to bottom
    const mainSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("main slot");
    const observer = new MutationObserver(() => {
      this.scrollMainToBottom();
    });
    if (mainSlot) {
      observer.observe(mainSlot, { childList: true });
    }
    setTimeout(() => {
      this.scrollMainToBottom();
    }, 20);
    const menu = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("slot[name=menu]");
    this.menuSlotCount = (_c = menu === null || menu === void 0 ? void 0 : menu.assignedElements().length) !== null && _c !== void 0 ? _c : 0;
    menu === null || menu === void 0 ? void 0 : menu.addEventListener("slotchange", () => {
      var _a;
      this.menuSlotCount = (_a = menu === null || menu === void 0 ? void 0 : menu.assignedElements().length) !== null && _a !== void 0 ? _a : 0;
    });
  }
  /**
   * Scroll current chat to bottom of page
   */
  async scrollMainToBottom(behavior = "smooth") {
    var _a;
    const instance = await ((_a = __classPrivateFieldGet(this, _KlevuChatLayout_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getInstance());
    if (instance === null || instance === void 0 ? void 0 : instance.customInstance) {
      instance.customInstance.update(true);
      setTimeout(() => {
        var _a, _b;
        (_a = instance.customInstance) === null || _a === void 0 ? void 0 : _a.elements().viewport.scrollTo({
          top: (_b = instance.customInstance) === null || _b === void 0 ? void 0 : _b.elements().viewport.scrollHeight,
          behavior: behavior,
        });
      }, 20);
    }
    else if (instance === null || instance === void 0 ? void 0 : instance.nativeContainer) {
      setTimeout(() => {
        var _a;
        (_a = instance.nativeContainer) === null || _a === void 0 ? void 0 : _a.scroll({
          top: instance.nativeContainer.scrollHeight,
          behavior: behavior,
        });
      }, 20);
    }
  }
  /**
   * Close the popup menu
   */
  async closePopup() {
    var _a;
    (_a = __classPrivateFieldGet(this, _KlevuChatLayout_popupElement, "f")) === null || _a === void 0 ? void 0 : _a.closeModal();
  }
  render() {
    return (h(Host, null, h("header", null, h("slot", { name: "header" })), h("main", null, h("klevu-util-scrollbars", { overflowX: "hidden", overflowY: "scroll", useNative: this.useNativeScrollbars, ref: (el) => (__classPrivateFieldSet(this, _KlevuChatLayout_scrollElement, el, "f")) }, h("slot", null))), h("footer", null, h("slot", { name: "footer" }, h("slot", { name: "actions" }), h("div", { class: "inputs" }, this.menuSlotCount > 0 ? (h("klevu-popup", { exportparts: partsExports("klevu-popup"), anchor: "top-start", ref: (el) => (__classPrivateFieldSet(this, _KlevuChatLayout_popupElement, el, "f")) }, h("div", { slot: "content" }, h("slot", { name: "menu" })), h("klevu-button", { slot: "origin", icon: "menu", isSecondary: true }))) : null, h("klevu-textfield", { exportparts: partsExports("klevu-textfield"), variant: "pill", value: this.text, onKlevuTextChanged: (e) => {
        this.text = e.detail;
        e.preventDefault();
        return false;
      }, onKlevuTextEnterPressed: () => __classPrivateFieldGet(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) }), h("klevu-button", { icon: "send", onClick: () => __classPrivateFieldGet(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) }))))));
  }
  static get is() { return "klevu-chat-layout"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-chat-layout.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-chat-layout.css"]
    };
  }
  static get properties() {
    return {
      "useNativeScrollbars": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Use native scrollbars instead of custom ones in content"
        },
        "attribute": "use-native-scrollbars",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "text": {},
      "menuSlotCount": {}
    };
  }
  static get events() {
    return [{
        "method": "klevuChatLayoutMessageSent",
        "name": "klevuChatLayoutMessageSent",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Event emitted when user sends a message"
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "scrollMainToBottom": {
        "complexType": {
          "signature": "(behavior?: \"smooth\" | \"instant\") => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Scroll current chat to bottom of page",
          "tags": []
        }
      },
      "closePopup": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Close the popup menu",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "el"; }
}
_KlevuChatLayout_scrollElement = new WeakMap(), _KlevuChatLayout_popupElement = new WeakMap(), _KlevuChatLayout_instances = new WeakSet(), _KlevuChatLayout_sendMessage = function _KlevuChatLayout_sendMessage() {
  this.klevuChatLayoutMessageSent.emit(this.text);
  this.text = "";
};
//# sourceMappingURL=klevu-chat-layout.js.map
