import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./navigation-menu.css.js";
import { customElement } from "../../decorator.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;
};
var ObcNavigationMenuVariant = /* @__PURE__ */ ((ObcNavigationMenuVariant2) => {
  ObcNavigationMenuVariant2["Full"] = "full";
  ObcNavigationMenuVariant2["IconOnly"] = "icon-only";
  ObcNavigationMenuVariant2["IconOnlyLarge"] = "icon-only-large";
  ObcNavigationMenuVariant2["Compact"] = "compact";
  return ObcNavigationMenuVariant2;
})(ObcNavigationMenuVariant || {});
var ObcNavigationMenuFlyoutVariant = /* @__PURE__ */ ((ObcNavigationMenuFlyoutVariant2) => {
  ObcNavigationMenuFlyoutVariant2["Full"] = "full";
  ObcNavigationMenuFlyoutVariant2["Compact"] = "compact";
  return ObcNavigationMenuFlyoutVariant2;
})(ObcNavigationMenuFlyoutVariant || {});
let ObcNavigationMenu = class extends LitElement {
  constructor() {
    super(...arguments);
    this.variant = "full";
    this.flyoutVariant = "full";
    this.smallScreen = false;
    this.slotObservers = [];
  }
  findAllElements(el, tag, {
    slot,
    stopTag
  } = {}) {
    const elements = [];
    for (const child of el.children) {
      if (child.tagName.toLowerCase() === tag) {
        if (slot && child.getAttribute("slot") !== slot) {
          continue;
        }
        elements.push(child);
      } else if (stopTag && child.tagName.toLowerCase() === stopTag) {
        continue;
      } else {
        if (slot && child.getAttribute("slot") !== slot) {
          continue;
        }
        elements.push(...this.findAllElements(child, tag, { stopTag }));
      }
    }
    return elements;
  }
  findAllGroups(el) {
    return this.findAllElements(
      el,
      "obc-navigation-item-group"
    );
  }
  findRootItems(el) {
    return this.findAllElements(el, "obc-navigation-item", {
      stopTag: "obc-navigation-item-group"
    });
  }
  findAllItems(el, slot) {
    return this.findAllElements(el, "obc-navigation-item", {
      slot
    });
  }
  closeAllGroups() {
    const groups = this.findAllGroups(this);
    groups.forEach((group) => {
      group.close();
    });
  }
  registerGroup(groups) {
    groups.forEach((group) => {
      group.addEventListener("open", () => {
        groups.forEach((g) => {
          if (g !== group) {
            g.close();
          }
        });
      });
      const subGroups = this.findAllGroups(group);
      this.registerGroup(subGroups);
    });
  }
  cleanupSlotObservers() {
    this.slotObservers.forEach((observer) => observer.disconnect());
    this.slotObservers = [];
  }
  setupSlotObservers() {
    this.cleanupSlotObservers();
    const mainSlot = this.shadowRoot?.querySelector(
      'slot[name="main"]'
    );
    const footerSlot = this.shadowRoot?.querySelector(
      'slot[name="footer"]'
    );
    [mainSlot, footerSlot].forEach((slot) => {
      if (slot) {
        const slottedElements = slot.assignedElements();
        slottedElements.forEach((element) => {
          const observer = new MutationObserver(() => {
            this.setupItems();
          });
          observer.observe(element, {
            childList: true,
            subtree: true
          });
          this.slotObservers.push(observer);
        });
      }
    });
  }
  firstUpdated(_changedProperties) {
    super.firstUpdated(_changedProperties);
    const groups = this.findAllGroups(this);
    this.registerGroup(groups);
  }
  updated(_changedProperties) {
    super.updated(_changedProperties);
    if (_changedProperties.has("variant") || _changedProperties.has("flyoutVariant")) {
      this.setupItems();
    }
  }
  // Recursively set variant for children of groups
  setVariantToFlyoutItems(el) {
    const items = this.findAllElements(
      el,
      "obc-navigation-item"
    );
    items.forEach((item) => {
      item.variant = "full";
    });
    const groups = this.findAllGroups(el);
    groups.forEach((group) => {
      group.variant = "full";
      this.setVariantToFlyoutItems(group);
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.cleanupSlotObservers();
  }
  handleSlotChange() {
    this.setupItems();
    this.setupSlotObservers();
  }
  setupItems() {
    const hug = this.variant !== "full" || this.flyoutVariant === "compact";
    this.setHugToGroups(this, hug);
    const groups = this.findAllGroups(this);
    groups.forEach((group) => {
      group.variant = this.variant;
      this.setVariantToFlyoutItems(group);
    });
    this.findRootItems(this).forEach((item) => {
      item.variant = this.variant;
    });
    const footerVariant = this.smallScreen && this.variant === "full" ? "compact" : this.variant;
    this.findAllItems(this, "footer").forEach((item) => {
      item.variant = footerVariant;
    });
    this.findAllItems(this, "logo").forEach((item) => {
      item.variant = footerVariant;
    });
    this.findAllItems(this).forEach((item) => {
      item.addEventListener("click", () => {
        this.closeAllGroups();
      });
    });
  }
  setHugToGroups(el, hug) {
    const groups = this.findAllGroups(el);
    groups.forEach((group) => {
      group.hug = hug;
      this.setHugToGroups(group, hug);
    });
  }
  render() {
    return html`
      <div
        class="wrapper ${this.variant} ${this.smallScreen ? "small-screen" : ""}"
      >
        <nav class="main">
          <ol>
            <slot name="main" @slotchange=${this.handleSlotChange}></slot>
          </ol>
        </nav>
        <div class="footer">
          <nav>
            <ol>
              <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
              ${this.smallScreen ? html` <slot name="logo"></slot> ` : nothing}
            </ol>
          </nav>
          ${this.smallScreen ? nothing : html`
                <div class="logo">
                  <slot name="logo"></slot>
                </div>
              `}
        </div>
      </div>
    `;
  }
};
ObcNavigationMenu.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcNavigationMenu.prototype, "variant", 2);
__decorateClass([
  property({ type: String })
], ObcNavigationMenu.prototype, "flyoutVariant", 2);
__decorateClass([
  property({ type: Boolean })
], ObcNavigationMenu.prototype, "smallScreen", 2);
ObcNavigationMenu = __decorateClass([
  customElement("obc-navigation-menu")
], ObcNavigationMenu);
export {
  ObcNavigationMenu,
  ObcNavigationMenuFlyoutVariant,
  ObcNavigationMenuVariant
};
//# sourceMappingURL=navigation-menu.js.map
