import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';

const scMenuCss = ":host{display:block}.menu{padding:var(--sc-spacing-x-small) 0}.menu:focus{outline:none}::slotted(sc-input){margin-top:-var(--sc-spacing-x-small)}::slotted(sc-divider){--spacing:var(--sc-spacing-x-small)}";

const ScMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.scSelect = createEvent(this, "scSelect", 7);
    this.items = [];
  }
  /** TODO: Click test */
  handleClick(event) {
    const target = event.target;
    const item = target.closest('sc-menu-item');
    if (item && !item.disabled) {
      this.scSelect.emit({ item });
    }
  }
  /** TODO: Keydown Test */
  handleKeyDown(event) {
    // Make a selection when pressing enter
    if (event.key === 'Enter') {
      const item = this.getCurrentItem();
      event.preventDefault();
      if (item) {
        this.scSelect.emit({ item });
      }
    }
    // Prevent scrolling when space is pressed
    if (event.key === ' ') {
      event.preventDefault();
    }
    // Move the selection when pressing down or up
    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
      const selectedItem = this.getCurrentItem();
      let index = selectedItem ? this.items.indexOf(selectedItem) : 0;
      if (this.items.length) {
        event.preventDefault();
        if (event.key === 'ArrowDown') {
          index++;
        }
        else if (event.key === 'ArrowUp') {
          index--;
        }
        else if (event.key === 'Home') {
          index = 0;
        }
        else if (event.key === 'End') {
          index = this.items.length - 1;
        }
        if (index < 0)
          index = 0;
        if (index > this.items.length - 1)
          index = this.items.length - 1;
        this.setCurrentItem(this.items[index]);
        return;
      }
    }
  }
  /** Get the active item */
  getCurrentItem() {
    return this.items.find(i => i.getAttribute('tabindex') === '0');
  }
  /**
   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
   */
  async setCurrentItem(item) {
    const activeItem = item.disabled ? this.items[0] : item;
    // Update tab indexes
    this.items.forEach(i => {
      i.setAttribute('tabindex', i === activeItem ? '0' : '-1');
    });
  }
  /** Sync slotted items with internal state */
  syncItems() {
    const slottedElements = this.el.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
    this.items = slottedElements.filter(node => {
      return node.nodeName === 'sc-menu-item';
    });
  }
  /** Handle items change in slot */
  handleSlotChange() {
    this.syncItems();
  }
  render() {
    return (h("div", { part: "base", class: "menu", role: "menu", tabindex: "0", onKeyDown: e => this.handleKeyDown(e) }, h("slot", { onSlotchange: () => this.handleSlotChange() })));
  }
  get el() { return this; }
  static get style() { return scMenuCss; }
}, [1, "sc-menu", {
    "setCurrentItem": [64]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-menu"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-menu":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScMenu);
      }
      break;
  } });
}
defineCustomElement();

export { ScMenu as S, defineCustomElement as d };
