import { useState } from "react";
import MyInput from "@/components/mui/MyInput";
import MySelect from "@/components/mui/MySelect";
import MyButton from "@/components/mui/MyButton";
import style from "./index.module.css";

type IAddEnvironmentProps = {
	// addOpen: boolean;
};

const AddEnvironment = (props: IAddEnvironmentProps) => {
	// const { addOpen } = props;
	const [taskType, setTaskType] = useState<"BATCH" | "FOLOW">("BATCH");
	const [name, setName] = useState("");
	const [baseEnvId, setBaseEnvId] = useState("");
	const [nameHelper, setNameHelper] = useState({
		error: false,
		text: "30字符以内，仅限字母、数字、中文",
	});
	const [desc, setDesc] = useState("");

	const handleNameChange = (e: any) => {
		console.log(e);
	};

	const handleDescChange = (e: any) => {
		console.log(e);
	};

	return (
		<div className={style.addEnvironment}>
			<div className={style.left}></div>
			<div className={style.right}>
				<div className={style.title}>
					{taskType === "BATCH" ? "批式环境信息" : "流式环境信息"}
				</div>
				<div className={style.content}>
					<div className={style.form}>
						<div className={style.label}>
							环境名称<span className={style.required}>*</span>
						</div>
						<div className={style.formItem}>
							<MyInput
								value={name}
								onChange={handleNameChange}
								error={nameHelper.error}
								helperText={nameHelper.text}
							></MyInput>
						</div>
						<div className={style.label}>
							描述<span className={style.required}>*</span>
						</div>
						<div className={style.formItem}>
							<MyInput
								value={desc}
								id="desc"
								label="项目描述"
								multiline
								rows={4}
								placeholder="请输入项目描述"
								onChange={handleDescChange}
							/>
							<span
								style={{
									position: "absolute",
									fontSize: "14px",
									bottom: "7px",
									right: "12px",
									color: desc.length >= 300 ? "#d32f2f" : "#C2C6CC",
								}}
							>
								{desc.length}/300
							</span>
						</div>
						<div className={style.label}>
							基础环境<span className={style.required}>*</span>
						</div>
						<div className={style.formItem}>
							<MySelect
								options={[]}
								fullWidth
								placeholder="请选择基础环境"
								value={baseEnvId}
							></MySelect>
						</div>
						<div className={style.label}>
							上传环境压缩包<span className={style.zipText}>（.zip）</span>
							<span className={style.required}>*</span>
						</div>
						<div className={style.formItem}>uploader</div>
					</div>
					<div className={style.codeBox}>
						<div className={style.codeTitle}>
							{taskType === "BATCH" ? "Shell脚本" : "Python脚本"}
						</div>
						<div className={style.code}></div>
					</div>
				</div>
				<div className={style.button}>
					<MyButton text="开始构建"></MyButton>
				</div>
			</div>
		</div>
	);
};
export default AddEnvironment;
