/*
 * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
 * @Date: 2022-07-12 11:20:29
 * @LastEditors: 吴永生 15770852798@163.com
 * @LastEditTime: 2022-11-10 17:40:11
 * @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import classNames from "classnames";
import { useMemo } from "react";
import { Handle, Position } from "react-flow-renderer";

import { uuid } from "@/utils/util";
import { IBatchNode } from "../../interface";

import styles from "./index.module.css";
import MyTooltip from "@/components/mui/MyTooltip";

/** 自定义batch节点 */
const BatchNode = (props: IBatchNode) => {
	const { data } = props;
	const {
		style,
		isFlowNode,
		selectedStatus,
		info: { title, isCheck, executionStatus, parameters },
		flowType,
	} = data;
	/** 获取输入参数数组 */
	const inParamsArr = useMemo(() => {
		return (
			(parameters?.length &&
				parameters?.filter((item) => {
					return item.parameterGroup === "in";
				})) ||
			[]
		);
	}, [parameters]);

	/** 获取输出参数数组 */
	const outParamsArr = useMemo(() => {
		return (
			(parameters?.length &&
				parameters?.filter((item) => {
					return item.parameterGroup === "out";
				})) ||
			[]
		);
	}, [parameters]);

	return (
		<div
			className={classNames({
				[styles.batchNode]: true,
				[styles.selectedBatchBox]: selectedStatus,
				[styles.runBatchNode]: executionStatus === "Running",
				[styles.doneBatchNode]: executionStatus === "Done",
				[styles.errorBatchNode]: executionStatus === "Failed",
			})}
			style={style}
		>
			{inParamsArr?.length
				? inParamsArr.map((item, index) => {
						return (
							<MyTooltip title={item.title} key={uuid()}>
								<Handle
									className={styles.handleBox}
									id={item.name}
									style={{
										backgroundColor: "rgba(19, 112, 255, 1)",
										border: item.error
											? "1px solid #FF4E4E"
											: "1px solid #fff",
										left: index * 24 + 20,
										top: isFlowNode ? '-47px' : '-3px',
									}}
									type="target"
									position={Position.Top}
								/>
							</MyTooltip>
						);
				  })
				: null}
			<div
				className={classNames({
					[styles.batchRotate]: isFlowNode,
				})}
			>
				{title || ""}
				{isCheck && flowType !== "edit" ? (
					<span className={styles.successDot}></span>
				) : null}
			</div>
			{outParamsArr?.length
				? outParamsArr.map((item, index) => {
						return (
							<MyTooltip title={item.title} key={uuid()}>
								<Handle
									className={styles.handleBox}
									id={item.name}
									style={{
										backgroundColor: "rgba(19, 112, 255, 1)",
										border: "1px solid #FFF",
										left: index * 24 + 20,
									}}
									type="source"
									position={Position.Bottom}
								/>
							</MyTooltip>
						);
				  })
				: null}
		</div>
	);
};

export default BatchNode;
