import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
import { App, createApp, h, ref, VNode } from "vue";
import VueNode from "./CommonHtml.vue"

class CommonHtmlNode extends HtmlNodeModel {
    setAttributes() {
        this.properties.name = this.properties.name || "id";
        this.text.editable = false; // 禁止节点文本编辑
        // 设置节点宽高和锚点
        const width = 90;
        const height = 60;
        this.width = width;
        this.height = height;
        this.anchorsOffset = [
            [width / 2, 0],
            [0, height / 2],
            [-width / 2, 0],
            [0, -height / 2],
        ]
    }
}

class CommonHtmlView extends HtmlNode {
    app: App<Element>;
    isMounted: boolean;
    r: VNode;

    constructor(props: any) {
        super(props);
        this.isMounted = false

        this.r = h(VueNode, {
            properties: props.model.getProperties()
        })
        this.app = createApp({
            render: () => this.r
        });
    }

    setHtml(rootEl: HTMLElement) {
        if (!this.isMounted) {
            this.isMounted = true;
            const node = document.createElement("div");
            rootEl.appendChild(node);
            this.app.mount(node);
        } else {
            this.r.component!.props.properties = this.props.model.getProperties()
        }
    }
}

export default {
    type: "ID",
    view: CommonHtmlView,
    model: CommonHtmlNode
};