import { currentTimeContext } from "../../currentTimeContext.js";
import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { TrackItem } from "./TrackItem.js";
import { renderTrackChildren } from "./renderTrackChildren.js";
import { consume } from "@lit/context";
import { css, html, nothing } from "lit";
import { customElement } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";

//#region src/gui/timeline/tracks/TextTrack.ts
let EFTextTrack = class EFTextTrack$1 extends TrackItem {
	constructor(..._args) {
		super(..._args);
		this.contextCurrentTimeMs = 0;
	}
	static {
		this.styles = [...TrackItem.styles, css`
      .text-segment-block {
        position: absolute;
        height: calc(100% - 4px);
        top: 2px;
        display: flex;
        align-items: center;
        padding: 0 4px;
        border-radius: 2px;
        overflow: hidden;
        background: color-mix(in srgb, var(--ef-color-type-text) 15%, transparent);
      }
      
      .text-segment-block.active {
        background: color-mix(in srgb, var(--ef-color-type-text) 35%, transparent);
      }
      
      .text-segment-block:hover {
        z-index: 100;
        overflow: visible;
        width: max-content !important;
        min-width: max-content;
        background: var(--ef-color-bg-elevated);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }
      
      .segment-text {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--ef-color-text);
      }
      
      .text-segment-block:hover .segment-text {
        overflow: visible;
        text-overflow: clip;
      }
      
      .text-segment-block.active .segment-text {
        font-weight: 500;
        color: white;
      }
      
      /* Compact mode - single block for full text */
      .text-compact-block {
        position: absolute;
        left: 4px;
        right: 4px;
        top: 2px;
        bottom: 2px;
        display: flex;
        align-items: center;
        padding: 0 4px;
        overflow: hidden;
        border-radius: 2px;
        background: color-mix(in srgb, var(--ef-color-type-text) 10%, transparent);
      }
      
      .text-compact-block:hover {
        overflow: visible;
        z-index: 100;
        width: max-content;
        background: var(--ef-color-bg-elevated);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }
    `];
	}
	/**
	* Get the text content - from segments, direct text nodes, or element textContent
	*/
	#getTextContent(segments) {
		const text = this.element;
		if (segments.length > 0) return segments.map((s) => s.segmentText).join(" ");
		const directText = Array.from(text.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE).map((node) => node.textContent?.trim()).filter(Boolean).join(" ");
		if (directText) return directText;
		return text.textContent?.trim() || "";
	}
	/**
	* Check if segments can fit individually based on track width
	*/
	#canShowSegmentsIndividually(segments, trackWidthPx) {
		if (segments.length === 0) return false;
		return trackWidthPx >= segments.length * 20;
	}
	render() {
		const text = this.element;
		const segments = Array.from(text.querySelectorAll("ef-text-segment"));
		const textContent = this.#getTextContent(segments);
		const durationMs = text.durationMs ?? 0;
		const trackWidthPx = durationMs * this.pixelsPerMs;
		const canShowSegments = this.#canShowSegmentsIndividually(segments, trackWidthPx);
		return html`<div style=${styleMap(this.gutterStyles)}>
      <div
        class="relative"
        style="background-color: var(--filmstrip-bg);"
        ?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="relative mb-[1px] block h-[1.1rem] text-nowrap border text-sm overflow-visible"
          style=${styleMap({
			...this.trimPortionStyles,
			backgroundColor: this.isFocused ? "var(--filmstrip-item-focused)" : "var(--filmstrip-item-bg)",
			borderColor: "var(--filmstrip-border)",
			borderLeftColor: this.getElementTypeColor(),
			borderLeftWidth: "3px"
		})}
        >
          ${segments.length > 0 && canShowSegments ? this.#renderSegments(segments, durationMs) : this.#renderCompactText(textContent)}
        </div>
      </div>
      ${this.renderChildren()}
    </div>`;
	}
	/**
	* Render segments as positioned blocks (like captions)
	*/
	#renderSegments(segments, durationMs) {
		const text = this.element;
		const textLocalTimeMs = (this.contextCurrentTimeMs || 0) - text.startTimeMs;
		return segments.map((segment, index) => {
			const staggerOffset = segment.staggerOffsetMs ?? 0;
			const isActive = textLocalTimeMs >= staggerOffset;
			const segmentWidthMs = (segments[index + 1]?.staggerOffsetMs ?? durationMs) - staggerOffset;
			const segmentWidthPx = Math.max(this.pixelsPerMs * segmentWidthMs, 18);
			return html`<div
        class="text-segment-block ${isActive ? "active" : ""}"
        style=${styleMap({
				left: `${this.pixelsPerMs * staggerOffset}px`,
				width: `${segmentWidthPx}px`
			})}
        title="${segment.segmentText}"
      >
        <span class="segment-text">${segment.segmentText}</span>
      </div>`;
		});
	}
	/**
	* Render compact text (no segments or not enough space)
	*/
	#renderCompactText(textContent) {
		if (!textContent) return nothing;
		return html`
      <div class="text-compact-block">
        <span class="segment-text">${textContent}</span>
      </div>
    `;
	}
	renderChildren() {
		const nonSegmentChildren = Array.from(this.element.children).filter((child) => child.tagName?.toUpperCase() !== "EF-TEXT-SEGMENT");
		if (nonSegmentChildren.length === 0) return nothing;
		return renderTrackChildren(nonSegmentChildren, this.pixelsPerMs, this.hideSelectors, this.showSelectors, false, this.enableTrim);
	}
};
__decorate([consume({
	context: currentTimeContext,
	subscribe: true
})], EFTextTrack.prototype, "contextCurrentTimeMs", void 0);
EFTextTrack = __decorate([customElement("ef-text-track")], EFTextTrack);
let EFTextSegmentTrack = class EFTextSegmentTrack$1 extends TrackItem {
	get textTrackStyles() {
		const parentText = this.element.closest("ef-text");
		return {
			position: "relative",
			left: `${this.pixelsPerMs * (parentText?.startTimeWithinParentMs || 0)}px`,
			width: `${this.pixelsPerMs * (parentText?.durationMs || 0)}px`
		};
	}
	render() {
		const segment = this.element;
		const parentText = segment.closest("ef-text");
		if (!parentText) return html`<div style=${styleMap(this.textTrackStyles)}>
        <div class="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
        </div>
      </div>`;
		const textLocalTimeMs = (parentText.rootTimegroup?.currentTimeMs || 0) - parentText.startTimeMs;
		const isCurrentlyActive = textLocalTimeMs >= segment.segmentStartMs && textLocalTimeMs < segment.segmentEndMs;
		return html`<div style=${styleMap(this.textTrackStyles)}>
      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
        <div
          class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "font-bold z-[5]" : ""}"
          style=${styleMap({
			left: `${this.pixelsPerMs * segment.segmentStartMs}px`,
			width: `${this.pixelsPerMs * (segment.segmentEndMs - segment.segmentStartMs)}px`,
			height: "100%",
			top: "0px",
			backgroundColor: isCurrentlyActive ? "var(--filmstrip-caption-bg)" : "var(--filmstrip-item-bg)",
			borderColor: isCurrentlyActive ? "var(--filmstrip-caption-border)" : "var(--filmstrip-border)"
		})}
          title="Segment: '${segment.segmentText}' (${segment.segmentStartMs}ms - ${segment.segmentEndMs}ms)"
        >
          ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap" style="background-color: var(--filmstrip-caption-bg);">${segment.segmentText}</span>` : ""}
        </div>
      </div>
    </div>`;
	}
};
EFTextSegmentTrack = __decorate([customElement("ef-text-segment-track")], EFTextSegmentTrack);

//#endregion
//# sourceMappingURL=TextTrack.js.map