import { unsafeCSS, LitElement, html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { property } from "lit/decorators.js";
import { customElement } from "../../decorator.js";
import style from "./sequence-item.css.js";
import { SequenceType, SequenceStyle, SequenceValue, SequenceOrientation } from "../sequence-step/sequence-step.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 SequenceItemOrientation = /* @__PURE__ */ ((SequenceItemOrientation2) => {
  SequenceItemOrientation2["vertical"] = "vertical";
  SequenceItemOrientation2["horizontal"] = "horizontal";
  return SequenceItemOrientation2;
})(SequenceItemOrientation || {});
var SequenceItemLabelType = /* @__PURE__ */ ((SequenceItemLabelType2) => {
  SequenceItemLabelType2["regular"] = "regular";
  SequenceItemLabelType2["multiLine"] = "multi-line";
  SequenceItemLabelType2["small"] = "small";
  return SequenceItemLabelType2;
})(SequenceItemLabelType || {});
var SequenceItemState = /* @__PURE__ */ ((SequenceItemState2) => {
  SequenceItemState2["enabled"] = "enabled";
  SequenceItemState2["active"] = "active";
  return SequenceItemState2;
})(SequenceItemState || {});
let ObcSequenceItem = class extends LitElement {
  constructor() {
    super(...arguments);
    this.orientation = "vertical";
    this.labelType = "regular";
    this.state = "enabled";
    this.title = "";
    this.hasSubtitle = false;
    this.subtitle = "";
    this.hasDescription = false;
    this.description = "";
    this.hasStamp = false;
    this.hasTimeStamp = false;
    this.timeStamp = "";
    this.hasDistanceStamp = false;
    this.distanceStamp = "";
    this.stepLabel = "";
    this.stepType = SequenceType.small;
    this.stepStyle = SequenceStyle.point;
    this.showStepInputConnector = true;
    this.showStepOutputConnector = true;
    this.stepHasIcon = false;
  }
  get hasMeta() {
    if (!this.hasStamp) {
      return false;
    }
    return this.hasTimeStamp || this.hasDistanceStamp;
  }
  get resolvedStepValue() {
    return SequenceValue.notStarted;
  }
  get resolvedStepOrientation() {
    return this.orientation === "vertical" ? SequenceOrientation.vertical : SequenceOrientation.horizontal;
  }
  get resolvedStepLabel() {
    if (this.stepLabel) return this.stepLabel;
    if (this.title) return this.title;
    return "Label";
  }
  get shouldExtendInputConnector() {
    return this.hasDescription;
  }
  get shouldInlineDescription() {
    return this.orientation === "vertical" && this.hasDescription;
  }
  renderStep() {
    const stepClasses = {
      "label-multi-line": this.labelType === "multi-line"
      /* multiLine */
    };
    return html`
      <obc-sequence-step
        class=${classMap(stepClasses)}
        .type=${SequenceType.small}
        .styleType=${SequenceStyle.point}
        .value=${this.resolvedStepValue}
        .orientation=${this.resolvedStepOrientation}
        .hasIcon=${false}
        .inputConnectorExtended=${this.shouldExtendInputConnector}
      >
        ${this.resolvedStepLabel}
      </obc-sequence-step>
    `;
  }
  renderTitleRow() {
    return html`
      <div class="title-row" part="title-row content">
        <slot name="title">
          <div class="title-block" part="title-block">
            <div class="title" part="title">${this.title}</div>
            ${this.hasSubtitle ? html`<div class="subtitle" part="subtitle">
                  ${this.subtitle}
                </div>` : ""}
            ${this.shouldInlineDescription ? html`<div class="description" part="description">
                  ${this.description}
                </div>` : ""}
          </div>
        </slot>
      </div>
    `;
  }
  renderDescription() {
    if (!this.hasDescription || this.shouldInlineDescription) return "";
    return html`
      <slot name="description">
        <div class="description" part="description content">
          ${this.description}
        </div>
      </slot>
    `;
  }
  renderMeta() {
    if (!this.hasMeta) return "";
    return html`
      <slot name="meta">
        <div class="meta-row" part="meta-row">
          ${this.hasTimeStamp ? html`<div class="meta timestamp" part="timestamp">
                ${this.timeStamp}
              </div>` : ""}
          ${this.hasDistanceStamp ? html`<div class="meta distance" part="distance">
                ${this.distanceStamp}
              </div>` : ""}
        </div>
      </slot>
    `;
  }
  render() {
    const wrapperClassMap = {
      "sequence-item__wrapper": true,
      [`orientation-${this.orientation}`]: true,
      ...this.labelType ? { [`label-${this.labelType}`]: true } : { "label-regular": true },
      ...this.state ? { [`state-${this.state}`]: true } : {},
      ...this.stepType ? { [`step-size-${this.stepType}`]: true } : {},
      "sequence-item__wrapper--multi-line": this.labelType === "multi-line",
      "sequence-item__wrapper--has-description": this.hasDescription,
      "sequence-item__wrapper--no-input-connector": !this.showStepInputConnector,
      "sequence-item__wrapper--no-output-connector": !this.showStepOutputConnector
    };
    const meta = this.renderMeta();
    const textContent = html`${this.renderTitleRow()}
    ${this.renderDescription()}
    ${this.orientation === "horizontal" ? meta : null}`;
    return html`
      <div class=${classMap(wrapperClassMap)} part="wrapper">
        ${this.orientation === "vertical" ? meta : null}
        <div class="step-wrapper" part="indicator">
          <slot name="step">${this.renderStep()}</slot>
        </div>
        ${this.orientation === "horizontal" ? html`<div class="content" part="content">${textContent}</div>` : textContent}
      </div>
    `;
  }
};
ObcSequenceItem.styles = unsafeCSS(style);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "orientation", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "labelType", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "state", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "title", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceItem.prototype, "hasSubtitle", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "subtitle", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceItem.prototype, "hasDescription", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "description", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceItem.prototype, "hasStamp", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceItem.prototype, "hasTimeStamp", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "timeStamp", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceItem.prototype, "hasDistanceStamp", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "distanceStamp", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "stepLabel", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "stepType", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "stepStyle", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceItem.prototype, "stepValue", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcSequenceItem.prototype, "showStepInputConnector", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcSequenceItem.prototype, "showStepOutputConnector", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceItem.prototype, "stepHasIcon", 2);
ObcSequenceItem = __decorateClass([
  customElement("obc-sequence-item")
], ObcSequenceItem);
export {
  ObcSequenceItem,
  SequenceItemLabelType,
  SequenceItemOrientation,
  SequenceItemState
};
//# sourceMappingURL=sequence-item.js.map
