import './App.less'
import { Outlet } from 'react-router-dom';
import Layout from './layout';
import { useEffect, useState } from 'react';
import React from 'react';

export const DispatchApp = React.createContext<APPAPI.AppReactContent | null>(null);

function App() {

	/**************************************/
	const [scrollY, setScrollY] = useState<number>(0); // 当前滚动距离  
	const [scrollDirection, setScrollDirection] = useState<string>(); // 记录滚动方向 
	/**************************************/

	const handleResize = () => {
		const containerWidth = document.querySelector('.container')?.clientWidth
		const htmlElement = document.querySelector('html');
		if (containerWidth && htmlElement) {
			htmlElement.style.fontSize = containerWidth / 750 * 100 + 'px'
		}
	};

	useEffect(() => {
		handleResize()
		window.addEventListener('resize', handleResize);
		return () => {
			window.removeEventListener('resize', handleResize);
		};
	}, []);

	useEffect(() => {
		const handleScroll = () => {
			const currentScrollY = window.scrollY || document.documentElement.scrollTop;
			if (currentScrollY > scrollY) {
				setScrollDirection('down');
			} else if (currentScrollY < scrollY) {
				setScrollDirection('up');
			}
			setScrollY(currentScrollY);
		};

		window.addEventListener('scroll', handleScroll);
		return () => {
			window.removeEventListener('scroll', handleScroll);
		};
	}, [scrollY]);

	return <DispatchApp.Provider value={{
		scrollY,
		scrollDirection
	}}>
		<Layout>
			<div className='container'>
				<Outlet />
			</div>
		</Layout>
	</DispatchApp.Provider>
}

export default App