import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import componentStyle from "./progress-button.css.js";
import { customElement } from "../../decorator.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 ProgressButtonType = /* @__PURE__ */ ((ProgressButtonType2) => {
  ProgressButtonType2["Linear"] = "linear";
  ProgressButtonType2["Circular"] = "circular";
  return ProgressButtonType2;
})(ProgressButtonType || {});
var ButtonStyle = /* @__PURE__ */ ((ButtonStyle2) => {
  ButtonStyle2["Regular"] = "regular";
  ButtonStyle2["Flat"] = "flat";
  ButtonStyle2["Raised"] = "raised";
  return ButtonStyle2;
})(ButtonStyle || {});
var ProgressMode = /* @__PURE__ */ ((ProgressMode2) => {
  ProgressMode2["Determinate"] = "determinate";
  ProgressMode2["Indeterminate"] = "indeterminate";
  return ProgressMode2;
})(ProgressMode || {});
let ObcProgressButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "linear";
    this.buttonStyle = "regular";
    this.mode = "determinate";
    this.value = 0;
    this.label = "";
    this.disabled = false;
    this.showProgress = false;
    this.hasLeadingIcon = false;
    this.hasTrailingIcon = false;
    this.hasAlert = false;
    this.progressiveIndeterminate = false;
    this.showLabel = false;
  }
  render() {
    if (this.type === "circular") {
      return this.renderCircularButton();
    }
    return this.renderLinearButton();
  }
  renderLinearButton() {
    const wrapperClasses = {
      wrapper: true,
      "linear-wrapper": true,
      [this.buttonStyle]: true,
      disabled: this.disabled
    };
    const visibleWrapperClasses = {
      "visible-wrapper": true,
      alert: this.hasAlert
    };
    return html`
      <button
        class="${classMap(wrapperClasses)}"
        ?disabled="${this.disabled}"
        @click="${this.handleClick}"
        aria-label="${this.label}"
        aria-busy="${this.showProgress && this.mode === "indeterminate"}"
        aria-valuenow="${this.showProgress && this.mode === "determinate" ? this.value : nothing}"
        aria-valuemin="${this.showProgress && this.mode === "determinate" ? 0 : nothing}"
        aria-valuemax="${this.showProgress && this.mode === "determinate" ? 100 : nothing}"
        role="button"
      >
        ${this.showProgress ? this.renderLinearProgress() : nothing}

        <div class="${classMap(visibleWrapperClasses)}">
          <div class="linear-label-icon-container">
            ${this.hasLeadingIcon ? html`<slot name="leading-icon"></slot>` : nothing}
            <span class="button-text">${this.label}</span>
          </div>
          ${this.hasTrailingIcon ? html`<slot name="trailing-icon"></slot>` : nothing}
        </div>
      </button>
    `;
  }
  renderLinearProgress() {
    const clampedValue = Math.max(0, Math.min(100, this.value));
    const progressWidth = `${clampedValue}%`;
    return html`
      <div class="linear-progress-container">
        <div class="linear-progress-bar">
          ${this.mode === "determinate" ? html`
                <div
                  class="linear-progress-fill"
                  style=${styleMap({ width: progressWidth })}
                ></div>
              ` : html` <div class="linear-progress-indeterminate"></div> `}
        </div>
      </div>
    `;
  }
  renderCircularButton() {
    const wrapperClasses = {
      wrapper: true,
      "circular-wrapper": true,
      disabled: this.disabled,
      "with-label": this.showLabel
    };
    return html`
      <button
        class="${classMap(wrapperClasses)}"
        ?disabled="${this.disabled}"
        @click="${this.handleClick}"
        aria-label="${this.label}"
        aria-busy="${this.showProgress && this.getCircularProgressMode() !== CircularProgressMode.determinate}"
        aria-valuenow="${this.showProgress && this.getCircularProgressMode() === CircularProgressMode.determinate ? this.value : nothing}"
        aria-valuemin="${this.showProgress && this.getCircularProgressMode() === CircularProgressMode.determinate ? 0 : nothing}"
        aria-valuemax="${this.showProgress && this.getCircularProgressMode() === CircularProgressMode.determinate ? 100 : nothing}"
        role="button"
      >
        <div class="circular-icon-container">
          ${this.showProgress ? this.renderCircularProgress() : nothing}

          <div class="circular-visible-wrapper">
            <slot name="icon"></slot>
          </div>
        </div>

        ${this.showLabel ? html`<div class="circular-label">${this.label}</div>` : nothing}
      </button>
    `;
  }
  getCircularProgressMode() {
    if (this.progressiveIndeterminate) {
      return CircularProgressMode.progressiveIndeterminate;
    }
    if (this.mode === "determinate") {
      return CircularProgressMode.determinate;
    }
    return CircularProgressMode.indeterminate;
  }
  renderCircularProgress() {
    return html`
      <div class="circular-progress-svg-container">
        ${this.hasAlert ? html`<svg
              class="circular-alert-svg"
              viewBox="0 0 42 42"
              preserveAspectRatio="xMidYMid meet"
            >
              <circle
                class="circular-alert-ring"
                cx="21"
                cy="21"
                r="20"
                stroke-width="2"
                fill="none"
              />
            </svg>` : nothing}
        <obc-circular-progress
          .mode=${this.getCircularProgressMode()}
          .value=${this.value}
          .viewBoxSize=${42}
          .strokeWidth=${4}
          .padding=${1}
        ></obc-circular-progress>
      </div>
    `;
  }
  handleClick(e) {
    if (this.disabled) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }
    const event = new CustomEvent("obc-click", {
      detail: {
        value: this.value
      },
      composed: true
    });
    this.dispatchEvent(event);
  }
};
ObcProgressButton.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcProgressButton.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcProgressButton.prototype, "buttonStyle", 2);
__decorateClass([
  property({ type: String })
], ObcProgressButton.prototype, "mode", 2);
__decorateClass([
  property({ type: Number })
], ObcProgressButton.prototype, "value", 2);
__decorateClass([
  property({ type: String })
], ObcProgressButton.prototype, "label", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressButton.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressButton.prototype, "showProgress", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressButton.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressButton.prototype, "hasTrailingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressButton.prototype, "hasAlert", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressButton.prototype, "progressiveIndeterminate", 2);
__decorateClass([
  property({ type: Boolean })
], ObcProgressButton.prototype, "showLabel", 2);
ObcProgressButton = __decorateClass([
  customElement("obc-progress-button")
], ObcProgressButton);
export {
  ButtonStyle,
  ObcProgressButton,
  ProgressButtonType,
  ProgressMode
};
//# sourceMappingURL=progress-button.js.map
