import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router";
import GridLayer from "./graph/GridLayer";
import StandardLayer from "./graph/StandardLayer";

export default function MeasureAction() {
	const navigate = useNavigate();
	const [sideVal, setSideVal] = useState<1 | 2>(1);

	const onSideChange = (e: RadioChangeEvent) => {
		setSideVal(e.target.value);
	};
	const onAfterSaveChange: CheckboxProps["onChange"] = e => {
		console.log(`checked = ${e.target.checked}`);
	};
	const onAnalysisBtnClick = () => {
		navigate("../detail");
	};
	return (
		<div className="flex h-full ">
			<div className="flex-none border relative">
                <GridLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} columns={10} rows={7} cellNum={10} />
				<div className="absolute top-0">
				<StandardLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30}  />
				</div>
            </div>
			<div className="w-[300px] flex-none py-6">
				<h1 className="font-medium text-xl text-center">测量步骤</h1>
				<section className="flex flex-col items-center gap-4 mt-6 border-t border-[#D8D8D8] py-4">
					<Radio.Group
						value={sideVal}
						onChange={onSideChange}
						options={[
							{ value: 1, label: "测量左侧" },
							{ value: 2, label: "测量右侧" },
						]}
					/>
					<Button style={{ width: 200 }} size="large" type="primary">
						开始测量
					</Button>
					<Button style={{ width: 200 }} size="large" type="primary" onClick={onAnalysisBtnClick}>
						分析
					</Button>
					<Button style={{ width: 200 }} size="large" type="primary">
						保存
					</Button>
					<Checkbox onChange={onAfterSaveChange}>保存后自动开始新测量</Checkbox>
				</section>
			</div>
		</div>
	);
}