import { html } from 'lit';
import { query, state, 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 { watch } from '../../internal/watch.mjs';
import { LocalizeController } from '../../utilities/localize.mjs';
import FlowUiIcon from '../icon/icon.component.mjs';
import styles from './option.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 FlowUiOption extends FlowRdfElement {
  constructor() {
    super(...arguments);
    // @ts-expect-error - Controller is currently unused
    this.localize = new LocalizeController(this);
    this.current = false;
    this.selected = false;
    this.hasHover = false;
    this.value = "";
    this.disabled = false;
    this.size = "medium";
  }
  connectedCallback() {
    super.connectedCallback();
    this.disabled = boolean(this.disabled, true);
    this.setAttribute("role", "option");
    this.setAttribute("aria-selected", "false");
  }
  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 });
    }
  }
  handleMouseEnter() {
    this.hasHover = true;
  }
  handleMouseLeave() {
    this.hasHover = false;
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  handleSelectedChange() {
    this.setAttribute("aria-selected", this.selected ? "true" : "false");
  }
  handleValueChange() {
    if (typeof this.value !== "string") {
      this.value = String(this.value);
    }
    if (this.value.includes(" ")) {
      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
      this.value = this.value.replace(/ /g, "_");
    }
  }
  /** @internal Returns a plain text label based on the option's content. */
  getTextLabel() {
    const nodes = this.childNodes;
    let label = "";
    [...nodes].forEach((node) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        if (!node.hasAttribute("slot")) {
          label += node.textContent;
        }
      }
      if (node.nodeType === Node.TEXT_NODE) {
        label += node.textContent;
      }
    });
    return label.trim();
  }
  render() {
    return html`
      <div
        part="base"
        class=${classMap({
      option: true,
      "option--current": this.current,
      "option--disabled": this.disabled,
      "option--selected": this.selected,
      "option--hover": this.hasHover,
      "option--small": this.size === "small",
      "option--medium": this.size === "medium",
      "option--large": this.size === "large"
    })}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
      >
        <flow-ui-icon
          part="checked-icon"
          class="option__check"
          name="check"
          library="system"
          aria-hidden="true"
        ></flow-ui-icon>
        <slot part="prefix" name="prefix" class="option__prefix"></slot>
        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
        <slot part="suffix" name="suffix" class="option__suffix"></slot>
      </div>
    `;
  }
}
FlowUiOption.styles = styles;
FlowUiOption.dependencies = { "flow-ui-icon": FlowUiIcon };
__decorateClass([
  query(".option__label")
], FlowUiOption.prototype, "defaultSlot", 2);
__decorateClass([
  state()
], FlowUiOption.prototype, "current", 2);
__decorateClass([
  state()
], FlowUiOption.prototype, "selected", 2);
__decorateClass([
  state()
], FlowUiOption.prototype, "hasHover", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiOption.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiOption.prototype, "disabled", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiOption.prototype, "size", 2);
__decorateClass([
  watch("disabled")
], FlowUiOption.prototype, "handleDisabledChange", 1);
__decorateClass([
  watch("selected")
], FlowUiOption.prototype, "handleSelectedChange", 1);
__decorateClass([
  watch("value")
], FlowUiOption.prototype, "handleValueChange", 1);

export { FlowUiOption as default };
