import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property, state } from "lit/decorators.js";
import compentStyle from "./split-button.css.js";
import { customElement } from "../../decorator.js";
import { classMap } from "lit/directives/class-map.js";
import { segmentPosition } from "../button/button.js";
import "../../icons/icon-arrow-flyout-google.js";
import "../icon-button/icon-button.js";
import "../menu-button/menu-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 ObcSplitButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.label = "Split Button";
    this.hasIcon = false;
    this.options = [];
    this.selectedValues = [];
    this.menuType = ContextMenuType.Regular;
    this.itemsPerColumn = 5;
    this.hasTitleBar = false;
    this.menuTitle = "";
    this.fullWidth = false;
    this.disabled = false;
    this.openTop = false;
    this.columnGroups = [];
    this.isDropdownOpen = false;
    this.handlePrimaryClick = (e) => {
      e.stopPropagation();
      this.dispatchEvent(
        new CustomEvent("click", {
          detail: { action: "primary" }
        })
      );
    };
    this.handleDropdownClick = (e) => {
      e.stopPropagation();
      this.isDropdownOpen = !this.isDropdownOpen;
      this.dispatchEvent(
        new CustomEvent("click", {
          detail: { action: "dropdown" }
        })
      );
      if (this.isDropdownOpen) {
        window.addEventListener("pointerdown", this.closeOnOutside);
      }
    };
    this.closeOnOutside = (e) => {
      if (!this.contains(e.target)) {
        this.isDropdownOpen = false;
        window.removeEventListener("pointerdown", this.closeOnOutside);
      }
    };
    this.handleMenuItemClick = (e) => {
      const { option } = e.detail;
      if (this.menuType === ContextMenuType.Flyout && option.children && option.children.length) {
        return;
      }
      this.handleMenuClose();
    };
    this.handleMenuClose = () => {
      this.isDropdownOpen = false;
      window.removeEventListener("pointerdown", this.closeOnOutside);
    };
  }
  get isMultiSelect() {
    if (this.multiSelect !== void 0) return this.multiSelect;
    return [
      ContextMenuType.Checkboxes,
      ContextMenuType.NestedCheckboxes,
      ContextMenuType.Multi,
      ContextMenuType.MultiWithSubtitles
    ].includes(this.menuType);
  }
  handleMenuChange(e) {
    this.selectedValues = e.detail.selectedValues;
    this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
    this.handleMenuClose();
  }
  disconnectedCallback() {
    window.removeEventListener("pointerdown", this.closeOnOutside);
    super.disconnectedCallback();
  }
  render() {
    return html`
      <div
        class=${classMap({
      wrapper: true,
      "full-width": this.fullWidth,
      "is-open": this.isDropdownOpen,
      "open-top": this.openTop
    })}
      >
        <obc-button
          class="primary-button"
          .variant=${"normal"}
          .segmentPosition=${segmentPosition.start}
          .showLeadingIcon=${this.hasIcon}
          .disabled=${this.disabled}
          @click=${this.handlePrimaryClick}
          .fullWidth=${this.fullWidth}
        >
          ${this.hasIcon ? html`<slot name="icon" slot="leading-icon"></slot>` : nothing}
          ${this.label}
        </obc-button>

        <obc-icon-button
          class="dropdown-button"
          .variant=${"normal"}
          .cornerRight=${true}
          .disabled=${this.disabled}
          .activated=${this.isDropdownOpen}
          @click=${this.handleDropdownClick}
          aria-expanded=${this.isDropdownOpen}
          aria-haspopup="menu"
        >
          <obi-arrow-flyout-google></obi-arrow-flyout-google>
        </obc-icon-button>

        <!-- Context Menu -->
        ${this.isDropdownOpen && this.options.length > 0 ? html`
            <obc-context-menu-input
              class="positioned-menu"
              .options=${this.options}
              .selectedValues=${this.selectedValues}
              .type=${this.menuType}
              .multiSelect=${this.isMultiSelect}
              .selectPerGroup=${true}
              .hasTitleBar=${this.hasTitleBar}
              .title=${this.menuTitle}
              .columnGroups=${this.columnGroups}
              .itemsPerColumn=${this.itemsPerColumn}
              @change=${this.handleMenuChange}
              @close=${this.handleMenuClose}
              @item-click=${this.handleMenuItemClick}
            /></obc-context-menu-input>
            ` : nothing}
      </div>
    `;
  }
};
ObcSplitButton.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcSplitButton.prototype, "label", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSplitButton.prototype, "hasIcon", 2);
__decorateClass([
  property({ type: Array })
], ObcSplitButton.prototype, "options", 2);
__decorateClass([
  property({ type: Array })
], ObcSplitButton.prototype, "selectedValues", 2);
__decorateClass([
  property({ type: String })
], ObcSplitButton.prototype, "menuType", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSplitButton.prototype, "multiSelect", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSplitButton.prototype, "selectPerGroup", 2);
__decorateClass([
  property({ type: Number })
], ObcSplitButton.prototype, "itemsPerColumn", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSplitButton.prototype, "hasTitleBar", 2);
__decorateClass([
  property({ type: String })
], ObcSplitButton.prototype, "menuTitle", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSplitButton.prototype, "fullWidth", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSplitButton.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSplitButton.prototype, "openTop", 2);
__decorateClass([
  property({ type: Array })
], ObcSplitButton.prototype, "columnGroups", 2);
__decorateClass([
  state()
], ObcSplitButton.prototype, "isDropdownOpen", 2);
ObcSplitButton = __decorateClass([
  customElement("obc-split-button")
], ObcSplitButton);
export {
  ObcSplitButton
};
//# sourceMappingURL=split-button.js.map
