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

import sucessIcon from "../../assets/img/icons/behaviour-type-success.svg";
import errorIcon from "../../assets/img/icons/behaviour-type-error.svg";

export default function GameAnwerExplanation({ questionId }) {
	const { answers, contextGameDatas, setCurrentGameModal, checkIfGameIsComplete } = useGame();
	const answer = answers[questionId];

	const answerExplanation =
		contextGameDatas.gameObjects[questionId].attrs.objectBehaviourDescription ??
		"Pas d'explication pour cette question";
	const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;

	return (
		<div className='modal-content-container answer-explanation-container'>
			<div className='modal-content-container__content'>
				{answer.userAnsweredCorrectly === true && (
					<>
						<div></div>
						<h3 className='answer-explanation__type answer-explanation__type--success '>
							Bonne réponse !
							<img
								className='success-icon success-icon--success'
								src={sucessIcon}
								alt=''
							/>
						</h3>
					</>
				)}
				{answer.userAnsweredCorrectly === false && (
					<>
						<h3 className='answer-explanation__type answer-explanation__type--error'>
							Mauvaise réponse
							<img
								className='success-icon success-icon--error'
								src={errorIcon}
								alt=''
							/>
						</h3>
					</>
				)}
				<h2 className='answer-explanation__title'>C'est un risque</h2>
				<p>{answerExplanation}</p>
				<button
					onClick={() => {
						setCurrentGameModal(null);
						checkIfGameIsComplete();
					}}
					className='continue-game cta cta--construction cta--round cta--button-icon cta--next'
				/>
			</div>
			<div className='modal-content-container__cover'>
				<img src={objectPictureUrl} alt='' />
			</div>
		</div>
	);
}