import { Button, Form, Input, message } from "antd";
import { useEffect } from "react";
import { useNavigate } from "react-router";
import { createMeasure } from "../../../services/measure/analysis";
import { useAppSelector } from "../../../utils/hooks";

export default function MeasureConfig() {
	const navigate = useNavigate();
	const [messageApi, contextHolder] = message.useMessage();

	const context = useAppSelector(store => store.context);
	const onFinish = (values: any) => {
		console.log("Received values of form: ", values);
		createMeasure({
			operatorName: values["username"],
			name: values["measureName"],
			lineName: values["lineName"],
			location: values["position"],
		}).then(res => {
			if (res.status !== 0) {
				messageApi.error(res.data.info);
			} else {
				navigate("../action");
			}
		});
	};

	const [form] = Form.useForm();
	useEffect(() => {
		form.setFieldsValue({
			username: context.user.loginUser.nickname || "",
		});
	}, [context.user.loginUser.nickname, form]);
	return (
		<>
			{contextHolder}

			<div className="h-full flex justify-center items-center">
				<Form
					form={form}
					labelCol={{ span: 8 }}
					wrapperCol={{ span: 16 }}
					style={{ minWidth: 360, maxWidth: 600 }}
					size="large"
					initialValues={{ remember: true }}
					onFinish={onFinish}
					// onFinishFailed={onFinishFailed}
					autoComplete="off">
					<Form.Item label="操作员" name="username">
						<Input disabled />
					</Form.Item>

					{/* <Form.Item label="轨型" name="trackType">
					<Select>
						<Select.Option value="demo">Demo</Select.Option>
					</Select>
				</Form.Item> */}
					{/* <Form.Item label="核校" name="calibrationType">
					<Select>
						<Select.Option value="demo">Demo</Select.Option>
					</Select>
				</Form.Item> */}
					<Form.Item
						label="测量名称"
						name="measureName"
						rules={[{ required: true, message: "Please input your username!" }]}>
						<Input />
					</Form.Item>
					<Form.Item
						label="线路名称"
						name="lineName"
						rules={[{ required: true, message: "Please input your username!" }]}>
						<Input />
					</Form.Item>
					<Form.Item label="位置" name="position" rules={[{ required: true, message: "Please input your username!" }]}>
						<Input />
					</Form.Item>
					{/* <Form.Item label="方向" name="direction" rules={[{ required: true, message: "Please input your username!" }]}>
					<Input />
				</Form.Item> */}

					<Form.Item label={null}>
						<Button type="primary" size="large" style={{ width: 220 }} htmlType="submit">
							开始测量
						</Button>
					</Form.Item>
				</Form>
			</div>
		</>
	);
}