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

class AndNodeModel extends RectNodeModel {
    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"
            }
        })
    }

    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
    }

    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`,
            },
        ];
    }
}

class AndNodeView 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: style.stroke,
                        d: "M941 503.3H805.2c-3-55.8-25.8-107.8-65.2-147.6-42.3-42.8-98.5-66.4-158.3-66.4H243.5c-6.9 0-12.5 5.6-12.5 12.5v94.5H95.6c-6.9 0-12.5 5.6-12.5 12.5s5.6 12.5 12.5 12.5H231v189H95.6c-6.9 0-12.5 5.6-12.5 12.5s5.6 12.5 12.5 12.5H231v94.5c0 6.9 5.6 12.5 12.5 12.5h338.2c59.8 0 116-23.6 158.3-66.4 39.3-39.8 62.2-91.8 65.2-147.6H941c6.9 0 12.5-5.6 12.5-12.5 0-7-5.6-12.5-12.5-12.5z m-359.3 214H256v-403h325.7c105.5 0 192.1 83.7 198.5 189 0.3 4.1 0.4 8.3 0.4 12.5s-0.1 8.4-0.4 12.5c-6.4 105.3-93 189-198.5 189z"
                    })
                ]
            )
        ])
    }
}

export default {
    type: "AND",
    view: AndNodeView,
    model: AndNodeModel
};