import React, { useEffect } from "react";

import "./App.scss";
import { Outlet, useNavigate } from "react-router";
import { Layout } from "antd";
import { default as AppHeader } from "./components/Header";
import { default as AppFooter } from "./components/Footer";
import SideMenu from "./components/SideMenu";
import { createWebSocket, sharedWsUrl } from "./services/socket";
import { useAppDispatch } from "./utils/hooks";
import { updateDeviceState } from "./store/device/deviceState";
const { Header, Footer, Sider, Content } = Layout;

function App() {
	const dispatch = useAppDispatch();
	const navigate = useNavigate();

	useEffect(() => {
		//连接websocket
		const wsClient = createWebSocket(sharedWsUrl);
		const subscription = wsClient.dataOb.subscribe(data => {
			if (data.messageType === "DeviceContext") {
				// if (data.data.loginFlag) {
				// 	dispatch(updateUser(data.data));
				// 	navigate("/measure/config");
				// } else {
				// 	navigate("/login");
				// }
			} else if (data.messageType === "STATE") {
				dispatch(updateDeviceState(data.data));
			}
		});
		wsClient.connect();
		return () => subscription.unsubscribe();
	});

	useEffect(() => {
		if (localStorage.getItem("user")) {
			navigate("/measure/config", { replace: true });
		} else {
			navigate("/login");
		}
	}, [navigate]);

	const headerStyle: React.CSSProperties = {
		height: 64,
		padding: 0,
	};

	const footerStyle: React.CSSProperties = {
		height: 64,
		padding: 0,
	};

	const layoutStyle = {
		overflow: "hidden",
	};

	return (
		<div className="">
			<Layout style={layoutStyle}>
				<Sider width="200px">
					<SideMenu />
				</Sider>
				<Layout>
					<Header style={headerStyle}>
						<AppHeader />
					</Header>
					<Content>
						<Outlet />
					</Content>
					<Footer style={footerStyle}>
						<AppFooter />
					</Footer>
				</Layout>
			</Layout>
		</div>
	);
}

export default App;