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 { TargetController } from "../../elements/TargetController.js";
import { selectionContext } from "../../canvas/selection/selectionContext.js";
import { hierarchyContext } from "./hierarchyContext.js";
import { renderHierarchyChildren } from "./EFHierarchyItem.js";
import { consume, provide } from "@lit/context";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js";

//#region src/gui/hierarchy/EFHierarchy.ts
let EFHierarchy = class EFHierarchy$1 extends TWMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this.target = "";
		this.header = "";
		this.showHeader = false;
		this.targetElement = null;
		this.hierarchyState = {
			selectedElementId: null,
			expandedIds: /* @__PURE__ */ new Set(),
			draggedElementId: null,
			dropTargetId: null,
			dropPosition: null
		};
		this.hierarchyActions = {
			select: (elementId) => {
				const selectionCtx = this.getCanvasSelectionContext();
				if (selectionCtx) if (elementId) {
					const element = document.getElementById(elementId);
					if (element) {
						const canvas = element.closest("ef-canvas");
						if (canvas && canvas.tryRegisterElement) canvas.tryRegisterElement(element);
					}
					selectionCtx.select(elementId);
				} else selectionCtx.clear();
				else this.hierarchyState = {
					...this.hierarchyState,
					selectedElementId: elementId
				};
				this.dispatchEvent(new CustomEvent("hierarchy-select", {
					detail: { elementId },
					bubbles: true,
					composed: true
				}));
			},
			toggleExpanded: (elementId) => {
				const newExpanded = new Set(this.hierarchyState.expandedIds);
				if (newExpanded.has(elementId)) newExpanded.delete(elementId);
				else newExpanded.add(elementId);
				this.hierarchyState = {
					...this.hierarchyState,
					expandedIds: newExpanded
				};
			},
			setExpanded: (elementId, expanded) => {
				const newExpanded = new Set(this.hierarchyState.expandedIds);
				if (expanded) newExpanded.add(elementId);
				else newExpanded.delete(elementId);
				this.hierarchyState = {
					...this.hierarchyState,
					expandedIds: newExpanded
				};
			},
			startDrag: (elementId) => {
				this.hierarchyState = {
					...this.hierarchyState,
					draggedElementId: elementId
				};
			},
			updateDropTarget: (targetId, position) => {
				if (targetId === this.hierarchyState.draggedElementId) return;
				this.hierarchyState = {
					...this.hierarchyState,
					dropTargetId: targetId,
					dropPosition: position
				};
			},
			endDrag: () => {
				this.hierarchyState = {
					...this.hierarchyState,
					draggedElementId: null,
					dropTargetId: null,
					dropPosition: null
				};
			},
			reorder: (sourceId, targetId, position) => {
				this.dispatchEvent(new CustomEvent("hierarchy-reorder", {
					detail: {
						sourceId,
						targetId,
						position
					},
					bubbles: true,
					composed: true
				}));
			}
		};
		this.providedContext = {
			state: this.hierarchyState,
			actions: this.hierarchyActions,
			getCanvasSelectionContext: () => this.getCanvasSelectionContext(),
			getHighlightedElement: () => this.getHighlightedElement(),
			setHighlightedElement: (el) => this.setHighlightedElement(el)
		};
	}
	static {
		this.styles = [css`
      :host {
        display: block;
        overflow: auto;
        height: 100%;
        font-size: 12px;
        
        /* Component tokens (reference globals from ef-theme.css) */
        --hierarchy-bg: var(--ef-color-bg);
        --hierarchy-border: var(--ef-color-border);
        --hierarchy-text: var(--ef-color-text);
        --hierarchy-hover-bg: var(--ef-color-hover);
        --hierarchy-selected-bg: var(--ef-color-selected);
        --hierarchy-ancestor-selected-bg: var(--ef-color-selected-subtle);
        --hierarchy-focused-bg: var(--ef-color-focused);
        --hierarchy-drop-indicator: var(--ef-color-primary);
      }
      
      .hierarchy-container {
        background: var(--hierarchy-bg);
        color: var(--hierarchy-text);
        padding: 4px 0;
      }
      
      .header {
        padding: 8px 12px;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ef-color-text-muted);
        border-bottom: 1px solid var(--hierarchy-border);
        margin-bottom: 4px;
      }
      
      .empty {
        padding: 16px;
        text-align: center;
        color: var(--ef-color-text-subtle);
        font-style: italic;
      }
    `];
	}
	/**
	* Get the target canvas element.
	* The canvas is the source of truth for selection and highlight state.
	*/
	getCanvas() {
		if (this.targetElement && this.targetElement.selectionContext) return this.targetElement;
		if (this.target) {
			const target = document.getElementById(this.target);
			if (target && target.selectionContext) return target;
		}
		return null;
	}
	/**
	* Get canvas selection context from the target canvas element.
	* Used when hierarchy is a sibling of canvas (can't access via Lit context).
	*/
	getCanvasSelectionContext() {
		if (this.canvasSelectionContext) return this.canvasSelectionContext;
		return this.getCanvas()?.selectionContext;
	}
	/**
	* Get the currently highlighted element from the canvas.
	*/
	getHighlightedElement() {
		return this.getCanvas()?.highlightedElement ?? null;
	}
	/**
	* Set the highlighted element on the canvas.
	* Called when user hovers an item in the hierarchy.
	*/
	setHighlightedElement(element) {
		this.getCanvas()?.setHighlightedElement(element);
	}
	getTargetElement() {
		if (this.targetElement) return this.targetElement;
		if (this.target) return document.getElementById(this.target);
		return null;
	}
	getRootElements() {
		const target = this.getTargetElement();
		if (!target) return [];
		if (isEFTemporal(target)) return [target];
		return Array.from(target.children);
	}
	initializeExpandedState() {
		const roots = this.getRootElements();
		const newExpanded = /* @__PURE__ */ new Set();
		const addExpandedIds = (element) => {
			if (element.id) newExpanded.add(element.id);
			for (const child of Array.from(element.children)) if (child.children.length > 0) addExpandedIds(child);
		};
		for (const root of roots) addExpandedIds(root);
		this.hierarchyState = {
			...this.hierarchyState,
			expandedIds: newExpanded
		};
	}
	select(elementId) {
		this.hierarchyActions.select(elementId);
	}
	getSelectedElementId() {
		const selectionCtx = this.getCanvasSelectionContext();
		if (selectionCtx) {
			const selectedIds = Array.from(selectionCtx.selectedIds);
			if (selectedIds.length === 0) return null;
			return selectedIds[0];
		}
		return this.hierarchyState.selectedElementId;
	}
	willUpdate(changedProperties) {
		if (changedProperties.has("target") && !this.targetController) this.targetController = new TargetController(this);
		this.setupSelectionListener();
		const selectionCtx = this.getCanvasSelectionContext();
		if (selectionCtx) {
			const selectedIds = Array.from(selectionCtx.selectedIds);
			const selectedId = selectedIds.length === 0 ? null : selectedIds[0];
			if (this.hierarchyState.selectedElementId !== selectedId) this.hierarchyState = {
				...this.hierarchyState,
				selectedElementId: selectedId
			};
		}
		this.providedContext = {
			state: this.hierarchyState,
			actions: this.hierarchyActions,
			getCanvasSelectionContext: () => this.getCanvasSelectionContext(),
			getHighlightedElement: () => this.getHighlightedElement(),
			setHighlightedElement: (el) => this.setHighlightedElement(el)
		};
		super.willUpdate(changedProperties);
	}
	connectedCallback() {
		super.connectedCallback();
		this.initializeExpandedState();
		this.setupSelectionListener();
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.removeSelectionListener();
	}
	updated(changedProperties) {
		super.updated(changedProperties);
		if (changedProperties.has("targetElement") || changedProperties.has("target")) {
			this.initializeExpandedState();
			this.removeSelectionListener();
			this.selectionChangeHandler = void 0;
			this.setupSelectionListener();
			this.autoSelectFirstRootTimegroup();
		}
	}
	/**
	* Auto-select the first root timegroup if nothing is currently selected
	*/
	autoSelectFirstRootTimegroup() {
		if (this.getSelectedElementId()) return;
		const roots = this.getRootElements();
		for (const root of roots) if (root.tagName.toLowerCase() === "ef-timegroup" && root.id) {
			this.hierarchyActions.select(root.id);
			return;
		}
		for (const root of roots) if (root.id) {
			this.hierarchyActions.select(root.id);
			return;
		}
	}
	setupSelectionListener() {
		if (this.selectionChangeHandler) return;
		const selectionCtx = this.getCanvasSelectionContext();
		if (selectionCtx && "addEventListener" in selectionCtx) {
			this.selectionChangeHandler = () => {
				this.requestUpdate();
			};
			selectionCtx.addEventListener("selectionchange", this.selectionChangeHandler);
		}
	}
	removeSelectionListener() {
		const selectionCtx = this.getCanvasSelectionContext();
		if (selectionCtx && "removeEventListener" in selectionCtx && this.selectionChangeHandler) {
			selectionCtx.removeEventListener("selectionchange", this.selectionChangeHandler);
			this.selectionChangeHandler = void 0;
		}
	}
	render() {
		const roots = this.getRootElements();
		return html`
      <div class="hierarchy-container" part="list">
        ${this.showHeader ? html`<div class="header" part="header">${this.header}</div>` : nothing}
        ${roots.length > 0 ? renderHierarchyChildren(roots, this.hideSelectors, this.showSelectors, true) : html`<div class="empty">No elements</div>`}
      </div>
    `;
	}
};
__decorate([property({ type: String })], EFHierarchy.prototype, "target", void 0);
__decorate([property({ type: String })], EFHierarchy.prototype, "header", void 0);
__decorate([property({
	type: Boolean,
	attribute: "show-header"
})], EFHierarchy.prototype, "showHeader", void 0);
__decorate([property({
	type: Array,
	attribute: false
})], EFHierarchy.prototype, "hideSelectors", void 0);
__decorate([property({
	type: Array,
	attribute: false
})], EFHierarchy.prototype, "showSelectors", void 0);
__decorate([state()], EFHierarchy.prototype, "targetElement", void 0);
__decorate([consume({
	context: selectionContext,
	subscribe: true
})], EFHierarchy.prototype, "canvasSelectionContext", void 0);
__decorate([state()], EFHierarchy.prototype, "hierarchyState", void 0);
__decorate([provide({ context: hierarchyContext }), state()], EFHierarchy.prototype, "providedContext", void 0);
EFHierarchy = __decorate([customElement("ef-hierarchy")], EFHierarchy);

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