import { TWMixin } from "../TWMixin2.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { selectionContext } from "../../canvas/selection/selectionContext.js";
import { hierarchyContext } from "./hierarchyContext.js";
import { EFAudio } from "../../elements/EFAudio.js";
import { EFVideo } from "../../elements/EFVideo.js";
import { EFCaptions, EFCaptionsActiveWord } from "../../elements/EFCaptions.js";
import { EFImage } from "../../elements/EFImage.js";
import { EFText } from "../../elements/EFText.js";
import { EFTextSegment } from "../../elements/EFTextSegment.js";
import { EFWaveform } from "../../elements/EFWaveform.js";
import { ICONS, phosphorIcon } from "../icons.js";
import { getElementTypeColor } from "../theme.js";
import { EFTimegroup } from "../../elements/EFTimegroup.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/hierarchy/EFHierarchyItem.ts
const DEFAULT_HIDDEN_TAGS = new Set([
	"SPAN",
	"STYLE",
	"SCRIPT",
	"LINK",
	"META",
	"SLOT",
	"TEMPLATE",
	"EF-WORKBENCH",
	"EF-FILMSTRIP",
	"EF-CONTROLS",
	"EF-SCRUBBER",
	"EF-TIMELINE-RULER",
	"EF-TRIM-HANDLES",
	"EF-TEXT-SEGMENT"
]);
const shouldRenderElement = (element, hideSelectors, showSelectors) => {
	if (element instanceof HTMLElement && element.dataset?.efHidden) return false;
	if (DEFAULT_HIDDEN_TAGS.has(element.tagName)) {
		if (showSelectors && showSelectors.length > 0) return showSelectors.some((selector) => {
			try {
				return element.matches(selector);
			} catch {
				return false;
			}
		});
		return false;
	}
	if (showSelectors && showSelectors.length > 0) return showSelectors.some((selector) => {
		try {
			return element.matches(selector);
		} catch {
			return false;
		}
	});
	if (hideSelectors && hideSelectors.length > 0) return !hideSelectors.some((selector) => {
		try {
			return element.matches(selector);
		} catch {
			return false;
		}
	});
	return true;
};
function renderHierarchyChildren(children, hideSelectors, showSelectors, skipRootFiltering = false, temporalOnly = false) {
	return children.flatMap((child) => {
		if (!skipRootFiltering && !shouldRenderElement(child, hideSelectors, showSelectors)) return nothing;
		if (child instanceof EFTimegroup) return html`<ef-timegroup-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
        .temporalOnly=${temporalOnly}
      ></ef-timegroup-hierarchy-item>`;
		if (child instanceof EFImage) return html`<ef-image-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
        .temporalOnly=${temporalOnly}
      ></ef-image-hierarchy-item>`;
		if (child instanceof EFAudio) return html`<ef-audio-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
        .temporalOnly=${temporalOnly}
      ></ef-audio-hierarchy-item>`;
		if (child instanceof EFVideo) return html`<ef-video-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
        .temporalOnly=${temporalOnly}
      ></ef-video-hierarchy-item>`;
		if (child instanceof EFCaptions) return html`<ef-captions-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
        .temporalOnly=${temporalOnly}
      ></ef-captions-hierarchy-item>`;
		if (child instanceof EFCaptionsActiveWord) return html`<ef-captions-active-word-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
        .temporalOnly=${temporalOnly}
      ></ef-captions-active-word-hierarchy-item>`;
		if (child instanceof EFText) return html`<ef-text-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
        .temporalOnly=${temporalOnly}
      ></ef-text-hierarchy-item>`;
		if (child instanceof EFTextSegment) return nothing;
		if (child instanceof EFWaveform) return html`<ef-waveform-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
        .temporalOnly=${temporalOnly}
      ></ef-waveform-hierarchy-item>`;
		if (temporalOnly) return nothing;
		if (child instanceof HTMLElement) return html`<ef-html-hierarchy-item
        .element=${child}
        .hideSelectors=${hideSelectors}
        .showSelectors=${showSelectors}
      ></ef-html-hierarchy-item>`;
		return nothing;
	});
}
let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this.element = new EFTimegroup();
		this.temporalOnly = false;
		this.localExpanded = true;
	}
	static {
		this.styles = [css`
      :host {
        display: block;
      }
      .item-row {
        display: flex;
        align-items: center;
        height: var(--hierarchy-item-height, 1.5rem);
        padding-left: var(--hierarchy-item-padding-left, 0.5rem);
        padding-right: var(--hierarchy-item-padding-right, 0.5rem);
        padding-top: var(--hierarchy-item-padding-top, 0);
        padding-bottom: var(--hierarchy-item-padding-bottom, 0);
        font-size: var(--hierarchy-item-font-size, 0.75rem);
        font-family: system-ui, -apple-system, sans-serif;
        cursor: pointer;
        user-select: none;
        border-left: 3px solid transparent;
        transition: background-color 0.1s ease;
      }
      .item-row:hover {
        background: var(--ef-color-hover);
      }
      .item-row[data-selected] {
        background: var(--ef-color-selected);
        border-left-color: var(--ef-color-primary);
      }
      .item-row[data-ancestor-selected] {
        background: var(--ef-color-selected-subtle);
      }
      .item-row[data-focused] {
        background: var(--ef-color-focused);
        border-left-color: var(--ef-color-primary);
      }
      .item-row[data-dragging] {
        opacity: 0.5;
      }
      .expand-icon {
        width: var(--hierarchy-expand-icon-size, 1rem);
        height: var(--hierarchy-expand-icon-size, 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
      }
      .expand-icon svg {
        width: 0.75rem;
        height: 0.75rem;
        transition: transform 0.15s ease;
      }
      .expand-icon[data-expanded] svg {
        transform: rotate(90deg);
      }
      .icon {
        margin-right: var(--hierarchy-icon-gap, 0.25rem);
        flex-shrink: 0;
      }
      .label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
      }
      .children {
        padding-left: var(--hierarchy-indent, 0.75rem);
      }
      .children[data-collapsed] {
        display: none;
      }
      .drop-indicator {
        height: 2px;
        background: var(--hierarchy-drop-indicator, #3b82f6);
        margin-left: var(--hierarchy-indent, 0.75rem);
      }
      .drop-inside {
        outline: 2px solid var(--hierarchy-drop-indicator, #3b82f6);
        outline-offset: -2px;
      }
    `];
	}
	get elementId() {
		return this.element?.id || "";
	}
	get icon() {
		return phosphorIcon(ICONS.code);
	}
	get typeColor() {
		return getElementTypeColor("timegroup", this);
	}
	get isFocused() {
		const highlightedElement = this.hierarchyContext?.getHighlightedElement?.();
		return this.element && highlightedElement === this.element;
	}
	get isSelected() {
		const selectionCtx = this.canvasSelectionContext || this.hierarchyContext?.getCanvasSelectionContext?.();
		if (selectionCtx && this.elementId) return selectionCtx.selectedIds.has(this.elementId);
		if (!this.hierarchyContext) return false;
		return this.hierarchyContext.state.selectedElementId === this.elementId;
	}
	get isAncestorSelected() {
		const selectionCtx = this.canvasSelectionContext || this.hierarchyContext?.getCanvasSelectionContext?.();
		if (selectionCtx && this.element) for (const selectedId of selectionCtx.selectedIds) {
			const selectedElement = document.getElementById(selectedId);
			if (selectedElement && this.element.contains(selectedElement) && selectedElement !== this.element) return true;
		}
		return false;
	}
	get isExpanded() {
		if (!this.hierarchyContext || !this.elementId) return this.localExpanded;
		return this.hierarchyContext.state.expandedIds.has(this.elementId);
	}
	get isDragging() {
		if (!this.hierarchyContext) return false;
		return this.hierarchyContext.state.draggedElementId === this.elementId;
	}
	get isDropTarget() {
		if (!this.hierarchyContext) return false;
		return this.hierarchyContext.state.dropTargetId === this.elementId;
	}
	get dropPosition() {
		if (!this.isDropTarget || !this.hierarchyContext) return null;
		return this.hierarchyContext.state.dropPosition;
	}
	get hasChildren() {
		return this.element.children.length > 0;
	}
	displayLabel() {
		return this.elementId || "(unnamed)";
	}
	handleClick(e) {
		e.stopPropagation();
		if (this.hierarchyContext && this.elementId) this.hierarchyContext.actions.select(this.elementId);
		this.hierarchyContext?.setHighlightedElement?.(this.element);
	}
	handleExpandClick(e) {
		e.stopPropagation();
		if (this.hierarchyContext && this.elementId) this.hierarchyContext.actions.toggleExpanded(this.elementId);
		else this.localExpanded = !this.localExpanded;
	}
	handleDragStart(e) {
		if (!this.hierarchyContext || !this.elementId) return;
		e.dataTransfer?.setData("text/plain", this.elementId);
		this.hierarchyContext.actions.startDrag(this.elementId);
	}
	handleDragEnd() {
		if (this.hierarchyContext) this.hierarchyContext.actions.endDrag();
	}
	handleDragOver(e) {
		e.preventDefault();
		if (!this.hierarchyContext || !this.elementId) return;
		const rect = e.currentTarget.getBoundingClientRect();
		const y = e.clientY - rect.top;
		const height = rect.height;
		let position;
		if (y < height * .25) position = "before";
		else if (y > height * .75) position = "after";
		else position = "inside";
		this.hierarchyContext.actions.updateDropTarget(this.elementId, position);
	}
	handleDragLeave() {
		if (this.hierarchyContext && this.isDropTarget) this.hierarchyContext.actions.updateDropTarget(null, null);
	}
	handleDrop(e) {
		e.preventDefault();
		if (!this.hierarchyContext || !this.elementId) return;
		const sourceId = e.dataTransfer?.getData("text/plain");
		if (sourceId && this.dropPosition) this.hierarchyContext.actions.reorder(sourceId, this.elementId, this.dropPosition);
		this.hierarchyContext.actions.endDrag();
	}
	handleMouseEnter() {
		this.hierarchyContext?.setHighlightedElement?.(this.element);
	}
	handleMouseLeave() {
		if (this.hierarchyContext?.getHighlightedElement?.() === this.element) this.hierarchyContext?.setHighlightedElement?.(null);
	}
	connectedCallback() {
		super.connectedCallback();
		this.setupSelectionListener();
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.removeSelectionListener();
	}
	willUpdate(changedProperties) {
		if (!this.selectionChangeHandler || changedProperties.has("hierarchyContext")) {
			if (changedProperties.has("hierarchyContext") && this.selectionChangeHandler) {
				this.removeSelectionListener();
				this.selectionChangeHandler = void 0;
			}
			this.setupSelectionListener();
		}
	}
	setupSelectionListener() {
		if (this.selectionChangeHandler) return;
		const selectionCtx = this.canvasSelectionContext || this.hierarchyContext?.getCanvasSelectionContext?.();
		if (selectionCtx && "addEventListener" in selectionCtx) {
			this.selectionChangeHandler = () => {
				this.requestUpdate();
			};
			selectionCtx.addEventListener("selectionchange", this.selectionChangeHandler);
		}
	}
	removeSelectionListener() {
		const selectionCtx = this.canvasSelectionContext || this.hierarchyContext?.getCanvasSelectionContext?.();
		if (selectionCtx && "removeEventListener" in selectionCtx && this.selectionChangeHandler) {
			selectionCtx.removeEventListener("selectionchange", this.selectionChangeHandler);
			this.selectionChangeHandler = void 0;
		}
	}
	render() {
		const expanded = this.isExpanded;
		return html`
      ${this.dropPosition === "before" ? html`<div class="drop-indicator"></div>` : nothing}
      <div
        class="item-row ${this.dropPosition === "inside" ? "drop-inside" : ""}"
        part="row"
        style=${styleMap({ borderLeftColor: this.typeColor })}
        ?data-focused=${this.isFocused}
        ?data-selected=${this.isSelected}
        ?data-ancestor-selected=${this.isAncestorSelected}
        ?data-dragging=${this.isDragging}
        draggable="true"
        @click=${this.handleClick}
        @dragstart=${this.handleDragStart}
        @dragend=${this.handleDragEnd}
        @dragover=${this.handleDragOver}
        @dragleave=${this.handleDragLeave}
        @drop=${this.handleDrop}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
      >
        ${this.hasChildren ? html`
              <span
                class="expand-icon"
                ?data-expanded=${expanded}
                @click=${this.handleExpandClick}
              >
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </span>
            ` : html`<span class="expand-icon"></span>`}
        <span class="icon" part="icon">${this.icon}</span>
        <span class="label" part="label">${this.displayLabel()}</span>
      </div>
      ${this.hasChildren ? html`
            <div class="children" ?data-collapsed=${!expanded}>
              ${this.renderChildren()}
            </div>
          ` : nothing}
      ${this.dropPosition === "after" ? html`<div class="drop-indicator"></div>` : nothing}
    `;
	}
	renderChildren() {
		return renderHierarchyChildren(Array.from(this.element.children), this.hideSelectors, this.showSelectors, false, this.temporalOnly);
	}
};
__decorate([consume({
	context: hierarchyContext,
	subscribe: true
})], EFHierarchyItem.prototype, "hierarchyContext", void 0);
__decorate([consume({
	context: selectionContext,
	subscribe: true
})], EFHierarchyItem.prototype, "canvasSelectionContext", void 0);
__decorate([property({
	type: Object,
	attribute: false
})], EFHierarchyItem.prototype, "element", void 0);
__decorate([property({
	type: Array,
	attribute: false
})], EFHierarchyItem.prototype, "hideSelectors", void 0);
__decorate([property({
	type: Array,
	attribute: false
})], EFHierarchyItem.prototype, "showSelectors", void 0);
__decorate([property({
	type: Boolean,
	attribute: false
})], EFHierarchyItem.prototype, "temporalOnly", void 0);
__decorate([state()], EFHierarchyItem.prototype, "localExpanded", void 0);
EFHierarchyItem = __decorate([customElement("ef-hierarchy-item")], EFHierarchyItem);
/**
* Generate a friendly label for an element based on its type and siblings
*/
function getFriendlyLabel(element, typeLabel) {
	const id = element.id || "";
	if (id && !id.includes("-") && !id.match(/^\d+$/)) return id;
	const parent = element.parentElement;
	if (parent) {
		const tagName = element.tagName;
		const siblings = Array.from(parent.children).filter((child) => child.tagName === tagName);
		const index = siblings.indexOf(element) + 1;
		if (siblings.length === 1) return typeLabel;
		return `${typeLabel} ${index}`;
	}
	return typeLabel;
}
let EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.filmSlate);
	}
	get typeColor() {
		return getElementTypeColor("timegroup", this);
	}
	displayLabel() {
		const label = getFriendlyLabel(this.element, "Composition");
		const mode = this.element.mode || "fixed";
		return html`${label} <span style="opacity: 0.5; font-size: 0.65rem;">${{
			fixed: "Fixed",
			sequence: "Sequence",
			contain: "Container",
			fit: "Fit"
		}[mode] || mode}</span>`;
	}
};
EFTimegroupHierarchyItem = __decorate([customElement("ef-timegroup-hierarchy-item")], EFTimegroupHierarchyItem);
let EFAudioHierarchyItem = class EFAudioHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.speakerHigh);
	}
	get typeColor() {
		return "rgb(34, 197, 94)";
	}
	displayLabel() {
		return getFriendlyLabel(this.element, "Audio");
	}
};
EFAudioHierarchyItem = __decorate([customElement("ef-audio-hierarchy-item")], EFAudioHierarchyItem);
let EFVideoHierarchyItem = class EFVideoHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.filmStrip);
	}
	get typeColor() {
		return "rgb(59, 130, 246)";
	}
	displayLabel() {
		return getFriendlyLabel(this.element, "Video");
	}
};
EFVideoHierarchyItem = __decorate([customElement("ef-video-hierarchy-item")], EFVideoHierarchyItem);
let EFCaptionsHierarchyItem = class EFCaptionsHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.subtitles);
	}
	get typeColor() {
		return "rgb(34, 197, 94)";
	}
	displayLabel() {
		return getFriendlyLabel(this.element, "Captions");
	}
};
EFCaptionsHierarchyItem = __decorate([customElement("ef-captions-hierarchy-item")], EFCaptionsHierarchyItem);
let EFCaptionsActiveWordHierarchyItem = class EFCaptionsActiveWordHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.microphone);
	}
	get typeColor() {
		return "rgb(34, 197, 94)";
	}
	displayLabel() {
		return "Active Word";
	}
};
EFCaptionsActiveWordHierarchyItem = __decorate([customElement("ef-captions-active-word-hierarchy-item")], EFCaptionsActiveWordHierarchyItem);
let EFTextHierarchyItem = class EFTextHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.textT);
	}
	get typeColor() {
		return "rgb(249, 115, 22)";
	}
	get hasChildren() {
		return false;
	}
	displayLabel() {
		return getFriendlyLabel(this.element, "Text");
	}
	renderChildren() {
		return nothing;
	}
};
EFTextHierarchyItem = __decorate([customElement("ef-text-hierarchy-item")], EFTextHierarchyItem);
let EFTextSegmentHierarchyItem = class EFTextSegmentHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.textT);
	}
	get typeColor() {
		return "rgb(249, 115, 22)";
	}
	displayLabel() {
		return "Segment";
	}
};
EFTextSegmentHierarchyItem = __decorate([customElement("ef-text-segment-hierarchy-item")], EFTextSegmentHierarchyItem);
let EFWaveformHierarchyItem = class EFWaveformHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.waveform);
	}
	get typeColor() {
		return "rgb(34, 197, 94)";
	}
	renderChildren() {
		return nothing;
	}
};
EFWaveformHierarchyItem = __decorate([customElement("ef-waveform-hierarchy-item")], EFWaveformHierarchyItem);
let EFImageHierarchyItem = class EFImageHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return phosphorIcon(ICONS.image);
	}
	get typeColor() {
		return "rgb(168, 85, 247)";
	}
	displayLabel() {
		return getFriendlyLabel(this.element, "Image");
	}
};
EFImageHierarchyItem = __decorate([customElement("ef-image-hierarchy-item")], EFImageHierarchyItem);
let EFHTMLHierarchyItem = class EFHTMLHierarchyItem$1 extends EFHierarchyItem {
	get icon() {
		return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;
	}
};
EFHTMLHierarchyItem = __decorate([customElement("ef-html-hierarchy-item")], EFHTMLHierarchyItem);

//#endregion
export { EFAudioHierarchyItem, EFCaptionsActiveWordHierarchyItem, EFCaptionsHierarchyItem, EFHTMLHierarchyItem, EFHierarchyItem, EFImageHierarchyItem, EFTextHierarchyItem, EFTextSegmentHierarchyItem, EFTimegroupHierarchyItem, EFVideoHierarchyItem, EFWaveformHierarchyItem, renderHierarchyChildren, shouldRenderElement };
//# sourceMappingURL=EFHierarchyItem.js.map