import React, {useState, useEffect} from 'react';
import Shader from './Shader';
import WhoAmIMobile from './WhoAmIMobile';
import GitMobile from './GitMobile';
import DownloadCVMobile from './DownloadCVMobile';
import ClickMe from './ClickMe';
import Player from './Player';

interface MobileRootProps {
	windowSize: number;
}

/**
 * @return {jsx} The root component
 */
export default function MobileRoot({windowSize}: MobileRootProps) {
	const [trigger, setTrigger] = useState(0);
	const [content, setContent]: any = useState([]);
	const [busy, setBusy]: any = useState(true);
	const loader: Array<any> = [];

	for (let i = 0; i < 2; i++) {
		loader.push(
			<div className='tile-mobile-element'>
				<div
					className='
						tile-child
						d-flex
						flex-column
						align-items-center
						justify-content-center'>
					<div className='d-inline loader'></div>
				</div>
			</div>);
	}
	loader.push(<div className='tile-mobile-main'><WhoAmIMobile /></div>);
	loader.push(
		<div className='tile-mobile-main'>
			<GitMobile />
		</div>);
	loader.push(
		<div className='tile-mobile-downloadcv'>
			<DownloadCVMobile />
		</div>);
	loader.push(
		<div className='tile-mobile-main'>
			<ClickMe
				windowSize={windowSize}
				setTrigger={setTrigger}
				setBusy={setBusy} />
		</div>);
	for (let i = 0; i < 2; i++) {
		loader.push(
			<div className='tile-mobile-element'>
				<div
					className='
						tile-child
						d-flex
						flex-column
						align-items-center
						justify-content-center'>
					<div className='d-inline loader'></div>
				</div>
			</div>);
	}
	const Shaders = [
		'BaseRaymarching',
		'Droplets',
		'Inception',
		'Menstom',
		'Torus',
		'Triangle',
		'BaseLattice',
	];

	const Sounds = [
		'Collapse.mp3',
		'Droplets.mp3',
		'Heavy Ropes.mp3',
		'Inception.mp3',
		'Menstom.mp3',
		'Speechless.mp3',
		'Triangle.mp3',
	];

	useEffect(() => {
		const newContent = [];
		const shadersRandom: Array<any> = [];
		const imagesRandom: Array<any> = [];
		const soundsRandom: Array<any> = [];

		shadersRandom.push(
			<div className='tile-mobile-element'>
				<Shader name={Shaders[Math.floor(Math.random() * 7)]} />
			</div>);

		for (let i = 0; i < 2; i++) {
			imagesRandom.push(Math.floor(Math.random() * 12) + 1);
			while (imagesRandom.indexOf(
				imagesRandom[imagesRandom.length - 1]) !=
				imagesRandom.length - 1) {
				imagesRandom[imagesRandom.length - 1] += 1;
				if (imagesRandom[imagesRandom.length - 1] == 13) {
					imagesRandom[imagesRandom.length - 1] = 1;
				}
			}
		}
		for (let i = 0; i < 2; i++) {
			imagesRandom[i] =
				<div className='tile-mobile-element'>
					<img
						className='img-mobile'
						src={'/static/images/' +
						imagesRandom[i].toString() +
						'.jpg'}>
					</img>
				</div>;
		}

		soundsRandom.push(
			<div className='tile-mobile-element'>
				<Player src={'/static/sounds/' +
				Sounds[Math.floor(Math.random() * 7)]}/>
			</div>);

		newContent.push(shadersRandom[0]);
		newContent.push(soundsRandom[0]);
		newContent.push(
			<div className='tile-mobile-main'>
				<WhoAmIMobile />
			</div>);
		newContent.push(
			<div className='tile-mobile-main'>
				<GitMobile />
			</div>);
		newContent.push(
			<div className='tile-mobile-downloadcv'>
				<DownloadCVMobile />
			</div>);
		newContent.push(
			<div className='tile-mobile-main'>
				<ClickMe
					windowSize={windowSize}
					setTrigger={setTrigger}
					setBusy={setBusy} />
			</div>);
		newContent.push(imagesRandom[0]);
		newContent.push(imagesRandom[1]);
		setContent(newContent);
		setBusy(false);
	}, [trigger]);


	return (
		<div id='root'>
			{busy ? loader : content}
		</div>
	);
}