import { TWMixin } from "../TWMixin2.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { timelineEditingContext } from "./timelineEditingContext.js";
import { consume } from "@lit/context";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";

//#region src/gui/timeline/TrimHandles.ts
let EFTrimHandles = class EFTrimHandles$1 extends TWMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this.mode = "standalone";
		this.elementId = "";
		this.pixelsPerMs = null;
		this.value = {
			startMs: 0,
			endMs: 0
		};
		this.intrinsicDurationMs = 0;
		this.showOverlays = true;
		this.seekTarget = "";
		this.draggingHandle = null;
		this.dragStartX = 0;
		this.dragStartValue = 0;
		this.handlePointerMove = (e) => {
			if (!this.draggingHandle) return;
			const pxPerMs = this.#effectivePixelsPerMs;
			const deltaMs = (e.clientX - this.dragStartX) / pxPerMs;
			if (this.draggingHandle === "region") {
				const clampedDelta = Math.max(-this.#regionDragStartTrimStart, Math.min(this.#regionDragStartTrimEnd, deltaMs));
				const newValue = {
					startMs: this.#regionDragStartTrimStart + clampedDelta,
					endMs: this.#regionDragStartTrimEnd - clampedDelta
				};
				this.#emitChange("region", newValue);
				return;
			}
			let newValueMs;
			if (this.draggingHandle === "start") {
				newValueMs = Math.max(0, this.dragStartValue + deltaMs);
				newValueMs = Math.min(newValueMs, this.intrinsicDurationMs - (this.trimEndMs || 0));
				this.#emitChange("start", {
					startMs: newValueMs,
					endMs: this.trimEndMs
				});
			} else {
				newValueMs = Math.max(0, this.dragStartValue - deltaMs);
				newValueMs = Math.min(newValueMs, this.intrinsicDurationMs - this.trimStartMs);
				this.#emitChange("end", {
					startMs: this.trimStartMs,
					endMs: newValueMs
				});
			}
		};
		this.handlePointerUp = (e) => {
			const target = e.currentTarget;
			target.releasePointerCapture(e.pointerId);
			target.removeEventListener("pointermove", this.handlePointerMove);
			target.removeEventListener("pointerup", this.handlePointerUp);
			target.removeEventListener("pointercancel", this.handlePointerUp);
			if (this.draggingHandle) this.dispatchEvent(new CustomEvent("trim-change-end", {
				detail: {
					elementId: this.elementId,
					type: this.draggingHandle
				},
				bubbles: true,
				composed: true
			}));
			this.draggingHandle = null;
			if (this.editingContext) this.editingContext.setState({ mode: "idle" });
		};
	}
	static {
		this.styles = [css`
      :host {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
      }

      .handle {
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--trim-handle-width, 8px);
        cursor: ew-resize;
        pointer-events: auto;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .handle-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--trim-handle-color, rgba(255, 255, 255, 0.7));
        transition: background 0.15s ease;
      }

      .handle:hover .handle-inner,
      .handle.dragging .handle-inner {
        background: var(--trim-handle-active-color, #3b82f6);
      }

      .handle-start .handle-inner {
        border-radius: var(--trim-handle-border-radius-start, 2px 0 0 2px);
      }

      .handle-end .handle-inner {
        border-radius: var(--trim-handle-border-radius-end, 0 2px 2px 0);
      }

      /* Track mode: handles pinned at container edges */
      :host([mode="track"]) .handle-start {
        left: -4px;
      }
      :host([mode="track"]) .handle-end {
        right: -4px;
      }

      .handle.dragging {
        cursor: grabbing;
      }

      .trim-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        background: var(--trim-overlay-color, rgba(0, 0, 0, 0.4));
        pointer-events: none;
      }

      .trim-overlay-start {
        left: 0;
      }

      .trim-overlay-end {
        right: 0;
      }

      .region {
        position: absolute;
        top: 0;
        bottom: 0;
        cursor: grab;
        pointer-events: auto;
        z-index: 5;
      }

      .region.dragging {
        cursor: grabbing;
      }

      .selected-border {
        position: absolute;
        left: 0;
        right: 0;
        height: var(--trim-selected-border-width, 0px);
        background: var(--trim-selected-border-color, transparent);
        pointer-events: none;
        z-index: 15;
      }

      .selected-border-top {
        top: 0;
      }

      .selected-border-bottom {
        bottom: 0;
      }
    `];
	}
	get trimStartMs() {
		return this.value.startMs;
	}
	set trimStartMs(v) {
		this.value = {
			...this.value,
			startMs: v
		};
	}
	get trimEndMs() {
		return this.value.endMs;
	}
	set trimEndMs(v) {
		this.value = {
			...this.value,
			endMs: v
		};
	}
	#regionDragStartTrimStart = 0;
	#regionDragStartTrimEnd = 0;
	#resizeObserver = null;
	#hostWidth = 0;
	#emitChange(type, value) {
		this.dispatchEvent(new CustomEvent("trim-change", {
			detail: {
				elementId: this.elementId,
				type,
				value
			},
			bubbles: true,
			composed: true
		}));
		this.#seekToTarget(type, value);
	}
	#seekToTarget(type, value) {
		if (!this.seekTarget) return;
		const target = this.getRootNode().getElementById(this.seekTarget);
		if (!target || !("currentTimeMs" in target)) return;
		if (type === "end") target.currentTimeMs = this.intrinsicDurationMs - value.startMs - value.endMs;
		else target.currentTimeMs = 0;
	}
	get #effectivePixelsPerMs() {
		if (this.pixelsPerMs != null) return this.pixelsPerMs;
		if (this.#hostWidth > 0 && this.intrinsicDurationMs > 0) return this.#hostWidth / this.intrinsicDurationMs;
		return .04;
	}
	connectedCallback() {
		super.connectedCallback();
		this.#resizeObserver = new ResizeObserver((entries) => {
			const entry = entries[0];
			if (!entry) return;
			const width = entry.contentRect.width;
			if (width !== this.#hostWidth) {
				this.#hostWidth = width;
				this.requestUpdate();
			}
		});
		this.#resizeObserver.observe(this);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.#resizeObserver?.disconnect();
		this.#resizeObserver = null;
	}
	handlePointerDown(e, type) {
		e.preventDefault();
		e.stopPropagation();
		this.draggingHandle = type;
		this.dragStartX = e.clientX;
		this.dragStartValue = type === "start" ? this.trimStartMs : this.trimEndMs;
		if (this.editingContext) this.editingContext.setState({
			mode: "trimming",
			elementId: this.elementId,
			handle: type
		});
		const target = e.currentTarget;
		target.setPointerCapture(e.pointerId);
		target.addEventListener("pointermove", this.handlePointerMove);
		target.addEventListener("pointerup", this.handlePointerUp);
		target.addEventListener("pointercancel", this.handlePointerUp);
	}
	handleRegionPointerDown(e) {
		e.preventDefault();
		e.stopPropagation();
		this.draggingHandle = "region";
		this.dragStartX = e.clientX;
		this.#regionDragStartTrimStart = this.trimStartMs;
		this.#regionDragStartTrimEnd = this.trimEndMs;
		if (this.editingContext) this.editingContext.setState({
			mode: "trimming",
			elementId: this.elementId,
			handle: "start"
		});
		const target = e.currentTarget;
		target.setPointerCapture(e.pointerId);
		target.addEventListener("pointermove", this.handlePointerMove);
		target.addEventListener("pointerup", this.handlePointerUp);
		target.addEventListener("pointercancel", this.handlePointerUp);
	}
	render() {
		const pxPerMs = this.#effectivePixelsPerMs;
		const trimStartPx = this.trimStartMs * pxPerMs;
		const trimEndPx = (this.trimEndMs || 0) * pxPerMs;
		const isStandalone = this.mode === "standalone";
		const handleWidthPx = parseFloat(getComputedStyle(this).getPropertyValue("--trim-handle-width")) || 8;
		return html`
      ${this.showOverlays && this.trimStartMs > 0 ? html`<div
            class="trim-overlay trim-overlay-start"
            style=${styleMap({ width: `${trimStartPx}px` })}
          ></div>` : nothing}
      ${this.showOverlays && this.trimEndMs > 0 ? html`<div
            class="trim-overlay trim-overlay-end"
            style=${styleMap({ width: `${trimEndPx}px` })}
          ></div>` : nothing}

      ${isStandalone ? html`
              <div
                class="region ${this.draggingHandle === "region" ? "dragging" : ""}"
                style=${styleMap({
			left: `${trimStartPx + handleWidthPx}px`,
			right: `${trimEndPx + handleWidthPx}px`
		})}
                @pointerdown=${(e) => this.handleRegionPointerDown(e)}
              ></div>
              <div class="selected-border selected-border-top"
                style=${styleMap({
			left: `${trimStartPx}px`,
			right: `${trimEndPx}px`
		})}
              ></div>
              <div class="selected-border selected-border-bottom"
                style=${styleMap({
			left: `${trimStartPx}px`,
			right: `${trimEndPx}px`
		})}
              ></div>
            ` : nothing}

      <div
        class="handle handle-start ${this.draggingHandle === "start" ? "dragging" : ""}"
        style=${isStandalone ? styleMap({ left: `${trimStartPx}px` }) : nothing}
        @pointerdown=${(e) => this.handlePointerDown(e, "start")}
      >
        <div class="handle-inner">
          <slot name="handle-start"></slot>
        </div>
      </div>
      <div
        class="handle handle-end ${this.draggingHandle === "end" ? "dragging" : ""}"
        style=${isStandalone ? styleMap({ right: `${trimEndPx}px` }) : nothing}
        @pointerdown=${(e) => this.handlePointerDown(e, "end")}
      >
        <div class="handle-inner">
          <slot name="handle-end"></slot>
        </div>
      </div>
    `;
	}
};
__decorate([property({
	type: String,
	reflect: true
})], EFTrimHandles.prototype, "mode", void 0);
__decorate([property({
	type: String,
	attribute: "element-id"
})], EFTrimHandles.prototype, "elementId", void 0);
__decorate([property({
	type: Number,
	attribute: "pixels-per-ms"
})], EFTrimHandles.prototype, "pixelsPerMs", void 0);
__decorate([property({ attribute: false })], EFTrimHandles.prototype, "value", void 0);
__decorate([property({
	type: Number,
	attribute: "intrinsic-duration-ms"
})], EFTrimHandles.prototype, "intrinsicDurationMs", void 0);
__decorate([property({
	type: Boolean,
	attribute: "show-overlays"
})], EFTrimHandles.prototype, "showOverlays", void 0);
__decorate([property({
	type: String,
	attribute: "seek-target"
})], EFTrimHandles.prototype, "seekTarget", void 0);
__decorate([consume({
	context: timelineEditingContext,
	subscribe: true
})], EFTrimHandles.prototype, "editingContext", void 0);
__decorate([state()], EFTrimHandles.prototype, "draggingHandle", void 0);
__decorate([state()], EFTrimHandles.prototype, "dragStartX", void 0);
__decorate([state()], EFTrimHandles.prototype, "dragStartValue", void 0);
EFTrimHandles = __decorate([customElement("ef-trim-handles")], EFTrimHandles);

//#endregion
export { EFTrimHandles };
//# sourceMappingURL=TrimHandles.js.map