import { unsafeCSS, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import componentStyle from "./title-container.css.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;
};
var ObcTitleContainerState = /* @__PURE__ */ ((ObcTitleContainerState2) => {
  ObcTitleContainerState2["Enabled"] = "enabled";
  ObcTitleContainerState2["Inactive"] = "inactive";
  return ObcTitleContainerState2;
})(ObcTitleContainerState || {});
let ObcTitleContainer = class extends LitElement {
  constructor() {
    super(...arguments);
    this.state = "enabled";
    this.titleValue = "";
    this.label = "";
    this.boundActionElements = /* @__PURE__ */ new Set();
    this.syncActionElementListeners = () => {
      for (const action of this.boundActionElements) {
        action.removeEventListener("click", this.handleAssignedActionClick);
      }
      this.boundActionElements.clear();
      for (const action of this.resolvedActionElements) {
        action.addEventListener("click", this.handleAssignedActionClick);
        this.boundActionElements.add(action);
      }
    };
    this.handleAssignedActionClick = (event) => {
      if (this.isInactive) return;
      const actionElement = event.currentTarget;
      if (!(actionElement instanceof HTMLElement)) return;
      const actions = this.resolvedActionElements;
      const actionIndex = actions.indexOf(actionElement);
      if (actionIndex === -1) return;
      this.dispatchAction(actionIndex + 1);
    };
  }
  get isInactive() {
    return this.state.toLowerCase() === "inactive";
  }
  get resolvedActionElements() {
    const slot = this.renderRoot.querySelector(
      'slot[name="actions"]'
    );
    if (!slot) return [];
    return slot.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement);
  }
  dispatchAction(action) {
    this.dispatchEvent(
      new CustomEvent("action-click", {
        detail: { action },
        bubbles: true,
        composed: true
      })
    );
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    for (const action of this.boundActionElements) {
      action.removeEventListener("click", this.handleAssignedActionClick);
    }
    this.boundActionElements.clear();
  }
  render() {
    const wrapperClassMap = {
      wrapper: true,
      [`state-${this.state}`]: true
    };
    return html`
      <div class=${classMap(wrapperClassMap)} part="wrapper">
        <div class="left" part="left">
          <div class="icon" part="icon">
            <slot name="icon"></slot>
          </div>
          <div class="text" part="text">
            <span class="title" part="title">
              <slot name="title">${this.titleValue}</slot>
            </span>
            <span class="label" part="label">
              <slot name="label">${this.label}</slot>
            </span>
          </div>
        </div>
        <div class="actions" part="actions">
          <slot
            name="actions"
            @slotchange=${this.syncActionElementListeners}
          ></slot>
        </div>
      </div>
    `;
  }
};
ObcTitleContainer.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcTitleContainer.prototype, "state", 2);
__decorateClass([
  property({ type: String, attribute: "title-value" })
], ObcTitleContainer.prototype, "titleValue", 2);
__decorateClass([
  property({ type: String })
], ObcTitleContainer.prototype, "label", 2);
ObcTitleContainer = __decorateClass([
  customElement("obc-title-container")
], ObcTitleContainer);
export {
  ObcTitleContainer,
  ObcTitleContainerState
};
//# sourceMappingURL=title-container.js.map
