import { TWMixin } from "../../TWMixin2.js";
import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { focusContext } from "../../focusContext.js";
import { focusedElementContext } from "../../focusedElementContext.js";
import { EFAudio } from "../../../elements/EFAudio.js";
import { EFVideo } from "../../../elements/EFVideo.js";
import { EFImage } from "../../../elements/EFImage.js";
import { EFText } from "../../../elements/EFText.js";
import { ICONS, phosphorIcon } from "../../icons.js";
import { getElementTypeColor } from "../../theme.js";
import "../TrimHandles.js";
import { EFTimegroup } from "../../../elements/EFTimegroup.js";
import { consume } from "@lit/context";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";

//#region src/gui/timeline/tracks/TrackItem.ts
var ElementTrackController = class {
	constructor(host, track) {
		this.host = host;
		this.track = track;
		this.lastDuration = 0;
		this.checkDuration = () => {
			const currentDuration = this.host.durationMs ?? 0;
			if (currentDuration !== this.lastDuration) {
				this.lastDuration = currentDuration;
				this.track.requestUpdate();
			}
			if (currentDuration === 0) this.durationCheckFrame = requestAnimationFrame(this.checkDuration);
		};
		this.host.addController(this);
	}
	remove() {
		this.host.removeController(this);
		if (this.durationCheckFrame) cancelAnimationFrame(this.durationCheckFrame);
	}
	hostDisconnected() {
		this.host.removeController(this);
		if (this.durationCheckFrame) cancelAnimationFrame(this.durationCheckFrame);
	}
	hostConnected() {
		this.lastDuration = this.host.durationMs ?? 0;
		this.checkDuration();
	}
	hostUpdated() {}
};
let TrackItem = class TrackItem$1 extends TWMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this.element = new EFTimegroup();
		this.pixelsPerMs = .04;
		this.enableTrim = false;
	}
	static {
		this.styles = [css`
      :host {
        display: block;
      }
      .trim-container {
        position: relative;
        border-radius: 3px;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
      }
      
      :host(:hover) .trim-container {
        box-shadow: inset 0 0 0 1px var(--ef-color-hover);
      }
      
      :host([data-focused]) .trim-container {
        box-shadow: inset 0 0 0 1px var(--ef-color-primary);
      }
    `];
	}
	get isFocused() {
		return this.element && this.focusContext?.focusedElement === this.element;
	}
	/**
	* Get element type for styling and icons
	*/
	getElementType() {
		if (this.element.tagName === "EF-CAPTIONS" || this.element.tagName?.toLowerCase() === "ef-captions") return "captions";
		if (this.element instanceof EFVideo) return "video";
		if (this.element instanceof EFAudio) return "audio";
		if (this.element instanceof EFImage) return "image";
		if (this.element instanceof EFText) return "text";
		if (this.element instanceof EFTimegroup) return "timegroup";
		return "unknown";
	}
	/**
	* Get color for element type using shared theme utility
	*/
	getElementTypeColor() {
		return getElementTypeColor(this.getElementType(), this);
	}
	/**
	* @deprecated Use getElementTypeColor() instead
	*/
	getElementTypeColorOld() {
		switch (this.getElementType()) {
			case "video": return "rgb(59, 130, 246)";
			case "audio": return "rgb(34, 197, 94)";
			case "image": return "rgb(168, 85, 247)";
			case "text": return "rgb(249, 115, 22)";
			case "captions": return "rgb(34, 197, 94)";
			case "timegroup": return "rgb(148, 163, 184)";
			default: return "rgb(148, 163, 184)";
		}
	}
	/**
	* Get icon for element type
	*/
	getElementIcon() {
		switch (this.getElementType()) {
			case "video": return phosphorIcon(ICONS.filmStrip, 14);
			case "audio": return phosphorIcon(ICONS.speakerHigh, 14);
			case "image": return phosphorIcon(ICONS.image, 14);
			case "text": return phosphorIcon(ICONS.textT, 14);
			case "captions": return phosphorIcon(ICONS.subtitles, 14);
			case "timegroup": return phosphorIcon(ICONS.filmSlate, 14);
			default: return nothing;
		}
	}
	/**
	* Format duration for display
	*/
	formatDuration(ms) {
		if (ms < 1e3) return `${Math.round(ms)}ms`;
		return `${(ms / 1e3).toFixed(1)}s`;
	}
	/**
	* Get tooltip text with element info
	*/
	getTooltipText() {
		const elementId = this.element?.id || "";
		const type = this.getElementType();
		const duration = this.formatDuration(this.element.durationMs ?? 0);
		const startTime = this.formatDuration(this.element.startTimeMs ?? 0);
		const endTime = this.formatDuration((this.element.startTimeMs ?? 0) + (this.element.durationMs ?? 0));
		const parts = [];
		if (elementId) parts.push(elementId);
		parts.push(`${type} • ${duration}`);
		if (this.element.startTimeMs > 0) parts.push(`${startTime} → ${endTime}`);
		if (type === "timegroup") {
			const mode = this.element.mode || "fixed";
			parts.push(`mode: ${mode}`);
		}
		return parts.join(" • ");
	}
	get gutterStyles() {
		const leftOffset = this.element.startTimeMs;
		return {
			position: "relative",
			left: `${this.pixelsPerMs * leftOffset}px`,
			width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`
		};
	}
	get trimPortionStyles() {
		return {
			width: `${this.pixelsPerMs * this.element.durationMs}px`,
			left: "0px"
		};
	}
	handleTrimChange(e) {
		const { type, value } = e.detail;
		this.element.trimStartMs = value.startMs;
		this.element.trimEndMs = value.endMs;
		this.dispatchEvent(new CustomEvent("track-trim-change", {
			detail: {
				elementId: this.element.id || "",
				type,
				value
			},
			bubbles: true,
			composed: true
		}));
	}
	contents() {
		return nothing;
	}
	animations() {
		return [];
	}
	renderChildren() {
		return nothing;
	}
	render() {
		const elementId = this.element.id || "";
		const trimStartMs = this.element.trimStartMs ?? 0;
		const trimEndMs = this.element.trimEndMs ?? 0;
		const intrinsicDurationMs = this.element.intrinsicDurationMs ?? this.element.durationMs;
		const typeColor = this.getElementTypeColor();
		return html`<div style=${styleMap(this.gutterStyles)}>
      <div
        ?data-focused=${this.isFocused}
        @mouseenter=${() => {
			if (this.focusContext) this.focusContext.focusedElement = this.element;
		}}
        @mouseleave=${() => {
			if (this.focusContext) this.focusContext.focusedElement = null;
		}}
      >
        <div
          ?data-focused=${this.isFocused}
          class="trim-container"
          style=${styleMap({
			...this.trimPortionStyles,
			height: "var(--timeline-track-height, 22px)",
			backgroundColor: this.isFocused ? "rgba(59, 130, 246, 0.25)" : "rgba(30, 41, 59, 0.8)",
			borderLeft: `3px solid ${typeColor}`
		})}
          title="${this.getTooltipText()}"
        >
          ${this.animations()}
          ${this.contents()}
          ${this.enableTrim ? html`<ef-trim-handles
                mode="track"
                element-id=${elementId}
                pixels-per-ms=${this.pixelsPerMs}
                trim-start-ms=${trimStartMs}
                trim-end-ms=${trimEndMs}
                intrinsic-duration-ms=${intrinsicDurationMs}
                @trim-change=${this.handleTrimChange}
              ></ef-trim-handles>` : nothing}
        </div>
      </div>
      ${this.renderChildren()}
    </div>`;
	}
	update(changedProperties) {
		if (changedProperties.has("element") && this.element instanceof LitElement) {
			this.trackController?.remove();
			this.trackController = new ElementTrackController(this.element, this);
		}
		super.update(changedProperties);
	}
};
__decorate([consume({
	context: focusContext,
	subscribe: true
})], TrackItem.prototype, "focusContext", void 0);
__decorate([consume({
	context: focusedElementContext,
	subscribe: true
})], TrackItem.prototype, "focusedElement", void 0);
__decorate([property({
	type: Object,
	attribute: false
})], TrackItem.prototype, "element", void 0);
__decorate([property({
	type: Number,
	attribute: "pixels-per-ms"
})], TrackItem.prototype, "pixelsPerMs", void 0);
__decorate([property({
	type: Boolean,
	attribute: "enable-trim"
})], TrackItem.prototype, "enableTrim", void 0);
__decorate([property({
	type: Array,
	attribute: false
})], TrackItem.prototype, "hideSelectors", void 0);
__decorate([property({
	type: Array,
	attribute: false
})], TrackItem.prototype, "showSelectors", void 0);
TrackItem = __decorate([customElement("ef-track-item")], TrackItem);

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