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 "./form-group.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 ObcFormGroupType = /* @__PURE__ */ ((ObcFormGroupType2) => {
  ObcFormGroupType2["View"] = "view";
  ObcFormGroupType2["EnabledActionFirst"] = "enabled-action-first";
  ObcFormGroupType2["FilledStatusFirst"] = "filled-status-first";
  ObcFormGroupType2["EnabledActionLast"] = "enabled-action-last";
  ObcFormGroupType2["FilledStatusLast"] = "filled-status-last";
  ObcFormGroupType2["Inactive"] = "inactive";
  return ObcFormGroupType2;
})(ObcFormGroupType || {});
let ObcFormGroup = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "view";
    this.handleSlotChange = () => {
      this.syncLastItemMarker();
    };
    this.handleFocusIn = () => {
      this.syncFocusedItemMarker();
    };
    this.handleFocusOut = () => {
      requestAnimationFrame(() => {
        this.syncFocusedItemMarker();
      });
    };
    this.handleItemActionChange = (event) => {
      event.stopPropagation();
      this.dispatchEvent(
        new CustomEvent("action-change", {
          detail: event.detail,
          bubbles: true,
          composed: true
        })
      );
    };
  }
  firstUpdated() {
    this.syncLastItemMarker();
  }
  getSlottedItems() {
    return Array.from(
      this.renderRoot.querySelectorAll("slot")
    ).flatMap(
      (slot) => slot.assignedElements({ flatten: true }).filter(
        (el) => el instanceof HTMLElement && el.tagName === "OBC-FORM-ITEM"
      )
    );
  }
  syncLastItemMarker() {
    this.querySelectorAll("obc-form-item").forEach((item) => {
      item.removeAttribute("data-last-group-item");
      item.removeAttribute("data-group-item-first");
      item.removeAttribute("data-group-item-not-first");
      item.removeAttribute("data-group-item-focused");
      item.removeAttribute("data-group-item-before-focused");
    });
    const slottedItems = this.getSlottedItems();
    slottedItems.forEach((item, index) => {
      if (index === 0) {
        item.setAttribute("data-group-item-first", "");
      } else {
        item.setAttribute("data-group-item-not-first", "");
      }
    });
    const lastItem = slottedItems.length > 0 ? slottedItems[slottedItems.length - 1] : void 0;
    if (lastItem) {
      lastItem.setAttribute("data-last-group-item", "");
    }
    this.syncFocusedItemMarker(slottedItems);
  }
  syncFocusedItemMarker(slottedItems = this.getSlottedItems()) {
    slottedItems.forEach((item) => {
      item.removeAttribute("data-group-item-focused");
      item.removeAttribute("data-group-item-before-focused");
    });
    const focusedItem = slottedItems.find(
      (item) => item.matches(":focus-within")
    );
    if (!focusedItem) return;
    focusedItem.setAttribute("data-group-item-focused", "");
    const focusedIndex = slottedItems.indexOf(focusedItem);
    if (focusedIndex > 0) {
      slottedItems[focusedIndex - 1].setAttribute(
        "data-group-item-before-focused",
        ""
      );
    }
  }
  renderTitleContainer() {
    return html`
      <div class="title-container" part="title-container">
        <div class="subtitle" part="subtitle">
          <slot name="subtitle"></slot>
        </div>
        <div class="text" part="text">
          <slot name="text"></slot>
        </div>
      </div>
    `;
  }
  render() {
    const wrapperClassMap = {
      wrapper: true,
      [`type-${this.type}`]: true
    };
    return html`
      <div class=${classMap(wrapperClassMap)} part="wrapper">
        ${this.renderTitleContainer()}
        <div
          class="content-container"
          part="content-container"
          @action-change=${this.handleItemActionChange}
          @focusin=${this.handleFocusIn}
          @focusout=${this.handleFocusOut}
        >
          <slot @slotchange=${this.handleSlotChange}></slot>
        </div>
      </div>
    `;
  }
};
ObcFormGroup.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcFormGroup.prototype, "type", 2);
ObcFormGroup = __decorateClass([
  customElement("obc-form-group")
], ObcFormGroup);
export {
  ObcFormGroup,
  ObcFormGroupType
};
//# sourceMappingURL=form-group.js.map
