import React, {useState, useEffect, useCallback} from 'react';
import DesktopRoot from './DesktopRoot';
import MobileRoot from './MobileRoot';

/**
 * @return {jsx} The root component
 */
export default function Root() {
	const [windowSize, setWindowSize] = useState(0);
	const [content, setContent]: any = useState();

	const handleWindowResize = useCallback((_event) => {
		setWindowSize(window.innerWidth);
	}, []);

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

	useEffect(() => {
		if (windowSize > 1200) {
			setContent(<DesktopRoot windowSize={windowSize} />);
		} else {
			setContent(<MobileRoot windowSize={windowSize} />);
		}
	}, [windowSize]);

	return (
		<div id='root'>
			{content}
		</div>
	);
}