import {CircleNodeModel, CircleNode, h} from "@logicflow/core"

export const END_NODE_TYPES = {
	CLOSE: 'end-close'
};

export class EndNodeModel extends CircleNodeModel {
	initNodeData(data) {
		super.initNodeData(data);
		this.r = data.r || 20;
		// 禁止编辑
		this.text.editable = false;
		this.text.draggable = false;
	}

	/**
	 * 默认锚点：去掉右侧
	 */
	getDefaultAnchor() {
		const anchors = super.getDefaultAnchor();
		return anchors.filter(a => {
			return a.x <= this.x;
		});
	}

	getTextStyle() {
		return {
			...super.getTextStyle(),
			display: 'none'
		};
	}
}

export class EndNodeView extends CircleNode {
	getShape() {
		const {model} = this.props
		const {x, y, r, type} = model

		let iconPaths: string[] = [];
		switch (type) {
			case END_NODE_TYPES.CLOSE:
				iconPaths = ['M678.528 642.304c0 17.6-14.4 32-32 32h-268.992a32 32 0 0 1-32-32V381.696a32 32 0 0 1 32-32h268.992c17.6 0 32 14.4 32 32v260.608z']; // 三角形
				break;
		}

		return h('g', {},
			// 外圆
			h('circle', {
				cx: x,
				cy: y,
				r,
				fill: '#F89898',
				stroke: '#F56C6C',
				strokeWidth: 2,
				fillOpacity: 0.3,
				strokeOpacity: 1
			}),
			...iconPaths.map(d => h("path", {
				d,
				fill: '#F56C6C',
				transform: `translate(${x}, ${y}) scale(0.03) translate(-512, -512)`
			}))
		)
	}
}
