import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { customElement } from "../../decorator.js";
import style from "./sequence-step.css.js";
import "../../icons/icon-check-google.js";
import { SequenceLoadingSpinnerProgressionType, SequenceLoadingSpinnerType } from "../sequence-loading-spinner/sequence-loading-spinner.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 SequenceOrientation = /* @__PURE__ */ ((SequenceOrientation2) => {
  SequenceOrientation2["vertical"] = "vertical";
  SequenceOrientation2["horizontal"] = "horizontal";
  return SequenceOrientation2;
})(SequenceOrientation || {});
var SequenceType = /* @__PURE__ */ ((SequenceType2) => {
  SequenceType2["small"] = "small";
  SequenceType2["medium"] = "medium";
  SequenceType2["large"] = "large";
  return SequenceType2;
})(SequenceType || {});
var SequenceStyle = /* @__PURE__ */ ((SequenceStyle2) => {
  SequenceStyle2["regular"] = "regular";
  SequenceStyle2["point"] = "point";
  SequenceStyle2["connector"] = "connector";
  return SequenceStyle2;
})(SequenceStyle || {});
var SequenceValue = /* @__PURE__ */ ((SequenceValue2) => {
  SequenceValue2["notStarted"] = "not-started";
  SequenceValue2["loading"] = "loading";
  SequenceValue2["regular"] = "regular";
  SequenceValue2["next"] = "next";
  SequenceValue2["active"] = "active";
  SequenceValue2["completed"] = "completed";
  return SequenceValue2;
})(SequenceValue || {});
var SequenceVariant = /* @__PURE__ */ ((SequenceVariant2) => {
  SequenceVariant2["toolbarAdd"] = "toolbar-add";
  SequenceVariant2["toolbarCondensedIcon"] = "toolbar-condensed-icon";
  SequenceVariant2["toolbarPrev"] = "toolbar-prev";
  return SequenceVariant2;
})(SequenceVariant || {});
let ObcSequenceStep = class extends LitElement {
  constructor() {
    super(...arguments);
    this.orientation = "horizontal";
    this.type = "medium";
    this.styleType = "regular";
    this.value = "regular";
    this.hasIcon = false;
    this.showStepInputConnector = true;
    this.showStepOutputConnector = true;
    this.inputConnectorExtended = false;
  }
  get isVertical() {
    return this.orientation === "vertical";
  }
  get showInputConnector() {
    return this.showStepInputConnector;
  }
  get showOutputConnector() {
    return this.showStepOutputConnector;
  }
  get isMediumPoint() {
    return this.type === "medium" && this.styleType === "point";
  }
  get isLargePoint() {
    return this.type === "large" && this.styleType === "point";
  }
  get isSpecialLoadingConnector() {
    return this.type === "small" && (this.value === "loading" || this.value === "next" || this.value === "active");
  }
  get shouldShowStateIcon() {
    return this.hasIcon && this.styleType === "regular" && (this.type === "medium" || this.type === "large");
  }
  renderStateIcon() {
    if (!this.shouldShowStateIcon) {
      return nothing;
    }
    if (this.value === "loading") {
      return html`
        <obc-sequence-loading-spinner
          class="state-icon state-icon--spinner"
          part="state-icon"
          aria-hidden="true"
          .type=${this.loadingSpinnerType}
          .progression=${SequenceLoadingSpinnerProgressionType.determinate}
        ></obc-sequence-loading-spinner>
      `;
    }
    if (this.value === "completed") {
      return html`
        <obi-check-google
          class="state-icon state-icon--completed"
          part="state-icon"
          aria-hidden="true"
        ></obi-check-google>
      `;
    }
    return html`
      <span
        class="state-icon state-icon--slot"
        part="state-icon"
        aria-hidden="true"
      >
        <slot name="leading-icon"></slot>
      </span>
    `;
  }
  get shouldUseButtonWrapper() {
    if (this.styleType === "connector") {
      return false;
    }
    if (this.type === "large" && (this.styleType === "regular" || this.styleType === "point")) {
      return true;
    }
    return false;
  }
  get stepAriaCurrent() {
    return this.value === "active" ? "step" : null;
  }
  get stepAriaLabel() {
    const readable = this.value.replace(/-/g, " ");
    return `Sequence step ${readable}`;
  }
  get resolvedAriaLabel() {
    return this.getAttribute("aria-label") ?? this.stepAriaLabel;
  }
  renderSmallIndicator() {
    const showCheck = this.styleType === "regular" && this.value === "completed";
    return html`
      <div class="node" part="node" aria-hidden="true">
        ${this.value === "loading" ? this.renderLoadingSpinner() : showCheck ? html`<obi-check-google
                class="small-check"
                part="state-icon"
                aria-hidden="true"
              ></obi-check-google>` : nothing}
      </div>
    `;
  }
  get loadingSpinnerType() {
    const isPoint = this.styleType === "point";
    if (this.type === "small") {
      return isPoint ? SequenceLoadingSpinnerType.indicatorPoint : SequenceLoadingSpinnerType.indicator;
    }
    if (this.type === "medium") {
      return isPoint ? SequenceLoadingSpinnerType.tagPoint : SequenceLoadingSpinnerType.tag;
    }
    return isPoint ? SequenceLoadingSpinnerType.buttonPoint : SequenceLoadingSpinnerType.button;
  }
  renderLoadingSpinner() {
    return html`
      <obc-sequence-loading-spinner
        aria-hidden="true"
        .type=${this.loadingSpinnerType}
        .progression=${SequenceLoadingSpinnerProgressionType.determinate}
      ></obc-sequence-loading-spinner>
    `;
  }
  renderPointLoadingSpinner() {
    return html`
      <span class="loading-spinner" aria-hidden="true">
        <obc-sequence-loading-spinner
          .type=${this.loadingSpinnerType}
          .progression=${SequenceLoadingSpinnerProgressionType.determinate}
        ></obc-sequence-loading-spinner>
      </span>
    `;
  }
  getWrapperClasses() {
    return {
      wrapper: true,
      [`type-${this.type}`]: true,
      [`style-${this.styleType}`]: true,
      [`value-${this.value}`]: true,
      [`connector-${this.orientation}`]: true,
      "has-icon": this.shouldShowStateIcon,
      "has-input": this.showInputConnector,
      "has-output": this.showOutputConnector,
      "input-extended": this.inputConnectorExtended,
      "label-multi-line": this.classList.contains("label-multi-line")
    };
  }
  renderNodeContent() {
    const isSmall = this.type === "small";
    if (isSmall) {
      return this.renderSmallIndicator();
    }
    if (this.isMediumPoint || this.isLargePoint) {
      const loadingSpinner = this.value === "loading" ? this.renderPointLoadingSpinner() : nothing;
      return html`
        <div
          class="node ${this.type === "medium" && this.styleType === "point" ? "medium-point" : ""}"
          part="node"
        >
          ${loadingSpinner}
          <div class="content" part="label">
            <slot></slot>
          </div>
        </div>
      `;
    }
    return html`
      <div class="node" part="node">
        ${this.renderStateIcon()}
        <div class="content" part="label">
          <slot></slot>
        </div>
      </div>
    `;
  }
  render() {
    const ariaLabel = this.resolvedAriaLabel;
    if (this.styleType === "connector") {
      return html`
        <div
          class=${classMap(this.getWrapperClasses())}
          part="wrapper"
          role="listitem"
          aria-label=${ariaLabel}
          aria-current=${ifDefined(this.stepAriaCurrent ?? void 0)}
        >
          <div class="body" part="body">
            ${this.showInputConnector ? html`<span
                  class="connector input"
                  part="connector input"
                ></span>` : ""}
            ${this.showOutputConnector ? html`<span
                  class="connector output"
                  part="connector output"
                ></span>` : ""}
          </div>
        </div>
      `;
    }
    const wrapperClasses = classMap(this.getWrapperClasses());
    const ariaCurrent = this.stepAriaCurrent ?? void 0;
    const verticalInput = this.isVertical && this.showInputConnector ? html`<span
            class="connector input ${this.isSpecialLoadingConnector ? "loading-special" : ""}"
            part="connector input"
          ></span>` : "";
    const verticalOutput = this.isVertical && this.showOutputConnector ? html`<span class="connector output" part="connector output"></span>` : "";
    const nodeContent = this.renderNodeContent();
    const horizontalInput = !this.isVertical && this.showInputConnector ? html`<span
            class="connector input ${this.isSpecialLoadingConnector ? "loading-special" : ""}"
            part="connector input"
          ></span>` : "";
    const horizontalOutput = !this.isVertical && this.showOutputConnector ? html`<span class="connector output" part="connector output"></span>` : "";
    const contents = html`
      ${(this.isVertical ? verticalInput : horizontalInput) ?? ""}
      <div class="visible-wrapper" part="visible-wrapper">
        <div class="body" part="body">${nodeContent}</div>
      </div>
      ${(this.isVertical ? verticalOutput : horizontalOutput) ?? ""}
    `;
    if (this.shouldUseButtonWrapper) {
      return html`
        <button
          type="button"
          class=${wrapperClasses}
          part="wrapper"
          role="listitem"
          aria-label=${ariaLabel}
          aria-current=${ifDefined(ariaCurrent)}
        >
          ${contents}
        </button>
      `;
    }
    return html`
      <div
        class=${wrapperClasses}
        part="wrapper"
        role="listitem"
        aria-label=${ariaLabel}
        aria-current=${ifDefined(ariaCurrent)}
      >
        ${contents}
      </div>
    `;
  }
};
ObcSequenceStep.styles = unsafeCSS(style);
__decorateClass([
  property({ type: String })
], ObcSequenceStep.prototype, "orientation", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceStep.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceStep.prototype, "styleType", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceStep.prototype, "value", 2);
__decorateClass([
  property({ type: String, reflect: true })
], ObcSequenceStep.prototype, "variant", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceStep.prototype, "hasIcon", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcSequenceStep.prototype, "showStepInputConnector", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcSequenceStep.prototype, "showStepOutputConnector", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceStep.prototype, "inputConnectorExtended", 2);
ObcSequenceStep = __decorateClass([
  customElement("obc-sequence-step")
], ObcSequenceStep);
export {
  ObcSequenceStep,
  SequenceOrientation,
  SequenceStyle,
  SequenceType,
  SequenceValue,
  SequenceVariant
};
//# sourceMappingURL=sequence-step.js.map
