import MyDialog from "@/components/mui/MyDialog";
import MyInput from "@/components/mui/MyInput";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useState } from "react";
import useMyRequest from "@/hooks/useMyRequest";
import { saveBatchActor } from "@/api/project_api";
import { useStores } from "@/store";

import { useMessage } from "@/components/MySnackbar";
import { toJS } from "mobx";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
import positionTransform from "../../utils";
interface IProps {
	saveFormDialog: boolean;
	setSaveFormDialog: (val: boolean) => void;
	operatorList: ITask[];
	setShowCustomOperator: any;
}
const SaveOperator = (props: IProps) => {
	const {
		saveFormDialog,
		setSaveFormDialog,
		operatorList,
		setShowCustomOperator,
	} = props;
	const { currentProjectStore } = useStores();
	const Message = useMessage();
	const productId = toJS(currentProjectStore.currentProductInfo.id);
	const [title, setTitle] = useState("");
	const [version, setVersion] = useState("1.0.0");
	const [description, setDescription] = useState("");

	// 保存批算子
	const { run: saveBatchActorRun, loading } = useMyRequest(saveBatchActor, {
		onSuccess: (res) => {
			Message.success("保存算子成功");
			sessionStorage.setItem("operatorList", "[]");
			setSaveFormDialog(false);
			setShowCustomOperator();
		},
	});

	const [titleHelper, setTitleHelper] = useState({
		// 算子名称错误提示
		error: false,
		helperText: "",
	});
	const [versionHelper, setVersionHelper] = useState({
		// 算子版本错误提示
		error: false,
		helperText: "",
	});

	// 关闭表单弹窗
	const handleCloseDialog = () => {
		setSaveFormDialog(false);
	};

	// 算子名称
	const handleTitleChange = (e: any) => {
		const title = e.target.value;
		setTitle(title);
		checkTitle(title);
	};

	// 算子版本
	const handleVersionChange = (e: any) => {
		let version = e.target.value;
		setVersion(version);
		checkVersion(version);
	};

	// 算子描述
	const handleDescriptionChange = (e: any) => {
		let description = e.target.value;
		if (description.length < 301) {
			setDescription(description);
		}
	};

	// 校验算子名称
	const checkTitle = (title: string) => {
		if (!title) {
			setTitleHelper({
				error: true,
				helperText: "必须输入算子名称",
			});
			return false;
		} else if (title.length > 15) {
			setTitleHelper({
				error: true,
				helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
			});
			return false;
		} else if (!checkIsNumberLetterChinese(title)) {
			setTitleHelper({
				error: true,
				helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
			});
			return false;
		} else {
			setTitleHelper({
				error: false,
				helperText: "",
			});
			return true;
		}
	};

	// 校验版本号格式
	const checkVersion = (version: string) => {
		if (/^[1-9]\d?(\.(0|[1-9]\d?)){2}$/.test(version)) {
			setVersionHelper({
				error: false,
				helperText: "",
			});
			return true;
		} else {
			setVersionHelper({
				error: true,
				helperText: "格式不正确，必须为X.Y.Z格式，且XYZ必须为0~99的正整数",
			});
			return false;
		}
	};

	// 表单弹窗确定，新建算子
	const handleOncofirm = () => {
		if (checkTitle(title) && checkVersion(version)) {
			saveBatchActorRun({
				query: {
					productId: productId as string,
					batchName: title,
					batchVersion: version,
					description: description,
				},
				body: positionTransform(operatorList),
			});
		}
	};

	return (
		<MyDialog
			open={saveFormDialog}
			title="保存算子"
			onClose={handleCloseDialog}
			onConfirm={handleOncofirm}
			loading={loading}
		>
			<div style={{ width: "388px" }}>
				<MyInput
					value={title}
					label="算子名称"
					onChange={handleTitleChange}
					required
					error={titleHelper.error}
					helperText={titleHelper.helperText}
					style={{ margin: "20px 0" }}
				></MyInput>
				<MyInput
					value={version}
					label="版本号"
					onChange={handleVersionChange}
					error={versionHelper.error}
					helperText={versionHelper.helperText}
					style={{ marginBottom: "20px" }}
				></MyInput>
				<div style={{ position: "relative" }}>
					<MyInput
						value={description}
						id="desc"
						label="算子描述"
						placeholder="算子描述"
						onChange={handleDescriptionChange}
						multiline
						rows={4}
					/>
					<span
						style={{
							position: "absolute",
							fontSize: "14px",
							top: "96px",
							right: "12px",
							color: description.length >= 300 ? "#d32f2f" : "#C2C6CC",
						}}
					>
						{description.length}/300
					</span>
				</div>
			</div>
		</MyDialog>
	);
};

export default SaveOperator;
