import { HtmlNodeModel, RectNode, h } from "@logicflow/core";
import { CommonTheme } from "@logicflow/core/types/constant/DefaultTheme";

class OrNodeModel extends HtmlNodeModel {
    initNodeData(data: any) {
        super.initNodeData(data);

        this.sourceRules.push({
            message: "只允许从右边的锚点连出",
            validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
                return sourceAnchor?.type === "right";
            },
        });

        this.targetRules.push({
            message: "只允许连到左边的锚点",
            validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
                return targetAnchor?.type === "left"
            }
        })
    }

    getDefaultAnchor() {
        const { width, height, x, y, id } = this;
        return [
            {
                x: x - width / 2,
                y: y + height / 4,
                type: "left",
                edgeAddable: false, // 控制锚点是否可以从此锚点手动创建连线。默认为true。
                id: `${id}_0`,
            },
            {
                x: x - width / 2,
                y: y - height / 4,
                type: "left",
                edgeAddable: false, // 控制锚点是否可以从此锚点手动创建连线。默认为true。
                id: `${id}_1`,
            },
            {
                x: x + width / 2,
                y,
                type: "right",
                id: `${id}_2`,
            },
        ];
    }
    setAttributes() {
        this.properties.name = this.properties.name || "common";
        this.text.editable = false; // 禁止节点文本编辑
        // 设置节点宽高
        this.width = 72;
        this.height = 36;
    }

    getNodeStyle(): CommonTheme {
        const style = super.getNodeStyle();
        style.fill = "#fff";
        style.strokeWidth = 0
        return style
    }
}

class OrNodeView extends RectNode {
    getShape(): h.JSX.Element {
        const { model } = this.props
        const { x, y, width, height } = model;
        const style = model.getNodeStyle();
        const newWidth = width + 50
        const newHeight = height + 50
        return h("g", {}, [
            h("rect", {
                ...style,
                x: x - width / 2,
                y: y - height / 2,
                width,
                height
            }),
            h(
                "svg",
                {
                    x: x - newWidth / 2,
                    y: y - newHeight / 2,
                    width: newWidth,
                    height: newHeight,
                    viewBox: "0 0 1024 1024"
                },
                [
                    h("path", {
                        fill: "transparent",
                        stroke: "black",
                        strokeWidth: "24",
                        d: "M250 290 C400 400 400 624 250 734 M250 290 C1000 400 1000 624 250 734 M800 512 L924 512 M100 400 L340 400 M100 624 L340 624"
                    })
                ]
            )
        ])
    }
}

export default {
    type: "OR",
    view: OrNodeView,
    model: OrNodeModel
};