import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property, state, query } from "lit/decorators.js";
import componentStyle from "./slide-button.css.js";
import { classMap } from "lit/directives/class-map.js";
import "../../icons/icon-chevron-double-right-google.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;
};
let ObcSlideButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.hasLeadingIcon = false;
    this.hugContent = false;
    this.autoDisable = false;
    this.dragging = false;
    this.animatingBack = false;
    this.dragStartX = 0;
    this.dragCurrentX = 0;
    this.dragOffset = 0;
    this.trackWidth = 0;
    this.buttonWidth = 0;
    this.slideThreshold = 0.8;
    this.onDragStart = (e) => {
      if (this.disabled) return;
      this.dragging = true;
      if (e instanceof MouseEvent) {
        this.dragStartX = e.clientX;
      } else {
        this.dragStartX = e.touches[0].clientX;
      }
      this.dragCurrentX = this.dragStartX;
      this.trackWidth = this.visualContainerRef?.offsetWidth || 0;
      this.buttonWidth = this.buttonRef?.offsetWidth || 0;
      window.addEventListener("mousemove", this.onDragMove);
      window.addEventListener("touchmove", this.onDragMove, { passive: false });
      window.addEventListener("mouseup", this.onDragEnd);
      window.addEventListener("touchend", this.onDragEnd);
    };
    this.onDragMove = (e) => {
      if (!this.dragging) return;
      let clientX;
      if (e instanceof MouseEvent) {
        clientX = e.clientX;
      } else {
        clientX = e.touches[0].clientX;
        e.preventDefault();
      }
      this.dragCurrentX = clientX;
      this.dragOffset = this.dragCurrentX - this.dragStartX;
      this.requestUpdate();
    };
    this.onDragEnd = () => {
      if (!this.dragging) return;
      this.dragging = false;
      this.animatingBack = true;
      const maxOffset = this.trackWidth - this.buttonWidth;
      const dragProgress = Math.max(0, this.dragOffset) / maxOffset;
      if (dragProgress >= this.slideThreshold) {
        this.dispatchEvent(new CustomEvent("slide", { detail: { completed: true } }));
        if (this.autoDisable) {
          const resetDuration2 = getComputedStyle(this).getPropertyValue(
            "--slide-button-reset-duration"
          );
          const durationMs2 = parseFloat(resetDuration2) * 1e3;
          setTimeout(() => {
            this.disabled = true;
            this.requestUpdate();
          }, durationMs2);
        }
      }
      this.dragOffset = 0;
      this.requestUpdate();
      const resetDuration = getComputedStyle(this).getPropertyValue(
        "--slide-button-reset-duration"
      );
      const durationMs = parseFloat(resetDuration) * 1e3;
      setTimeout(() => {
        this.animatingBack = false;
        this.requestUpdate();
      }, durationMs);
      window.removeEventListener("mousemove", this.onDragMove);
      window.removeEventListener("touchmove", this.onDragMove);
      window.removeEventListener("mouseup", this.onDragEnd);
      window.removeEventListener("touchend", this.onDragEnd);
    };
  }
  getButtonStyle() {
    if (!this.dragging && !this.animatingBack) return "";
    const maxOffset = this.trackWidth - this.buttonWidth + 1;
    let left = Math.max(-1, this.dragOffset - 1);
    left = Math.min(left, maxOffset - 1);
    return `left: ${left}px;`;
  }
  firstUpdated() {
    const resizeObserver = new ResizeObserver(() => {
      this.trackWidth = this.visualContainerRef?.offsetWidth || 0;
      this.buttonWidth = this.buttonRef?.offsetWidth || 0;
    });
    if (this.visualContainerRef)
      resizeObserver.observe(this.visualContainerRef);
    if (this.buttonRef) resizeObserver.observe(this.buttonRef);
  }
  render() {
    const containerClasses = {
      "slide-button-container": true,
      dragging: this.dragging,
      "animating-back": this.animatingBack,
      disabled: this.disabled,
      "hug-content": this.hugContent
    };
    const visualClasses = {
      "visual-container": true
    };
    const buttonClasses = {
      "slide-button": true,
      "has-leading-icon": this.hasLeadingIcon
    };
    return html`
      <div
        class=${classMap(containerClasses)}
        role="button"
        aria-disabled=${this.disabled}
      >
        <div class=${classMap(visualClasses)}>
          <div
            class="button-touch-target"
            style=${this.getButtonStyle()}
            @mousedown=${this.onDragStart}
            @touchstart=${this.onDragStart}
          >
            <div class=${classMap(buttonClasses)}>
              <div class="button-content">
                ${this.hasLeadingIcon ? html`
                      <div class="leading-icon">
                        <slot name="leading-icon"></slot>
                      </div>
                    ` : nothing}
                <div class="button-label">
                  <slot name="label"></slot>
                </div>
              </div>
            </div>
          </div>
          <div class="trailing-icon-area">
            <obi-chevron-double-right-google
              class="trailing-icon"
            ></obi-chevron-double-right-google>
          </div>
        </div>
      </div>
    `;
  }
};
ObcSlideButton.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: Boolean })
], ObcSlideButton.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSlideButton.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSlideButton.prototype, "hugContent", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSlideButton.prototype, "autoDisable", 2);
__decorateClass([
  state()
], ObcSlideButton.prototype, "dragging", 2);
__decorateClass([
  state()
], ObcSlideButton.prototype, "animatingBack", 2);
__decorateClass([
  query(".slide-button")
], ObcSlideButton.prototype, "buttonRef", 2);
__decorateClass([
  query(".visual-container")
], ObcSlideButton.prototype, "visualContainerRef", 2);
ObcSlideButton = __decorateClass([
  customElement("obc-slide-button")
], ObcSlideButton);
export {
  ObcSlideButton
};
//# sourceMappingURL=slide-button.js.map
