import { html } from 'lit';
import { query, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { getTextContent } from '../../internal/slot.mjs';
import { watch } from '../../internal/watch.mjs';
import styles from './menu-item.styles.mjs';

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;
};
class FlowUiMenuItem extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.type = "normal";
    this.checked = false;
    this.value = "";
    this.disabled = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.checked = boolean(this.checked, true);
    this.disabled = boolean(this.disabled, true);
    this.handleHostClick = this.handleHostClick.bind(this);
    this.addEventListener("click", this.handleHostClick);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener("click", this.handleHostClick);
  }
  handleDefaultSlotChange() {
    const textLabel = this.getTextLabel();
    if (typeof this.cachedTextLabel === "undefined") {
      this.cachedTextLabel = textLabel;
      return;
    }
    if (textLabel !== this.cachedTextLabel) {
      this.cachedTextLabel = textLabel;
      this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
    }
  }
  handleHostClick(event) {
    if (this.disabled) {
      event.preventDefault();
      event.stopImmediatePropagation();
    }
  }
  handleCheckedChange() {
    if (this.checked && this.type === "normal") {
      this.checked = false;
      console.error('The checked attribute can only be used on menu items with type="checkbox" or type="radio"', this);
      return;
    }
    if (this.type === "checkbox" || this.type === "radio") {
      this.setAttribute("aria-checked", this.checked ? "true" : "false");
    } else {
      this.removeAttribute("aria-checked");
    }
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  handleTypeChange() {
    if (this.type === "checkbox" || this.type === "radio") {
      this.setAttribute("role", "menuitemcheckbox");
      this.setAttribute("aria-checked", this.checked ? "true" : "false");
    } else {
      this.setAttribute("role", "menuitem");
      this.removeAttribute("aria-checked");
    }
  }
  /** @internal Returns a text label based on the contents of the menu item's default slot. */
  getTextLabel() {
    return getTextContent(this.defaultSlot);
  }
  render() {
    return html`
      <div
        part="base"
        class=${classMap({
      "menu-item": true,
      "menu-item--checked": this.checked,
      "menu-item--disabled": this.disabled,
      "menu-item--has-submenu": false
      // reserved for future use
    })}
      >
        <span part="checked-icon" class="menu-item__check">
          <flow-ui-icon
            name=${this.type === "checkbox" ? "check" : "radio"}
            library="system"
            aria-hidden="true"
          ></flow-ui-icon>
        </span>

        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>

        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>

        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>

        <span part="submenu-icon" class="menu-item__chevron">
          <flow-ui-icon name="chevron-right" library="system" aria-hidden="true"></flow-ui-icon>
        </span>
      </div>
    `;
  }
}
FlowUiMenuItem.styles = styles;
__decorateClass([
  query("slot:not([name])")
], FlowUiMenuItem.prototype, "defaultSlot", 2);
__decorateClass([
  query(".menu-item")
], FlowUiMenuItem.prototype, "menuItem", 2);
__decorateClass([
  property()
], FlowUiMenuItem.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiMenuItem.prototype, "checked", 2);
__decorateClass([
  property()
], FlowUiMenuItem.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiMenuItem.prototype, "disabled", 2);
__decorateClass([
  watch("checked")
], FlowUiMenuItem.prototype, "handleCheckedChange", 1);
__decorateClass([
  watch("disabled")
], FlowUiMenuItem.prototype, "handleDisabledChange", 1);
__decorateClass([
  watch("type")
], FlowUiMenuItem.prototype, "handleTypeChange", 1);

export { FlowUiMenuItem as default };
