import { efContext } from "./efContext.js";
import { playingContext } from "./playingContext.js";
import { consume } from "@lit/context";
import { LitElement, css, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import _decorate from "@oxc-project/runtime/helpers/decorate";
import { ref } from "lit/directives/ref.js";
let EFScrubber = class EFScrubber$1 extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.playing = false;
		this.lastTimeUpdateProgress = 0;
		this.scrubProgress = 0;
		this.isDragging = false;
		this.boundHandleMouseDown = (e) => {
			this.isDragging = true;
			e.preventDefault();
			this.updateProgress(e);
		};
		this.boundHandleMouseMove = (e) => {
			if (this.isDragging) this.updateProgress(e);
		};
		this.boundHandleMouseUp = () => {
			this.isDragging = false;
		};
	}
	static {
		this.styles = [css`
    :host {
      --ef-scrubber-height: 4px;
      --ef-scrubber-background: rgb(209 213 219);
      --ef-scrubber-progress-color: rgb(37 99 235);
      --ef-scrubber-handle-size: 12px;
      display: block;
      width: 100%;
    }
    
    .scrubber {
      width: 100%;
      height: var(--ef-scrubber-height);
      background: var(--ef-scrubber-background);
      position: relative;
      cursor: pointer;
      border-radius: 2px;
    }

    .progress {
      position: absolute;
      height: 100%;
      background: var(--ef-scrubber-progress-color);
      border-radius: 2px;
    }

    .handle {
      position: absolute;
      width: var(--ef-scrubber-handle-size);
      height: var(--ef-scrubber-handle-size);
      background: var(--ef-scrubber-progress-color);
      border-radius: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      cursor: grab;
    }

    /* Add CSS Shadow Parts */
    ::part(scrubber) { }
    ::part(progress) { }
    ::part(handle) { }
    `];
	}
	updateProgress(e) {
		if (!this.context || !this.scrubberRef) return;
		const rect = this.scrubberRef.getBoundingClientRect();
		const x = e.clientX - rect.left;
		const progress = Math.max(0, Math.min(1, x / rect.width));
		this.scrubProgress = progress;
		this.context.currentTimeMs = progress * (this.context.targetTimegroup?.durationMs ?? 0);
	}
	render() {
		const displayProgress = this.isDragging ? this.scrubProgress : this.lastTimeUpdateProgress;
		return html`
      <div 
        ${ref((el) => {
			this.scrubberRef = el;
		})}
        part="scrubber"
        class="scrubber"
        @mousedown=${this.boundHandleMouseDown}
      >
        <div class="progress" style="width: ${displayProgress * 100}%"></div>
        <div class="handle" style="left: ${displayProgress * 100}%"></div>
      </div>
    `;
	}
	connectedCallback() {
		super.connectedCallback();
		window.addEventListener("mouseup", this.boundHandleMouseUp);
		window.addEventListener("mousemove", this.boundHandleMouseMove);
		if (this.context) this.context.addEventListener("timeupdate", (e) => {
			this.lastTimeUpdateProgress = e.detail.progress;
		});
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		window.removeEventListener("mouseup", this.boundHandleMouseUp);
		window.removeEventListener("mousemove", this.boundHandleMouseMove);
	}
};
_decorate([consume({
	context: efContext,
	subscribe: true
})], EFScrubber.prototype, "context", void 0);
_decorate([consume({
	context: playingContext,
	subscribe: true
})], EFScrubber.prototype, "playing", void 0);
_decorate([state()], EFScrubber.prototype, "lastTimeUpdateProgress", void 0);
_decorate([state()], EFScrubber.prototype, "scrubProgress", void 0);
_decorate([state()], EFScrubber.prototype, "isDragging", void 0);
EFScrubber = _decorate([customElement("ef-scrubber")], EFScrubber);
export { EFScrubber };
