import React, {useState, useEffect, useCallback} from 'react';
import Shader from './Shader';
import WhoAmI from './WhoAmI';
import Git from './Git';
import DownloadCV from './DownloadCV';
import ClickMe from './ClickMe';

/**
 * @return {jsx} The root component
 */
export default function Root() {
	const [windowSize, setWindowSize] = useState(0);
	const [trigger, setTrigger] = useState(0);
	const [content, setContent]: any = useState([]);
	
	const Shaders = [
		'BaseRaymarching',
		'Collapse',
		'Droplets',
		'Inception',
		'Menstom',
		'Torus',
		'Triangle',
		'BaseLattice',
	];

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

	useEffect(() => {
		let newContent = [];
		let randomContent = [];
		let shadersRandom = [];
		let imagesRandom = [];

		shadersRandom.push(Math.floor(Math.random() * 8));
		shadersRandom.push(Math.floor(Math.random() * 8));
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[0]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[1]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[2]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[3]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[4]]} /></div>);
		newContent.push(<div className='tile'><WhoAmI /></div>);
		newContent.push(<div className='tile'><Git windowSize={windowSize} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[5]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[6]]} /></div>);
		newContent.push(<div className='tile'><DownloadCV windowSize={windowSize} /></div>);
		newContent.push(<div className='tile'><ClickMe windowSize={windowSize} setTrigger={setTrigger} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[7]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[8]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[9]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[10]]} /></div>);
		newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[11]]} /></div>);
		setContent(newContent);
	}, [trigger]);


	return (
		<div id='root'>
			{content}
			{/* <div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><WhoAmI /></div>
			<div className='tile'><Git windowSize={windowSize} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><DownloadCV windowSize={windowSize} /></div>
			<div className='tile'><ClickMe windowSize={windowSize} setTrigger={setTrigger} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div>
			<div className='tile'><Shader name={Shaders[0]} /></div> */}
		</div>
	);
}