import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import componentStyle from "./form-item.css.js";
import "../../icons/icon-check-google.js";
import "../../icons/icon-check-mixed.js";
import { CheckboxStatus } from "../checkbox/checkbox.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 ObcFormItemType = /* @__PURE__ */ ((ObcFormItemType2) => {
  ObcFormItemType2["View"] = "view";
  ObcFormItemType2["EnabledActionFirst"] = "enabled-action-first";
  ObcFormItemType2["FilledStatusFirst"] = "filled-status-first";
  ObcFormItemType2["EnabledActionLast"] = "enabled-action-last";
  ObcFormItemType2["FilledStatusLast"] = "filled-status-last";
  ObcFormItemType2["Inactive"] = "inactive";
  return ObcFormItemType2;
})(ObcFormItemType || {});
var ObcFormItemBasicState = /* @__PURE__ */ ((ObcFormItemBasicState2) => {
  ObcFormItemBasicState2["Enabled"] = "enabled";
  ObcFormItemBasicState2["Disabled"] = "disabled";
  ObcFormItemBasicState2["Amplified"] = "amplified";
  return ObcFormItemBasicState2;
})(ObcFormItemBasicState || {});
var ObcFormItemStatusIcon = /* @__PURE__ */ ((ObcFormItemStatusIcon2) => {
  ObcFormItemStatusIcon2["Check"] = "check";
  ObcFormItemStatusIcon2["Dash"] = "dash";
  return ObcFormItemStatusIcon2;
})(ObcFormItemStatusIcon || {});
let ObcFormItem = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "view";
    this.itemId = "";
    this.hasError = false;
    this.errorText = "";
    this.hasIcon = false;
    this.basicState = "enabled";
    this.hasShader = false;
    this.disabled = false;
    this.statusIcon = "check";
    this.actionChecked = false;
    this.handleActionChange = (event) => {
      const { status, disabled } = event.detail;
      this.actionChecked = status === CheckboxStatus.checked;
      const resolvedItemId = this.itemId.trim() || this.id.trim() || null;
      this.dispatchEvent(
        new CustomEvent("action-change", {
          detail: {
            itemId: resolvedItemId,
            status,
            disabled
          },
          bubbles: true,
          composed: true
        })
      );
    };
  }
  get isActionType() {
    return this.type === "enabled-action-first" || this.type === "enabled-action-last";
  }
  get hasBuiltInShader() {
    return this.type === "enabled-action-first" || this.type === "filled-status-first" || this.type === "enabled-action-last" || this.type === "filled-status-last";
  }
  get supportsShaderToggle() {
    return this.type === "view" || this.type === "inactive";
  }
  get resolvedBasicState() {
    switch (this.basicState) {
      case "disabled":
        return "disabled";
      case "amplified":
        return "amplified";
      case "enabled":
      default:
        return "enabled";
    }
  }
  get actionDisabled() {
    return this.disabled || this.type === "inactive" || this.resolvedBasicState === "disabled";
  }
  renderIcon() {
    if (!this.hasIcon) return nothing;
    return html`
      <div class="icon" part="icon">
        <slot name="icon"></slot>
      </div>
    `;
  }
  renderAction() {
    const ariaLabel = this.textContent?.replace(/\s+/g, " ").trim() || "Select item";
    return html`
      <div class="action" part="action">
        <obc-checkbox
          .status=${this.actionChecked ? CheckboxStatus.checked : CheckboxStatus.unchecked}
          .disabled=${this.actionDisabled}
          aria-label=${ariaLabel}
          @change=${this.handleActionChange}
        ></obc-checkbox>
      </div>
    `;
  }
  renderStatus() {
    const icon = this.statusIcon === "dash" ? html`<obi-check-mixed></obi-check-mixed>` : html`<obi-check-google></obi-check-google>`;
    return html` <div class="status" part="status">${icon}</div> `;
  }
  renderLeading() {
    const items = [];
    if (this.type === "enabled-action-first") {
      items.push(this.renderAction());
    }
    if (this.type === "filled-status-first") {
      items.push(this.renderStatus());
    }
    items.push(this.renderIcon());
    const content = items.filter((item) => item !== nothing);
    if (content.length === 0) return nothing;
    return html` <div class="leading" part="leading">${content}</div> `;
  }
  renderTrailing() {
    if (this.type === "enabled-action-last") {
      return html`
        <div class="trailing" part="trailing">${this.renderAction()}</div>
      `;
    }
    if (this.type === "filled-status-last") {
      return html`
        <div class="trailing" part="trailing">${this.renderStatus()}</div>
      `;
    }
    return nothing;
  }
  render() {
    const resolvedHasShader = this.hasBuiltInShader || this.supportsShaderToggle && this.hasShader;
    const wrapperClassMap = {
      wrapper: true,
      [`basic-state-${this.resolvedBasicState}`]: true,
      [`type-${this.type}`]: true,
      "has-error": this.isActionType && this.hasError,
      "has-icon": this.hasIcon,
      "has-shader": resolvedHasShader
    };
    return html`
      <div class=${classMap(wrapperClassMap)} part="wrapper">
        <div class="content-container" part="content-container">
          ${resolvedHasShader ? html`
                <div class="shader-container" part="shader-container">
                  <div class="shader" part="shader"></div>
                  <div class="divider" part="divider"></div>
                </div>
              ` : nothing}
          ${this.renderLeading()}
          <div class="text" part="text">
            <slot></slot>
          </div>
          ${this.renderTrailing()}
        </div>
        ${this.isActionType && this.hasError && this.errorText.trim() !== "" ? html`<div class="error-text" part="error-text">
              ${this.errorText.trim()}
            </div>` : nothing}
      </div>
    `;
  }
};
ObcFormItem.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcFormItem.prototype, "type", 2);
__decorateClass([
  property({ type: String, attribute: "item-id" })
], ObcFormItem.prototype, "itemId", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "has-error" })
], ObcFormItem.prototype, "hasError", 2);
__decorateClass([
  property({ type: String, attribute: "error-text" })
], ObcFormItem.prototype, "errorText", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-icon" })
], ObcFormItem.prototype, "hasIcon", 2);
__decorateClass([
  property({ type: String, attribute: "basic-state" })
], ObcFormItem.prototype, "basicState", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "has-shader" })
], ObcFormItem.prototype, "hasShader", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcFormItem.prototype, "disabled", 2);
__decorateClass([
  property({ type: String, attribute: "status-icon" })
], ObcFormItem.prototype, "statusIcon", 2);
__decorateClass([
  state()
], ObcFormItem.prototype, "actionChecked", 2);
ObcFormItem = __decorateClass([
  customElement("obc-form-item")
], ObcFormItem);
export {
  ObcFormItem,
  ObcFormItemBasicState,
  ObcFormItemStatusIcon,
  ObcFormItemType
};
//# sourceMappingURL=form-item.js.map
