import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import iconStyle from "./icon-button.css.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.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 IconButtonVariant = /* @__PURE__ */ ((IconButtonVariant2) => {
  IconButtonVariant2["normal"] = "normal";
  IconButtonVariant2["raised"] = "raised";
  IconButtonVariant2["flat"] = "flat";
  IconButtonVariant2["integration"] = "integration";
  return IconButtonVariant2;
})(IconButtonVariant || {});
let ObcIconButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.variant = "normal";
    this.activated = false;
    this.cornerLeft = false;
    this.cornerRight = false;
    this.activeColor = false;
    this.wide = false;
    this.disabled = false;
    this.progress = void 0;
    this.hasLabel = false;
  }
  get progressSpinner() {
    if (this.progress === void 0) {
      return nothing;
    }
    if (this.progress === 100) {
      return html`<div class="progress-spinner">
        <svg
          width="40"
          height="40"
          viewBox="0 0 40 40"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="20"
            cy="20"
            r="18"
            stroke="#325B9A"
            stroke-width="4"
            fill="none"
          />
        </svg>
      </div>`;
    }
    const angleRad = this.progress * 0.95 * 3.6 * Math.PI / 180;
    const x = 20 + 18 * Math.sin(angleRad);
    const y = 20 - 18 * Math.cos(angleRad);
    const largeArcFlag = angleRad > Math.PI ? 1 : 0;
    return html`<div class="progress-spinner">
      <svg
        width="40"
        height="40"
        viewBox="0 0 40 40"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="20"
          cy="20"
          r="18"
          stroke="var(--container-backdrop-color)"
          stroke-width="4"
          fill="none"
        />
        <path
          d="M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}"
          stroke="var(--instrument-enhanced-secondary-color)"
          stroke-width="4"
          stroke-linecap="round"
        />
      </svg>
    </div>`;
  }
  render() {
    return html`
      <button
        class=${classMap({
      wrapper: true,
      ["variant-" + this.variant]: true,
      activated: this.activated,
      "corner-left": this.cornerLeft,
      "corner-right": this.cornerRight,
      "active-color": this.activeColor,
      "has-label": this.hasLabel,
      wide: this.wide,
      progress: this.progress !== void 0
    })}
        ?disabled=${this.disabled}
        part="wrapper"
      >
        ${this.progress !== void 0 ? this.progressSpinner : nothing}
        <div class="visible-wrapper" part="visible-wrapper">
          <div class="icon" part="icon">
            <slot></slot>
          </div>
        </div>
        ${this.hasLabel ? html`<div class="label" part="label">
              <slot name="label"></slot>
            </div>` : nothing}
      </button>
    `;
  }
};
ObcIconButton.styles = unsafeCSS(iconStyle);
__decorateClass([
  property({ type: String })
], ObcIconButton.prototype, "variant", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIconButton.prototype, "activated", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIconButton.prototype, "cornerLeft", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIconButton.prototype, "cornerRight", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIconButton.prototype, "activeColor", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIconButton.prototype, "wide", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIconButton.prototype, "disabled", 2);
__decorateClass([
  property({ type: Number })
], ObcIconButton.prototype, "progress", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIconButton.prototype, "hasLabel", 2);
ObcIconButton = __decorateClass([
  customElement("obc-icon-button")
], ObcIconButton);
export {
  IconButtonVariant,
  ObcIconButton
};
//# sourceMappingURL=icon-button.js.map
