import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";
import componentStyle from "./progress-bar.css.js";
import { customElement } from "../../decorator.js";
import "../../icons/icon-placeholder.js";
import { CircularProgressMode } from "../../building-blocks/circular-progress/circular-progress.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 ProgressBarType = /* @__PURE__ */ ((ProgressBarType2) => {
  ProgressBarType2["linear"] = "linear";
  ProgressBarType2["circular"] = "circular";
  return ProgressBarType2;
})(ProgressBarType || {});
var ProgressBarMode = /* @__PURE__ */ ((ProgressBarMode2) => {
  ProgressBarMode2["determinate"] = "determinate";
  ProgressBarMode2["indeterminate"] = "indeterminate";
  return ProgressBarMode2;
})(ProgressBarMode || {});
var CircularProgressState = /* @__PURE__ */ ((CircularProgressState2) => {
  CircularProgressState2["determinate"] = "determinate";
  CircularProgressState2["indeterminate"] = "indeterminate";
  CircularProgressState2["icon"] = "icon";
  return CircularProgressState2;
})(CircularProgressState || {});
let ObcProgressBar = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "linear";
    this.mode = "determinate";
    this.circularState = "determinate";
    this.value = 0;
    this.showValue = false;
    this.showUnit = false;
    this.hasDescription = false;
    this.description = "Description text";
    this.showState = false;
    this.stateLabel = "Open";
    this.progressiveIndeterminate = false;
  }
  render() {
    if (this.type === "circular") {
      return this.renderCircularProgress();
    }
    return this.renderLinearProgress();
  }
  getCircularProgressMode() {
    if (this.progressiveIndeterminate) {
      return CircularProgressMode.progressiveIndeterminate;
    }
    if (this.circularState === "icon") {
      return CircularProgressMode.determinate;
    }
    if (this.circularState === "indeterminate") {
      return CircularProgressMode.indeterminate;
    }
    return CircularProgressMode.determinate;
  }
  renderCircularProgress() {
    const progressValue = this.circularState === "icon" ? 100 : this.value;
    return html`
      <div class="circular-wrapper">
        <obc-circular-progress
          .mode=${this.getCircularProgressMode()}
          .value=${progressValue}
          .viewBoxSize=${48}
          .strokeWidth=${4}
        ></obc-circular-progress>

        <div class="circular-content">${this.renderCircularContent()}</div>
      </div>
    `;
  }
  renderCircularContent() {
    if (this.progressiveIndeterminate) {
      return html`
        <div class="circular-label-container">
          <span class="circular-value">${Math.round(this.value)}</span>
          ${this.showUnit ? html`<span class="circular-unit">%</span>` : nothing}
        </div>
      `;
    }
    if (this.circularState === "determinate") {
      return html`
        <div class="circular-label-container">
          <span class="circular-value">${Math.round(this.value)}</span>
          ${this.showUnit ? html`<span class="circular-unit">%</span>` : nothing}
        </div>
      `;
    } else if (this.circularState === "indeterminate") {
      return html`
        <div class="circular-label-container">
          <span class="circular-value">
            <slot name="icon">...</slot>
          </span>
        </div>
      `;
    } else {
      return html`
        <div class="circular-icon-container">
          <slot name="icon">
            <obi-placeholder></obi-placeholder>
          </slot>
        </div>
      `;
    }
  }
  renderLinearProgress() {
    const clampedValue = Math.max(0, Math.min(100, this.value));
    const progressWidth = `${clampedValue}%`;
    return html`
      <div class="wrapper">
        ${this.showValue ? this.renderLabel() : ""}

        <div class="bar">
          ${this.mode === "determinate" ? html`
                <div
                  class="loaded"
                  style=${styleMap({ width: progressWidth })}
                ></div>
              ` : html` <div class="indeterminate-track"></div> `}
        </div>

        ${this.hasDescription ? html`
              <div class="description-container">
                <span class="description-text">${this.description}</span>
              </div>
            ` : nothing}
      </div>
    `;
  }
  renderLabel() {
    if (this.mode === "determinate") {
      return html`
        <div class="label-container">
          <div class="value-frame">
            <span class="value-number">${Math.round(this.value)}</span>
            <span class="value-unit">%</span>
          </div>
          ${this.showState ? html` <span class="state">${this.stateLabel}</span> ` : nothing}
        </div>
      `;
    } else {
      return html`
        <div class="label-container">
          <span class="loading-text">Loading</span>
        </div>
      `;
    }
  }
};
ObcProgressBar.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcProgressBar.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcProgressBar.prototype, "mode", 2);
__decorateClass([
  property({ type: String })
], ObcProgressBar.prototype, "circularState", 2);
__decorateClass([
  property({ type: Number })
], ObcProgressBar.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressBar.prototype, "showValue", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressBar.prototype, "showUnit", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressBar.prototype, "hasDescription", 2);
__decorateClass([
  property({ type: String })
], ObcProgressBar.prototype, "description", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressBar.prototype, "showState", 2);
__decorateClass([
  property({ type: String })
], ObcProgressBar.prototype, "stateLabel", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressBar.prototype, "progressiveIndeterminate", 2);
ObcProgressBar = __decorateClass([
  customElement("obc-progress-bar")
], ObcProgressBar);
export {
  CircularProgressState,
  ObcProgressBar,
  ProgressBarMode,
  ProgressBarType
};
//# sourceMappingURL=progress-bar.js.map
