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

//#region src/gui/timeline/tracks/TimegroupTrack.ts
/**
* Check if a timegroup is a root timegroup (has no parent timegroup)
* Uses the timegroup's own isRootTimegroup property for reliability
*/
function isRootTimegroup(element) {
	if (!element) return false;
	const elem = element;
	if (typeof elem.isRootTimegroup === "boolean") return elem.isRootTimegroup;
	if (elem.parentTimegroup !== void 0) return !elem.parentTimegroup;
	let parent = element.parentElement;
	while (parent) {
		if (parent.tagName.toLowerCase() === "ef-timegroup") return false;
		parent = parent.parentElement;
	}
	return true;
}
/** Height for root timegroup filmstrip row */
const FILMSTRIP_ROW_HEIGHT = 48;
let EFTimegroupTrack = class EFTimegroupTrack$1 extends TrackItem {
	constructor(..._args) {
		super(..._args);
		this.skipChildren = false;
		this.showFilmstrip = false;
	}
	static {
		this.styles = [...TrackItem.styles, css`
      .trim-container {
        background: linear-gradient(
          135deg,
          color-mix(in srgb, var(--ef-color-type-timegroup) 10%, transparent) 0%,
          color-mix(in srgb, var(--ef-color-type-timegroup) 5%, transparent) 100%
        ) !important;
      }
      
      :host(:hover) .trim-container {
        background: linear-gradient(
          135deg,
          color-mix(in srgb, var(--ef-color-type-timegroup) 15%, transparent) 0%,
          color-mix(in srgb, var(--ef-color-type-timegroup) 8%, transparent) 100%
        ) !important;
      }
    `];
	}
	/**
	* Check if this track should show a filmstrip
	*/
	get shouldShowFilmstrip() {
		const skipChildren = this.skipChildren;
		const showFilmstrip = this.showFilmstrip;
		const hasId = !!this.element?.id;
		const isRoot = isRootTimegroup(this.element);
		return skipChildren && showFilmstrip && hasId && isRoot;
	}
	/**
	* Override trimPortionStyles to use taller height for filmstrip rows
	*/
	get trimPortionStyles() {
		const baseStyles = super.trimPortionStyles;
		if (this.shouldShowFilmstrip) return {
			...baseStyles,
			height: `${FILMSTRIP_ROW_HEIGHT}px`
		};
		return baseStyles;
	}
	get modeLabel() {
		const mode = this.element.mode || "fixed";
		return {
			fixed: "Fixed",
			sequence: "Sequence",
			contain: "Container",
			fit: "Fit"
		}[mode] || mode;
	}
	contents() {
		if (this.shouldShowFilmstrip) return html`<ef-thumbnail-strip
        .targetElement=${this.element}
        thumbnail-height=${FILMSTRIP_ROW_HEIGHT}
        thumbnail-spacing-px="96"
        pixels-per-ms=${this.pixelsPerMs}
      ></ef-thumbnail-strip>`;
		if (this.skipChildren) return html`<span style="
        font-size: 9px;
        opacity: 0.5;
        padding-left: 4px;
        line-height: 14px;
        pointer-events: none;
        white-space: nowrap;
      ">${this.modeLabel}</span>`;
		return html`${renderTrackChildren(Array.from(this.element.children || []), this.pixelsPerMs, this.hideSelectors, this.showSelectors, false, this.enableTrim)}`;
	}
	/**
	* Override render to use taller height for filmstrip rows
	*/
	render() {
		const trackHeight = this.shouldShowFilmstrip ? `${FILMSTRIP_ROW_HEIGHT}px` : "var(--timeline-track-height, 22px)";
		return html`<div style=${styleMap(this.gutterStyles)}>
      <div
        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="trim-container relative mb-0 block text-nowrap border text-sm"
          style=${styleMap({
			...this.trimPortionStyles,
			height: trackHeight,
			backgroundColor: this.isFocused ? "var(--filmstrip-item-focused)" : "var(--filmstrip-item-bg)",
			borderColor: this.shouldShowFilmstrip ? "transparent" : "var(--filmstrip-border)"
		})}
        >
          ${this.animations()}
          ${this.contents()}
        </div>
      </div>
      ${this.renderChildren()}
    </div>`;
	}
};
__decorate([property({
	type: Boolean,
	attribute: "skip-children"
})], EFTimegroupTrack.prototype, "skipChildren", void 0);
__decorate([property({
	type: Boolean,
	attribute: "show-filmstrip"
})], EFTimegroupTrack.prototype, "showFilmstrip", void 0);
EFTimegroupTrack = __decorate([customElement("ef-timegroup-track")], EFTimegroupTrack);

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