import React from "react";
import GameQuestion from "./GameQuestion";
import { useGame } from "../../hooks/useGame";

export default function GameObjects({ blocks }) {
	const { setCurrentGameModal, answers } = useGame();

	if (!blocks) return null;

	return (
		<>
			{blocks.map((block, id) => {
				const hasAnswered = answers && answers[id]?.userAnswer;
				return (
					<img
						className={`lhoist-blocks-focus-object ${
							hasAnswered ? "lhoist-blocks-focus-object--inactive" : ""
						}`}
						style={{
							height: `${block.attrs.objectScale}%`,
							top: `${block.attrs.objectPosition?.y * 100}%`,
							left: `${block.attrs.objectPosition?.x * 100}%`,
						}}
						key={id}
						src={block.attrs.objectPictureUrl}
						alt={block.attrs.objectPictureAlt}
						draggable='false'
						// onClick={() => console.log(block.attrs.objectBehaviourDescription)}
						// onClick={() => console.log(block.attrs.objectBehaviourDescription)}
						onClick={() =>
							setCurrentGameModal(
								<GameQuestion
									questionId={id}
									correctAnswer={block.attrs.behaviourType}
								/>
							)
						}
					/>
				);
			})}
		</>
	);
}