import React, { useState } from "react";
import Lottie from "lottie-react";
import { useNavigate } from "react-router-dom";

import Modal from "../../components/ui/Modal.jsx";
import cup from "../../assets/img/illustrations/cup.svg";
import celebration from "../../assets/animations/celebration.json";
import celebrationConfettis from "../../assets/animations/trophee-confettis.json";
import celebrationConfettisFixe from "../../assets/animations/trophee-confettis-fixe.json";
import sucessIcon from "../../assets/img/icons/behaviour-type-success.svg";
import modalBackground from "../../assets/img/shapes-background/modal-background.svg";

export default function ResultsModals({ resultsDatas }) {
	const navigate = useNavigate();
	const [isModalOpen, setIsModalOpen] = useState(true);

	if (!resultsDatas) return navigate("/home");

	const { gameStats, contextGameDatas } = resultsDatas;

	function goRating() {
		setIsModalOpen(false);
		navigate("/rating");
	}

	console.log("resultsDatas", resultsDatas);

	return (
		<Modal className='results-modal' open={isModalOpen} onClose={goRating}>
			<div className='modal-content-container game-question-container'>
				<Lottie
					className='modal-content-container__celebration'
					animationData={celebrationConfettis}
					loop
					autoplay
				/>
				<Lottie
					className='modal-content-container__celebration-confettis-fixe'
					animationData={celebrationConfettisFixe}
					loop={false}
					autoplay
				/>
				<h1 className='titling-construction '>Rapport de sécurité</h1>
				<h2>Félicitations !</h2>
				<div className='visual-results'>
					<img className='visual-results__cup' src={cup} alt='' />
					<div className='visual-results__score'>
						{gameStats.level_score}
						<img className='succes-indicator' src={sucessIcon} alt='' />
					</div>
				</div>
				<p className='results-explanation'>
					Un accident est vite arrivé si nous n'y prêtons pas attention. N'oublions pas
					que ce jeu reflète la réalité de notre environnement de travail.
				</p>
				<button
					className='cta cta--construction cta--round cta--button-icon cta--home'
					onClick={goRating}></button>
			</div>
		</Modal>
	);
}
