import React from 'react';
import { useEffect, useState } from 'react';

import './global.less';
import './index.less';
import Head from '../components/Head';
import LeftBar from '../components/LeftBar';
import BottomBar from '../components/BottomBar';
import RightBar from '../components/RightBar';
import CenterTopData from '../components/CenterTopData';
import Slider from '../components/Slider';

import V3DBG from '../assets/V3DBG.png';

import V3D from './V3D';

import { SocketContextProvider } from '../store/socket-data-provider';

export default function index() {
	const [width, setWidth] = useState(window.innerWidth);
	const [value, setValue] = useState(100);

	const v = (value / 100).toFixed(2);
	const styles = {
		transform: `scale(${v})`,
		// transform: `scale(${v * 24 / 33}, ${v})`,
		transformOrigin: 'top left',
	};

	useEffect(() => {
		let fn = (e) => {
			console.log('add fn');
			if (e.shiftKey && e.key === 'L') {
				document.getElementById('slider').classList.toggle('show');
			}
		};
		let fn2 = () => {
			console.log('add fn2');
			setTimeout(() => {
				document.getElementById('slider').classList.remove('show');
			}, 200);
		};

		document.addEventListener('keydown', fn);
		document.getElementById('slider').addEventListener('mouseleave', fn2);

		return () => {
			console.log('remove fn, fn2');
			document.removeEventListener('keydown', fn);
			document.getElementById('slider').removeEventListener('mouseleave', fn2);
		};
	}, [value]);

	return (
		// <FullScreenContainer>
		<SocketContextProvider>
			<div id="FullScreen" style={styles}>
				<Head />
				<div className="Main">
					<LeftBar />
					<div className="Center">
						<div className="CenterData">
							<CenterTopData />
						</div>
						<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
						<div className="V3DBorder">{/* <V3D /> */}</div>
						<div className="Button">
							<BottomBar />
						</div>
					</div>
					<RightBar />
				</div>
			</div>
			<Slider handleSlide={setValue} />
		</SocketContextProvider>
		// </FullScreenContainer>
	);
}
