import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { treeContext } from "./treeContext.js";
import { consume } from "@lit/context";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js";

//#region src/gui/tree/EFTreeItem.ts
let EFTreeItem = class EFTreeItem$1 extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.localExpanded = true;
	}
	static {
		this.styles = css`
    :host {
      display: block;
    }

    .item-row {
      display: flex;
      align-items: center;
      height: var(--tree-item-height, 1.5rem);
      padding-left: var(--tree-item-padding-left, 0.5rem);
      padding-right: var(--tree-item-padding-right, 0.5rem);
      font-size: var(--tree-item-font-size, 0.75rem);
      cursor: pointer;
      user-select: none;
      color: var(--tree-text);
    }

    .item-row:hover {
      background: var(--tree-hover-bg);
    }

    .item-row[data-selected] {
      background: var(--tree-selected-bg);
    }

    .expand-icon {
      width: var(--tree-expand-icon-size, 1rem);
      height: var(--tree-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(--tree-icon-gap, 0.25rem);
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }

    .label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }

    .children {
      padding-left: var(--tree-indent, 1rem);
    }

    .children[data-collapsed] {
      display: none;
    }
  `;
	}
	get isSelected() {
		if (!this.treeContext || !this.item) return false;
		return this.treeContext.state.selectedId === this.item.id;
	}
	get isExpanded() {
		if (!this.treeContext || !this.item) return this.localExpanded;
		return this.treeContext.state.expandedIds.has(this.item.id);
	}
	get hasChildren() {
		return Boolean(this.item?.children && this.item.children.length > 0);
	}
	handleClick(e) {
		e.stopPropagation();
		if (this.treeContext && this.item) this.treeContext.actions.select(this.item.id);
	}
	handleExpandClick(e) {
		e.stopPropagation();
		if (this.treeContext && this.item) this.treeContext.actions.toggleExpanded(this.item.id);
		else this.localExpanded = !this.localExpanded;
	}
	render() {
		if (!this.item) return nothing;
		const expanded = this.isExpanded;
		return html`
      <div
        class="item-row"
        ?data-selected=${this.isSelected}
        @click=${this.handleClick}
      >
        ${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>`}
        ${this.item.icon ? html`<span class="icon">${this.item.icon}</span>` : nothing}
        <span class="label">${this.item.label}</span>
      </div>
      ${this.hasChildren ? html`
            <div class="children" ?data-collapsed=${!expanded}>
              ${this.item.children.map((child) => html`<ef-tree-item .item=${child}></ef-tree-item>`)}
            </div>
          ` : nothing}
    `;
	}
};
__decorate([consume({
	context: treeContext,
	subscribe: true
})], EFTreeItem.prototype, "treeContext", void 0);
__decorate([property({
	type: Object,
	attribute: false
})], EFTreeItem.prototype, "item", void 0);
__decorate([state()], EFTreeItem.prototype, "localExpanded", void 0);
EFTreeItem = __decorate([customElement("ef-tree-item")], EFTreeItem);

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