import { Component, h, Event, Element, Method } from '@stencil/core';
export class ScMenu {
  constructor() {
    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() })));
  }
  static get is() { return "sc-menu"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-menu.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-menu.css"]
  }; }
  static get events() { return [{
      "method": "scSelect",
      "name": "scSelect",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ item: HTMLScMenuItemElement }",
        "resolved": "{ item: HTMLScMenuItemElement; }",
        "references": {
          "HTMLScMenuItemElement": {
            "location": "global"
          }
        }
      }
    }]; }
  static get methods() { return {
    "setCurrentItem": {
      "complexType": {
        "signature": "(item: HTMLScMenuItemElement) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          },
          "HTMLScMenuItemElement": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": [{
            "name": "internal",
            "text": "Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n`tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item."
          }]
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
