import { Constants } from "../Constants";
import { ThreeUtils } from "../utils";
export class AlEdge {
    static get Object() {
        return {
            schema: {
                node1: { type: "string" },
                node2: { type: "string" }
            },
            updateDistance() {
                const start = document
                    .querySelector("#" + this.data.node1)
                    .getAttribute("position");
                const end = document
                    .querySelector("#" + this.data.node2)
                    .getAttribute("position");
                if (this.el.getAttribute("line")) {
                    this.el.removeAttribute("line");
                }
                this.el.setAttribute("line", `
          start: ${ThreeUtils.vector3ToString(start)};
          end: ${ThreeUtils.vector3ToString(end)};
          color: ${this.state.color};
        `);
                ThreeUtils.waitOneFrame(() => {
                    const dist = start.distanceTo(end);
                    let textEl = document.querySelector("#" + this.state.titleId);
                    textEl.setAttribute("text", `
          value: ${dist.toFixed(4) + " units"};
          side: double;
          baseline: bottom;
          anchor: center;
        `);
                    const textDir = start
                        .clone()
                        .sub(end.clone())
                        .normalize();
                    const textPos = textDir.multiplyScalar(dist);
                    this.el.setAttribute("position", ThreeUtils.vector3ToString(textPos));
                    textEl.setAttribute("position", ThreeUtils.vector3ToString(textPos));
                    console.log(textPos);
                });
            },
            bindListeners() {
                this.node1Listener = this.node1Listener.bind(this);
                this.node2Listener = this.node2Listener.bind(this);
                this.updateDistance = this.updateDistance.bind(this);
            },
            addListeners() {
                this.el.addEventListener(this.state.node1Event, this.node1Listener, {
                    capture: false,
                    once: false,
                    passive: true
                });
                this.el.addEventListener(this.state.node2Event, this.node2Listener, {
                    capture: false,
                    once: false,
                    passive: true
                });
            },
            removeListeners() {
                this.el.removeEventListener(this.state.node1Event, this.node1Listener, false);
                this.el.removeEventListener(this.state.node2Event, this.node2Listener, false);
            },
            node1Listener(_event) {
                this.updateDistance();
            },
            node2Listener(_event) {
                this.updateDistance();
            },
            init() {
                const node1Event = this.data.node1 + Constants.movedEventString;
                const node2Event = this.data.node2 + Constants.movedEventString;
                const titleId = this.el.id + Constants.titleIdString;
                this.state = {
                    node1: this.data.node1,
                    node2: this.data.node2,
                    node1Event,
                    node2Event,
                    titleId,
                    color: Constants.edgeColors.normal
                };
                this.bindListeners();
                this.addListeners();
                this.updateDistance();
            },
            remove() {
                this.removeListeners();
            }
        };
    }
    static get Tag() {
        return "al-edge";
    }
}
export class AlEdgeEvents {
}
