import * as React from 'react';

export interface BackgroundGridProps {
	level?: number;
	images: string[];
	parentKey?: React.Key;
}

export const BackgroundGrid: React.FC<BackgroundGridProps> = ({
	level = 0,
	images,
	parentKey = level,
}) => {
	const [values, setValues] = React.useState<(string | null)[]>();

	React.useEffect(() => {
		const newValues = [];

		for (let i = 0; i < 4; i += 1) {
			if (level < 1) {
				newValues.push(null);
				continue;
			}

			if (level < 3) {
				const hasInnerGrid = Math.floor(Math.random() * 2) === 1;
				if (hasInnerGrid) {
					newValues.push(null);
					continue;
				}
			}

			const randomImage = images[Math.floor(Math.random() * images.length)];
			newValues.push(randomImage);
		}

		setValues(newValues);
	}, []);

	return (
		<div className="grid grid-cols-2 grid-rows-2 w-full h-full">
			{values?.map((value, index) => {
				if (value === null) {
					return (
						<BackgroundGrid
							images={images}
							level={level + 1}
							key={`${parentKey}:${index}`}
						/>
					);

					// return (
					// 	level < 3
					// 		? (
					// 			<BackgroundGrid
					// 				images={images}
					// 				level={level + 1}
					// 				key={index}
					// 			/>
					// 		)
					// 		: <div />
					// );
				}

				return (
					<div
						key={`${parentKey}:${index}`}
						className="bg-cover bg-center border border-shade"
						style={{backgroundImage: `url("${value}")`}}
					/>
				);
			})}
		</div>
	);
}
