import { Canvas } from "@react-three/fiber";
import { OrbitControls, PerspectiveCamera, Sky } from "@react-three/drei";
import * as THREE from "three";
import React, { useEffect, useRef, useState } from "react";
import Ocean from "../components/3d/Ocean";
import Axes from "../components/3d/Axes";
import Character from "../components/3d/Character";
import Floor from "../components/3d/Floor";
import Marker from "../components/3d/Marker";
import Modal from "../components/Modal";
import { randInt } from "three/src/math/MathUtils.js";











export default function GamePage() {
    const [stateModal, setStateModal] = useState("none" as "none" | "flex");
    const [questionIndex, setQuestionIndex] = useState(0);

    const QuestionList = [
        // Ensemble de questions sur la polution des océans
        // {question:string, reponse_idx:int, choix:[string, string, string, string]}
        {
            question: "Quel est le plus grand océan du monde ?",
            reponse_idx: 1,
            choix: ["Océan Atlantique", "Océan Pacifique", "Océan Indien", "Océan Arctique"]
        },
        {
            question: "Comment s'appelle les continents de plastique dans les océans ?",
            reponse_idx: 2,
            choix: ["Plastico", "Plastiland", "Plastiques", "Plastiques"]
        },
        {
            question: "Quel est le nom de la grande masse d'eau salée qui recouvre la majorité de la surface de la Terre ?",
            reponse_idx: 3,
            choix: ["Mer", "Lac", "Océan", "Rivière"]
        },
        {
            question: "Quel est l'océan le plus froid ?",
            reponse_idx: 0,
            choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
        },
        {
            question: "Quel est l'océan le plus chaud ?",
            reponse_idx: 1,
            choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
        },
        {
            question: "Quel est l'océan le plus profond ?",
            reponse_idx: 1,
            choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
        },
        {
            question: "Quel est l'océan le plus grand ?",
            reponse_idx: 2,
            choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
        }
    ]

    
    const [valides, setValides] = useState([false, false, false, false, false, false]);
    const [markerIndex, setMarkerIndex] = useState(0);
    
    const askQuestion = (markerIndex: number) => {
        setQuestionIndex(randInt(0, QuestionList.length - 1));
        setStateModal("flex");
        setMarkerIndex(markerIndex);
    }

    const MakerList = [
        { position: [0, -0.1, 0],         onClick: () => askQuestion(0) }, // body
        { position: [-0.5, -0.1, 2.5],         onClick: () => askQuestion(1) }, // left foot
        { position: [0.5, -0.1, 2.5],         onClick: () => askQuestion(2) }, // right foot
        { position: [-1, -0.1, 1],         onClick: () => askQuestion(3) }, // left hand
        { position: [1, -0.1, 1],         onClick: () => askQuestion(4) }, // right hand
        { position: [0, -0.1, -1],         onClick: () => askQuestion(5) }, // head
    ]

    // Win condition
    useEffect(() => {
        if (valides.every(valide => valide)) {
            
        }
    }, [valides])


    console.log(stateModal, setStateModal);
    return (
        <div id="canvas-container"
            style={{
                width: "100%",
                height: "100%",
                position: "fixed",
                top: 0,
                left: 0,
                zIndex: -1
            }}
            >
                { !valides.every(valide => valide) === true ?
            <p 
                style={{
                    position: "relative",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "5%",
                    backgroundColor: "rgba(0, 0, 0, 1)",
                    color: "white",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    margin: 0
                }}
            > <strong>Hint : </strong> Répondez correctement aux questions pour sauver le personnage</p>
            : <p 
                style={{
                    position: "relative",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "5%",
                    backgroundColor: "rgba(0, 0, 0, 1)",
                    color: "white",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    margin: 0
                }}
            > <strong>Good Game : </strong> Bravo, vous avez sauvé le personnage</p>
            }
            <Canvas>
                <Sky sunPosition={[100, 10, 100]} />
                <OrbitControls />
                <Ocean />
                <Axes />
                <Character />
                <Floor />
                {/* <Marker position={[0, 1, 0]} color="red" /> */}
                {MakerList.map((marker, index) => (
                    <Marker key={index} position={marker.position} color={valides[index] ? "green" : "red"} onClick={marker.onClick} />
                ))}
                <PerspectiveCamera makeDefault position={[0, 10, 3]}  />
            </Canvas>
            <Modal state={stateModal} setState={setStateModal} question={QuestionList[questionIndex]} valides={[valides, setValides]} markerIndex={markerIndex} />
        </div>
    )
}