import React, { useState } from "react";

interface ModalProps {
    state: "none" | "flex",
    setState: (state: "none" | "flex") => void
    question : {
        question: string,
        reponse_idx: number,
        choix: string[]
    },
    valides?: [boolean[], React.Dispatch<React.SetStateAction<boolean[]>>],
    markerIndex?: number
}

export default function Modal({ state, setState, question, valides, markerIndex }: ModalProps) {
    const [isSuccess, setIsSuccess] = useState(false);
    const [isSubmitted, setIsSubmitted] = useState(false);
    console.log(state, setState, question)
    return (
        <div style={{
            position: "fixed",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            justifyContent: "center",
            alignItems: "center",
            display: state
        }}>
            <div style={{
                width: "40%",
                height: "40%",
                backgroundColor: "white",
                borderRadius: 10,
                padding: 20
            }}>
                {
                    isSuccess ? <p>CONGRATULATIONS</p> : isSubmitted && !isSuccess && <p>WRONG : CORRECT ANSWER IS {question.choix[question.reponse_idx]}</p>
                }
                <h2>{question.question}</h2>
                <div style={{ display: "flex", flexDirection: "column" }}>
                    {
                        question.choix.map((choix, index) => (
                            <button key={index} onClick={() => {
                                setIsSubmitted(true);
                                if (index === question.reponse_idx) {
                                    console.log("Correct")
                                    setIsSuccess(true);
                                    const newValides = [...valides![0]];
                                    newValides[markerIndex!] = true;
                                    valides![1](newValides);


                                } else {
                                    console.log("Wrong")
                                    setIsSuccess(false);
                                }
                            }}
                                style={{
                                    backgroundColor: isSubmitted && index === question.reponse_idx ? "green" : isSubmitted && index !== question.reponse_idx ? "red" : "white",
                                    color: isSubmitted && index === question.reponse_idx ? "white" : "black"   
                                }}
                                disabled={isSubmitted}
                            >{choix}</button>
                        ))
                    }
                <div/>
                <button onClick={() => {
                    setIsSubmitted(false);
                    setIsSuccess(false);
                    setState("none");
                }}>Close</button>
            </div>
        </div>
    </div>

    )}