import { ContextMixin } from "./ContextMixin.js";
import { TWMixin } from "./TWMixin2.js";
import { LitElement, css, html } from "lit";
import { customElement, eventOptions, property } from "lit/decorators.js";
import _decorate from "@oxc-project/runtime/helpers/decorate";
import { createRef, ref } from "lit/directives/ref.js";
let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement)) {
	constructor(..._args) {
		super(..._args);
		this.rendering = false;
		this.focusOverlay = createRef();
		this.drawOverlays = () => {
			const focusOverlay = this.focusOverlay.value;
			if (focusOverlay) if (this.focusedElement) {
				focusOverlay.style.display = "block";
				const rect = this.focusedElement.getBoundingClientRect();
				Object.assign(focusOverlay.style, {
					position: "fixed",
					top: `${rect.top}px`,
					left: `${rect.left}px`,
					width: `${rect.width}px`,
					height: `${rect.height}px`
				});
				requestAnimationFrame(this.drawOverlays);
			} else focusOverlay.style.display = "none";
		};
	}
	static {
		this.styles = [css`
      :host {
        display: block;
        width: 100%;
        height: 100%;
      }
    `];
	}
	handleStageWheel(event) {
		event.preventDefault();
	}
	connectedCallback() {
		document.body.style.width = "100%";
		document.body.style.height = "100%";
		document.documentElement.style.width = "100%";
		document.documentElement.style.height = "100%";
		super.connectedCallback();
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		document.body.style.width = "";
		document.body.style.height = "";
		document.documentElement.style.width = "";
		document.documentElement.style.height = "";
	}
	update(changedProperties) {
		super.update(changedProperties);
		if (changedProperties.has("focusedElement")) this.drawOverlays();
	}
	render() {
		if (this.rendering || typeof window !== "undefined" && window.EF_RENDERING?.() === true) return html`
        <slot class="fixed inset-0 h-full w-full" name="canvas"></slot>
      `;
		return html`
      <div
        class="grid h-full w-full bg-slate-800"
        style="grid-template-rows: 1fr 300px; grid-template-columns: 100%;"
      >
        <div
          class="relative h-full w-full overflow-hidden"
          @wheel=${this.handleStageWheel}
        >
          <ef-fit-scale class="h-full grid place-content-center">
            <slot name="canvas" class="contents"></slot>
          </ef-fit-scale>
          <div
            class="border border-blue-500 bg-blue-200 bg-opacity-20 absolute"
            ${ref(this.focusOverlay)}
          ></div>
        </div>

        <slot class="overflow inline-block" name="timeline"></slot>
      </div>
    `;
	}
};
_decorate([property({ type: Boolean })], EFWorkbench.prototype, "rendering", void 0);
_decorate([eventOptions({
	passive: false,
	capture: true
})], EFWorkbench.prototype, "handleStageWheel", null);
EFWorkbench = _decorate([customElement("ef-workbench")], EFWorkbench);
export { EFWorkbench };
