import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import componentStyle from "./sequence-card.css.js";
import { customElement } from "../../decorator.js";
import { SequenceValue, SequenceStyle, SequenceType, SequenceOrientation } from "../sequence-step/sequence-step.js";
import "../../icons/icon-placeholder.js";
import "../button/button.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 ObcSequenceCardSize = /* @__PURE__ */ ((ObcSequenceCardSize2) => {
  ObcSequenceCardSize2["Small"] = "small";
  ObcSequenceCardSize2["Regular"] = "regular";
  return ObcSequenceCardSize2;
})(ObcSequenceCardSize || {});
var ObcSequenceCardTitleType = /* @__PURE__ */ ((ObcSequenceCardTitleType2) => {
  ObcSequenceCardTitleType2["Single"] = "single";
  ObcSequenceCardTitleType2["TwoLine"] = "two-line";
  ObcSequenceCardTitleType2["Description"] = "description";
  return ObcSequenceCardTitleType2;
})(ObcSequenceCardTitleType || {});
var ObcSequenceCardProgressType = /* @__PURE__ */ ((ObcSequenceCardProgressType2) => {
  ObcSequenceCardProgressType2["Centered"] = "centered";
  ObcSequenceCardProgressType2["LeftSide"] = "left-side";
  return ObcSequenceCardProgressType2;
})(ObcSequenceCardProgressType || {});
var ObcSequenceCardState = /* @__PURE__ */ ((ObcSequenceCardState2) => {
  ObcSequenceCardState2["Active"] = "active";
  ObcSequenceCardState2["Flat"] = "flat";
  ObcSequenceCardState2["Enhanced"] = "enhanced";
  return ObcSequenceCardState2;
})(ObcSequenceCardState || {});
let ObcSequenceCard = class extends LitElement {
  constructor() {
    super();
    this.size = "regular";
    this.titleType = "single";
    this.progressType = "centered";
    this.state = "active";
    this.fullWidth = false;
    this.fullHeight = false;
    this.horizontal = false;
    this.showConnector = false;
    this.hasLeadingIcon = false;
    this.cardTitle = "Title";
    this.subtitle = "Subtitle";
    this.hasTimeStamp = false;
    this.timeLabel = "TWOL";
    this.time = "00:00:00";
    this.hasContent = false;
    this.hasActions = false;
    this.progressLabel = "1";
    this.progressValue = SequenceValue.regular;
    this.leftTime = "00:00";
    this.showConnector = true;
  }
  get showSubtitle() {
    return this.titleType !== "single" && this.subtitle.trim() !== "";
  }
  get isLeftSide() {
    return this.progressType === "left-side";
  }
  get stepIndicatorStyle() {
    return this.size === "regular" ? SequenceStyle.regular : SequenceStyle.point;
  }
  get stepIndicatorValue() {
    return SequenceValue.notStarted;
  }
  get stepIndicatorLabel() {
    const allowLabelForSingle = this.titleType === "single" && this.indicatorTypeOverride !== void 0;
    if (this.progressType !== "centered" || this.titleType === "single" && !allowLabelForSingle) {
      return "";
    }
    const label = this.progressLabel.trim();
    return label === "" ? "1" : label;
  }
  get verticalConnectorType() {
    return SequenceType.small;
  }
  get horizontalConnectorType() {
    return this.size === "small" ? SequenceType.small : SequenceType.medium;
  }
  getResolvedIndicatorType(isCenteredMultiLine) {
    if (this.size === "small") {
      return isCenteredMultiLine ? SequenceType.medium : SequenceType.small;
    }
    if (this.progressType === "left-side") {
      return SequenceType.small;
    }
    return isCenteredMultiLine ? SequenceType.large : SequenceType.small;
  }
  renderStepIndicator() {
    const isCenteredMultiLine = this.progressType === "centered" && (this.titleType === "two-line" || this.titleType === "description");
    const indicatorType = this.indicatorTypeOverride ?? this.getResolvedIndicatorType(isCenteredMultiLine);
    const indicatorStyle = this.indicatorStyleOverride ?? (isCenteredMultiLine ? SequenceStyle.point : this.stepIndicatorStyle);
    return html`
      <obc-sequence-step
        .type=${indicatorType}
        .styleType=${indicatorStyle}
        .value=${this.stepIndicatorValue}
        .showStepInputConnector=${false}
        .showStepOutputConnector=${false}
        .hasIcon=${false}
      >
        ${this.stepIndicatorLabel}
      </obc-sequence-step>
    `;
  }
  render() {
    const classes = {
      "sequence-card": true,
      [`size-${this.size}`]: true,
      [`title-${this.titleType}`]: true,
      [`progress-${this.progressType}`]: true,
      [`state-${this.state}`]: true,
      "full-width": this.fullWidth,
      "full-height": this.fullHeight,
      "is-vertical": !this.horizontal,
      "is-horizontal": this.horizontal,
      "has-leading-icon": this.hasLeadingIcon,
      "has-time-stamp": this.hasTimeStamp,
      "has-content": this.hasContent,
      "has-actions": this.hasActions
    };
    const showLeftRail = this.isLeftSide && !this.horizontal;
    const showLeftRailHorizontal = this.isLeftSide && this.horizontal;
    const showCenteredConnector = this.progressType === "centered" && !this.horizontal && this.showConnector;
    const showHorizontalConnector = this.horizontal && !this.isLeftSide && this.showConnector;
    const verticalLeftRail = html`
      <div class="vertical-progress-container">
        ${this.hasTimeStamp ? html`
              <div class="stamp-container">
                <slot name="left-time-stamp">${this.leftTime}</slot>
              </div>
            ` : nothing}
        <div class="progress-container">
          <obc-sequence-step
            .orientation=${SequenceOrientation.vertical}
            .type=${this.getResolvedIndicatorType(false)}
            .styleType=${this.stepIndicatorStyle}
            .value=${this.stepIndicatorValue}
            .showStepInputConnector=${true}
            .showStepOutputConnector=${true}
            .inputConnectorExtended=${true}
            .hasIcon=${false}
          >
            ${this.stepIndicatorLabel}
          </obc-sequence-step>
        </div>
      </div>
    `;
    const horizontalLeftRail = html`
      <div class="horizontal-left-rail">
        <obc-sequence-step
          .orientation=${SequenceOrientation.horizontal}
          .type=${this.getResolvedIndicatorType(false)}
          .styleType=${this.stepIndicatorStyle}
          .value=${this.stepIndicatorValue}
          .showStepInputConnector=${true}
          .showStepOutputConnector=${true}
          .hasIcon=${false}
        >
          ${this.stepIndicatorLabel}
        </obc-sequence-step>
      </div>
    `;
    return html`
      <div class=${classMap(classes)}>
        ${showLeftRail ? verticalLeftRail : nothing}
        <div class="card-container">
          ${this.horizontal ? html`
                <div class="card-row">
                  ${showLeftRailHorizontal ? horizontalLeftRail : nothing}
                  <div class="card">
                    <div class="header-row">
                      <div class="title-container" part="title-container">
                        ${showLeftRail || showLeftRailHorizontal ? nothing : this.renderStepIndicator()}
                        <div class="content-container-placeholder">
                          ${this.hasLeadingIcon ? html`
                                <div class="leading-icon">
                                  <slot name="leading-icon"></slot>
                                </div>
                              ` : nothing}
                          <div class="text-container">
                            <div class="text-wrapper">
                              <div class="title-text" part="title-text">
                                <slot name="title">${this.cardTitle}</slot>
                              </div>
                              ${this.showSubtitle ? html`
                                    <div class="subtitle-text">
                                      <slot name="subtitle"
                                        >${this.subtitle}</slot
                                      >
                                    </div>
                                  ` : nothing}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="header-right">
                        ${this.hasTimeStamp ? html`
                              <div class="time-stamp">
                                <slot name="time-stamp">
                                  <div class="time-label">
                                    ${this.timeLabel}
                                  </div>
                                  <div class="time-value">${this.time}</div>
                                </slot>
                              </div>
                            ` : nothing}
                        <slot name="header-actions"></slot>
                      </div>
                    </div>
                    ${this.hasContent ? html`
                          <div class="content-container-placeholder">
                            <slot></slot>
                          </div>
                        ` : nothing}
                    ${this.hasActions ? html`
                          <div class="action-container" part="action-container">
                            <slot name="actions"></slot>
                          </div>
                        ` : nothing}
                  </div>

                  ${showHorizontalConnector ? html`
                        <div class="horizontal-progress-container">
                          <obc-sequence-step
                            .orientation=${SequenceOrientation.horizontal}
                            .type=${this.horizontalConnectorType}
                            .styleType=${SequenceStyle.connector}
                            .value=${this.progressValue}
                            .showStepInputConnector=${false}
                            .showStepOutputConnector=${true}
                            .hasIcon=${false}
                          ></obc-sequence-step>
                        </div>
                      ` : nothing}
                </div>
              ` : html`
                <div class="card">
                  <div class="header-row">
                    <div class="title-container" part="title-container">
                      ${showLeftRail || showLeftRailHorizontal ? nothing : this.renderStepIndicator()}
                      <div class="content-container-placeholder">
                        ${this.hasLeadingIcon ? html`
                              <div class="leading-icon">
                                <slot name="leading-icon"></slot>
                              </div>
                            ` : nothing}
                        <div class="text-container">
                          <div class="text-wrapper">
                            <div class="title-text" part="title-text">
                              <slot name="title">${this.cardTitle}</slot>
                            </div>
                            ${this.showSubtitle ? html`
                                  <div class="subtitle-text">
                                    <slot name="subtitle"
                                      >${this.subtitle}</slot
                                    >
                                  </div>
                                ` : nothing}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="header-right">
                      ${this.hasTimeStamp ? html`
                            <div class="time-stamp">
                              <slot name="time-stamp">
                                <div class="time-label">${this.timeLabel}</div>
                                <div class="time-value">${this.time}</div>
                              </slot>
                            </div>
                          ` : nothing}
                      <slot name="header-actions"></slot>
                    </div>
                  </div>
                  ${this.hasContent ? html`
                        <div class="content-container-placeholder">
                          <slot></slot>
                        </div>
                      ` : nothing}
                  ${this.hasActions ? html`
                        <div class="action-container" part="action-container">
                          <slot name="actions"></slot>
                        </div>
                      ` : nothing}
                </div>
              `}
        </div>
        ${showCenteredConnector ? html`
              <div class="vertical-progress-container is-centered">
                <obc-sequence-step
                  .orientation=${SequenceOrientation.vertical}
                  .type=${this.verticalConnectorType}
                  .styleType=${SequenceStyle.connector}
                  .value=${this.progressValue}
                  .showStepInputConnector=${true}
                  .showStepOutputConnector=${true}
                  .inputConnectorExtended=${true}
                  .hasIcon=${false}
                ></obc-sequence-step>
              </div>
            ` : nothing}
      </div>
    `;
  }
};
ObcSequenceCard.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "size", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "titleType", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "progressType", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "state", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceCard.prototype, "fullWidth", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceCard.prototype, "fullHeight", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceCard.prototype, "horizontal", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceCard.prototype, "showConnector", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceCard.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "cardTitle", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "subtitle", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceCard.prototype, "hasTimeStamp", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "timeLabel", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "time", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceCard.prototype, "hasContent", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSequenceCard.prototype, "hasActions", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "progressLabel", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "progressValue", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "leftTime", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "indicatorTypeOverride", 2);
__decorateClass([
  property({ type: String })
], ObcSequenceCard.prototype, "indicatorStyleOverride", 2);
ObcSequenceCard = __decorateClass([
  customElement("obc-sequence-card")
], ObcSequenceCard);
export {
  ObcSequenceCard,
  ObcSequenceCardProgressType,
  ObcSequenceCardSize,
  ObcSequenceCardState,
  ObcSequenceCardTitleType
};
//# sourceMappingURL=sequence-card.js.map
