import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent, message } from "antd";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import SectionalView from "./SectionalView";
import { startMeasurement } from "../../../services/measure/analysis"
import { createWebSocket, sharedWsUrl } from "../../../services/socket";

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");
	};

	useEffect(()=>{
		connectWebpacket()
	},[])

	const connectWebpacket = ()=>{
		//连接websocket
		const wsClient = createWebSocket(sharedWsUrl);
		let subscription = wsClient.dataOb.subscribe(data => {
			console.log('data--wsClient-显示上报的数据')
		});
		wsClient.connect();
	}
	
	const onStart = () => {
		startMeasurement().then(res=>{
			console.log('startMeasurement===', res)
			message.success('已通知设备开始测量')
		})
	}
	return (
		<div className="flex h-full ">
			<div className="flex-none border">
                <SectionalView width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} columns={10} rows={7} cellNum={10} />
            </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">
					<div>正在测量的状态</div>
					{/* <Radio.Group
						value={sideVal}
						onChange={onSideChange}
						options={[
							{ value: 1, label: "测量左侧" },
							{ value: 2, label: "测量右侧" },
						]}
					/> */}
					<Button style={{ width: 200 }} size="large" type="primary" onClick={onStart}>
						开始测量
					</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>
	);
}