import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property, state, query } from "lit/decorators.js";
import compentStyle from "./menu-button.css.js";
import { customElement } from "../../decorator.js";
import { classMap } from "lit/directives/class-map.js";
import "../../icons/icon-arrow-flyout-google.js";
import "../button/button.js";
import { ContextMenuType } from "../context-menu-input/context-menu-input.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let ObcMenuButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.label = "";
    this.options = [];
    this.selectedValues = [];
    this.fullWidth = false;
    this.hasIcon = false;
    this.menuType = ContextMenuType.Regular;
    this.hasTitleBar = false;
    this.menuTitle = "";
    this.columnGroups = [];
    this.itemsPerColumn = 5;
    this.openTop = false;
    this.disabled = false;
    this.isOpen = false;
    this.handlePopoverToggle = (e) => {
      this.isOpen = e.newState === "open";
      if (e.newState === "open") {
        this.dispatchEvent(new CustomEvent("open"));
      }
      if (e.newState === "closed") {
        this.dispatchEvent(new CustomEvent("close"));
      }
    };
  }
  get effectiveMultiSelect() {
    if (this.multiSelect !== void 0) return this.multiSelect;
    return [
      ContextMenuType.Checkboxes,
      ContextMenuType.NestedCheckboxes,
      ContextMenuType.Multi,
      ContextMenuType.MultiWithSubtitles
    ].includes(this.menuType);
  }
  get effectiveMenuType() {
    if (this.effectiveMultiSelect && this.menuType === ContextMenuType.Regular) {
      return ContextMenuType.Checkboxes;
    }
    return this.menuType;
  }
  handleMenuChange(e) {
    this.selectedValues = e.detail.selectedValues;
    this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
    if (!this.effectiveMultiSelect) {
      this.handleMenuClose();
    }
  }
  handleItemClick(e) {
    this.dispatchEvent(new CustomEvent("item-click", { detail: e.detail }));
    const option = e.detail.option;
    if (option.children?.length) {
      return;
    }
    const isFlyoutMenu = this.menuType === ContextMenuType.Flyout || this.menuType === ContextMenuType.NestedCheckboxes;
    if (isFlyoutMenu && !this.effectiveMultiSelect) {
      this.handleMenuClose();
      return;
    }
  }
  handleMenuClose() {
    if (this.menu === void 0) return;
    this.menu.hidePopover();
  }
  get isMultiSelect() {
    if (this.multiSelect !== void 0) return this.multiSelect;
    return [
      ContextMenuType.Checkboxes,
      ContextMenuType.NestedCheckboxes,
      ContextMenuType.Multi,
      ContextMenuType.MultiWithSubtitles
    ].includes(this.menuType);
  }
  // Only meaningful if not multi-select AND persistSelection is true
  get effectiveSelectPerGroup() {
    return !this.isMultiSelect && !!this.selectPerGroup;
  }
  render() {
    return html`
      <button
        class=${classMap({
      wrapper: true,
      "full-width": this.fullWidth,
      "is-open": this.isOpen,
      "open-top": this.openTop,
      disabled: this.disabled
    })}
        ?disabled=${this.disabled}
        popovertarget="menu-popover"
        aria-expanded=${this.isOpen}
        aria-haspopup="menu"
      >
        <div class="visible-wrapper">
          <div class="content-container">
            ${this.hasIcon ? html`
                    <div class="icon-container"><slot name="icon"></slot></div>
                  ` : nothing}
            ${this.label ? html` <div class="label-container">${this.label}</div> ` : nothing}
          </div>
          <div class="arrow-flyout-container">
            <obi-arrow-flyout-google></obi-arrow-flyout-google>
          </div>
        </div>

        
      </button>
      <obc-context-menu-input
          popover="auto"
          id="menu-popover"
          class="positioned-menu"
          .type=${this.effectiveMenuType}
          .options=${this.options}
          .selectedValues=${this.selectedValues}
          .multiSelect=${this.isMultiSelect}
          .selectPerGroup=${this.effectiveSelectPerGroup}
          .hasTitleBar=${this.hasTitleBar}
          .title=${this.menuTitle}
          .columnGroups=${this.columnGroups}
          .itemsPerColumn=${this.itemsPerColumn}
          @change=${this.handleMenuChange}
          @item-click=${this.handleItemClick}
          @close=${this.handleMenuClose}
          @toggle=${this.handlePopoverToggle}
        /></obc-context-menu-input>
    `;
  }
};
ObcMenuButton.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcMenuButton.prototype, "label", 2);
__decorateClass([
  property({ type: Array })
], ObcMenuButton.prototype, "options", 2);
__decorateClass([
  property({ type: Array })
], ObcMenuButton.prototype, "selectedValues", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMenuButton.prototype, "fullWidth", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMenuButton.prototype, "hasIcon", 2);
__decorateClass([
  property({ type: String })
], ObcMenuButton.prototype, "menuType", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMenuButton.prototype, "multiSelect", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMenuButton.prototype, "selectPerGroup", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMenuButton.prototype, "hasTitleBar", 2);
__decorateClass([
  property({ type: String })
], ObcMenuButton.prototype, "menuTitle", 2);
__decorateClass([
  property({ type: Array })
], ObcMenuButton.prototype, "columnGroups", 2);
__decorateClass([
  property({ type: Number })
], ObcMenuButton.prototype, "itemsPerColumn", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMenuButton.prototype, "openTop", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMenuButton.prototype, "disabled", 2);
__decorateClass([
  state()
], ObcMenuButton.prototype, "isOpen", 2);
__decorateClass([
  query(".positioned-menu")
], ObcMenuButton.prototype, "menu", 2);
ObcMenuButton = __decorateClass([
  customElement("obc-menu-button")
], ObcMenuButton);
export {
  ObcMenuButton
};
//# sourceMappingURL=menu-button.js.map
