import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./command-menu.css.js";
import "../start-stop-switch/start-stop-switch.js";
import "../../icons/icon-command-in.js";
import { classMap } from "lit/directives/class-map.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;
};
let ObcCommandMenu = class extends LitElement {
  constructor() {
    super(...arguments);
    this.inCommand = false;
    this.showLocation = true;
  }
  render() {
    return html`
      <div
        class=${classMap({
      card: true,
      "in-command": this.inCommand,
      "no-command": !this.inCommand,
      "has-location": this.showLocation
    })}
      >
        <div class="title-container">Command</div>
        <div class="command-container">
          <div class="value-container">
            <div class="icon command">
              <slot name="command-icon"></slot>
            </div>
            <div class="value">
              <div class="status">
                <slot name="command-status"></slot>
              </div>
              <div class="description">
                <div class="command-description">
                  <slot name="command-description"></slot>
                </div>
                ${this.showLocation ? html` <div class="divider"></div>
                      <div class="command-location">
                        <slot name="command-location"></slot>
                      </div>` : nothing}
              </div>
            </div>
          </div>
          <div class="action-container">
            <obc-start-stop-switch
              @change=${this.onChange}
              .checked=${this.inCommand}
              showCheckedStateIcon
              .size=${"large"}
            >
              <div slot="to-checked-action-label">
                <slot name="toogle-action-to-in-command-label"></slot>
              </div>
              <div slot="to-unchecked-action-label">
                <slot name="toogle-action-to-no-command-label"></slot>
              </div>
              <div slot="checked-state-label">
                <slot name="toogle-state-in-command-label"></slot>
              </div>
              <div slot="checked-state-icon">
                <slot name="toogle-state-in-command-icon">
                  <obi-command-in></obi-command-in>
                </slot>
              </div>
              <div slot="unchecked-state-label">
                <slot name="toogle-state-no-command-label"></slot>
              </div>
            </obc-start-stop-switch>
          </div>
        </div>
      </div>
    `;
  }
  /**
   * Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.
   *
   * @fires change {CustomEvent<{inCommand: boolean}>} Fired when the command state is toggled.
   */
  onChange(event) {
    event.stopPropagation();
    const newValue = event.detail.checked;
    this.inCommand = newValue;
    this.dispatchEvent(
      new CustomEvent("change", {
        detail: { inCommand: newValue },
        bubbles: true,
        composed: true
      })
    );
  }
};
ObcCommandMenu.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Boolean })
], ObcCommandMenu.prototype, "inCommand", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcCommandMenu.prototype, "showLocation", 2);
ObcCommandMenu = __decorateClass([
  customElement("obc-command-menu")
], ObcCommandMenu);
export {
  ObcCommandMenu
};
//# sourceMappingURL=command-menu.js.map
