import { TWMixin } from "../TWMixin2.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { isEFTemporal } from "../../elements/EFTemporal.js";
import { EFAudio } from "../../elements/EFAudio.js";
import { EFVideo } from "../../elements/EFVideo.js";
import { EFCaptions } from "../../elements/EFCaptions.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 { timelineEditingContext } from "./timelineEditingContext.js";
import { renderTrackChildren } from "./tracks/renderTrackChildren.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/EFTimelineRow.ts
const INDENT_PX = 16;
let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this.depth = 0;
		this.pixelsPerMs = .04;
		this.enableTrim = false;
		this.hideLabel = false;
		this.highlightedElement = null;
		this.selectedIds = /* @__PURE__ */ new Set();
		this.handleMouseEnter = () => {
			if (this.editingContext && !this.editingContext.canInteract()) return;
			this.dispatchEvent(new CustomEvent("row-hover", {
				detail: { element: this.element },
				bubbles: true,
				composed: true
			}));
		};
		this.handleMouseLeave = () => {
			if (this.editingContext && !this.editingContext.canInteract()) return;
			this.dispatchEvent(new CustomEvent("row-hover", {
				detail: { element: null },
				bubbles: true,
				composed: true
			}));
		};
		this.handleClick = (e) => {
			e.stopPropagation();
			const elementId = this.element?.id;
			if (elementId) this.dispatchEvent(new CustomEvent("row-select", {
				detail: {
					elementId,
					element: this.element
				},
				bubbles: true,
				composed: true
			}));
		};
	}
	static {
		this.styles = [css`
      :host {
        display: flex;
        min-height: var(--timeline-row-height, 28px);
        border-bottom: 1px solid var(--ef-color-border-subtle);
      }

      :host(.nested-timegroup) {
        min-height: 18px;
        --timeline-track-height: 14px;
      }

      :host(.nested-timegroup) .row-label {
        font-size: 10px;
        opacity: 0.7;
      }

      /* Root timegroup row with filmstrip - taller to show thumbnails */
      :host(.root-timegroup) {
        min-height: 52px;
        height: 52px;
        /* Sticky at top below ruler (ruler is 24px) */
        position: sticky;
        top: 24px;
        /* Higher z-index than regular row labels (z-index: 8) so everything scrolls underneath */
        z-index: 15;
        background: var(--timeline-bg, var(--ef-color-bg));
        border-bottom: 1px solid var(--ef-color-border);
      }

      /* Root timegroup label needs higher z-index to stay above other labels when scrolling */
      :host(.root-timegroup) .row-label {
        z-index: 16;
      }

      /* Hover state - this row is directly hovered */
      :host(.hovered) {
        background: var(--ef-color-hover);
      }

      /* Ancestor hovered - a descendant of this row is hovered */
      :host(.ancestor-hovered) {
        background: var(--ef-color-selected-subtle);
      }

      /* Descendant hovered - an ancestor of this row is hovered */
      :host(.descendant-hovered) {
        background: var(--ef-color-selected-subtle);
      }

      /* Selected state */
      :host(.selected) {
        background: var(--ef-color-selected);
      }
      
      :host(.selected) .row-label {
        font-weight: 500;
      }

      /* Ancestor has selected descendant */
      :host(.ancestor-selected) {
        background: var(--ef-color-selected-subtle);
      }

      .row-label {
        position: sticky;
        left: 0;
        /* Lower z-index so labels scroll underneath the sticky root timegroup row (z-index: 15) */
        z-index: 8;
        width: var(--timeline-hierarchy-width, 200px);
        flex-shrink: 0;
        background: var(--ef-color-bg-panel);
        border-right: 1px solid var(--ef-color-border-subtle);
        display: flex;
        align-items: center;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--ef-color-text);
        cursor: pointer;
        transition: background-color 0.1s ease;
      }

      /* Hide label column when hierarchy is disabled */
      :host([hide-label]) .row-label {
        display: none;
      }

      .row-label:hover {
        background: color-mix(in srgb, var(--ef-color-bg-panel) 70%, var(--ef-color-hover) 30%);
      }

      :host(.hovered) .row-label {
        background: var(--ef-color-bg-elevated);
        border-left: 3px solid var(--ef-color-primary);
        padding-left: calc(var(--indent, 0px) - 3px);
      }

      :host(.selected) .row-label {
        background: var(--ef-color-bg-elevated);
        border-left: 3px solid var(--ef-color-primary);
        padding-left: calc(var(--indent, 0px) - 3px);
      }

      .row-track {
        flex: 1;
        position: relative;
        min-width: 0;
      }
      
      :host(:first-child) .row-track::before {
        display: none;
      }
      
      /* Grouping indicator for nested elements */
      .row-track::after {
        content: "";
        position: absolute;
        left: -12px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--timeline-border, rgb(71 85 105));
        opacity: 0.2;
        z-index: 0;
      }
      
      :host(:first-child) .row-track::after {
        display: none;
      }
    `];
	}
	get isHovered() {
		return this.highlightedElement === this.element;
	}
	get isSelected() {
		const elementId = this.element?.id;
		return elementId ? this.selectedIds.has(elementId) : false;
	}
	get isAncestorSelected() {
		if (!this.element) return false;
		const elementAsHTMLElement = this.element;
		for (const selectedId of this.selectedIds) {
			const selectedElement = document.getElementById(selectedId);
			if (selectedElement && elementAsHTMLElement.contains(selectedElement) && selectedElement !== elementAsHTMLElement) return true;
		}
		return false;
	}
	get isAncestorHovered() {
		if (!this.highlightedElement || !this.element) return false;
		return this.element !== this.highlightedElement && this.element.contains(this.highlightedElement);
	}
	get isDescendantHovered() {
		if (!this.highlightedElement || !this.element) return false;
		return this.element !== this.highlightedElement && this.highlightedElement.contains(this.element);
	}
	updated(changedProperties) {
		super.updated(changedProperties);
		if (changedProperties.has("highlightedElement") || changedProperties.has("element")) {
			this.classList.toggle("hovered", this.isHovered);
			this.classList.toggle("ancestor-hovered", this.isAncestorHovered);
			this.classList.toggle("descendant-hovered", this.isDescendantHovered);
		}
		if (changedProperties.has("selectedIds") || changedProperties.has("element")) {
			this.classList.toggle("selected", this.isSelected);
			this.classList.toggle("ancestor-selected", this.isAncestorSelected);
		}
		if (changedProperties.has("element")) {
			const isRoot = this.element instanceof EFTimegroup && this.element.isRootTimegroup;
			const isNested = this.element instanceof EFTimegroup && !this.element.isRootTimegroup;
			this.classList.toggle("root-timegroup", isRoot);
			this.classList.toggle("nested-timegroup", isNested);
		}
	}
	getElementType(element) {
		if (element instanceof EFVideo) return "video";
		if (element instanceof EFAudio) return "audio";
		if (element instanceof EFImage) return "image";
		if (element instanceof EFText) return "text";
		if (element instanceof EFCaptions) return "captions";
		if (element instanceof EFTimegroup) return "timegroup";
		return "unknown";
	}
	getElementIcon(type) {
		const iconMap = {
			video: phosphorIcon(ICONS.filmStrip, 14),
			audio: phosphorIcon(ICONS.speakerHigh, 14),
			image: phosphorIcon(ICONS.image, 14),
			text: phosphorIcon(ICONS.textT, 14),
			captions: phosphorIcon(ICONS.subtitles, 14),
			timegroup: phosphorIcon(ICONS.filmSlate, 14),
			unknown: phosphorIcon(ICONS.code, 14)
		};
		return iconMap[type] ?? iconMap.unknown;
	}
	getElementLabel(element) {
		const id = element.id || "";
		const type = this.getElementType(element);
		if (id && !id.includes("-") && !id.match(/^\d+$/)) return id;
		const parent = element.parentElement;
		if (parent) {
			const siblings = Array.from(parent.children).filter((child) => this.getElementType(child) === type);
			const index = siblings.indexOf(element) + 1;
			const label = {
				video: "Video",
				audio: "Audio",
				image: "Image",
				text: "Text",
				captions: "Captions",
				timegroup: "Composition",
				unknown: "Layer"
			}[type] || "Layer";
			if (siblings.length === 1) return label;
			return `${label} ${index}`;
		}
		return type.charAt(0).toUpperCase() + type.slice(1);
	}
	/**
	* Get additional detail text for the label (mode, preview, etc.)
	*/
	getElementDetail(element) {
		if (element instanceof EFTimegroup) {
			const mode = element.mode || "fixed";
			return {
				fixed: "Fixed",
				sequence: "Sequence",
				contain: "Container"
			}[mode] || mode;
		}
		if (element instanceof EFText) {
			const textContent = Array.from(element.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE).map((node) => node.textContent?.trim()).filter(Boolean).join(" ");
			if (textContent) return textContent.length > 20 ? textContent.slice(0, 20) + "..." : textContent;
		}
		return null;
	}
	renderTrack() {
		if (!this.element || !isEFTemporal(this.element)) return nothing;
		if (this.element instanceof EFTimegroup) {
			const showFilmstrip = this.element.isRootTimegroup;
			return html`<ef-timegroup-track
        .element=${this.element}
        pixels-per-ms=${this.pixelsPerMs}
        ?enable-trim=${this.enableTrim}
        ?skip-children=${true}
        ?show-filmstrip=${showFilmstrip}
        .hideSelectors=${this.hideSelectors}
        .showSelectors=${this.showSelectors}
      ></ef-timegroup-track>`;
		}
		return html`${renderTrackChildren([this.element], this.pixelsPerMs, this.hideSelectors, this.showSelectors, true, this.enableTrim)}`;
	}
	connectedCallback() {
		super.connectedCallback();
		this.addEventListener("mouseenter", this.handleMouseEnter);
		this.addEventListener("mouseleave", this.handleMouseLeave);
		this.addEventListener("click", this.handleClick);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.removeEventListener("mouseenter", this.handleMouseEnter);
		this.removeEventListener("mouseleave", this.handleMouseLeave);
		this.removeEventListener("click", this.handleClick);
	}
	render() {
		if (!this.element) return nothing;
		const type = this.getElementType(this.element);
		const label = this.getElementLabel(this.element);
		const detail = this.getElementDetail(this.element);
		const typeColor = getElementTypeColor(type, this);
		const icon = this.getElementIcon(type);
		return html`
      <div
        class="row-label"
        part="label"
        style=${styleMap({
			paddingLeft: `${this.depth * INDENT_PX}px`,
			borderLeftColor: typeColor,
			borderLeftWidth: "3px",
			borderLeftStyle: "solid"
		})}
      >
        <span style="color: ${typeColor}; opacity: 0.9; margin-right: 6px; flex-shrink: 0;">
          ${icon}
        </span>
        <span style="flex-shrink: 0;">${label}</span>
        ${detail ? html`
          <span style="margin-left: 6px; opacity: 0.6; font-size: 10px; overflow: hidden; text-overflow: ellipsis;">
            ${detail}
          </span>
        ` : nothing}
      </div>
      <div class="row-track" part="track">${this.renderTrack()}</div>
    `;
	}
};
__decorate([property({
	type: Object,
	attribute: false
})], EFTimelineRow.prototype, "element", void 0);
__decorate([property({ type: Number })], EFTimelineRow.prototype, "depth", void 0);
__decorate([property({
	type: Number,
	attribute: "pixels-per-ms"
})], EFTimelineRow.prototype, "pixelsPerMs", void 0);
__decorate([property({
	type: Boolean,
	attribute: "enable-trim"
})], EFTimelineRow.prototype, "enableTrim", void 0);
__decorate([property({
	type: Boolean,
	attribute: "hide-label",
	reflect: true
})], EFTimelineRow.prototype, "hideLabel", void 0);
__decorate([property({
	type: Array,
	attribute: false
})], EFTimelineRow.prototype, "hideSelectors", void 0);
__decorate([property({
	type: Array,
	attribute: false
})], EFTimelineRow.prototype, "showSelectors", void 0);
__decorate([property({
	type: Object,
	attribute: false
})], EFTimelineRow.prototype, "highlightedElement", void 0);
__decorate([property({
	type: Object,
	attribute: false
})], EFTimelineRow.prototype, "selectedIds", void 0);
__decorate([consume({
	context: timelineEditingContext,
	subscribe: true
})], EFTimelineRow.prototype, "editingContext", void 0);
EFTimelineRow = __decorate([customElement("ef-timeline-row")], EFTimelineRow);

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