import {useState} from "react";
import {
    correct,
    finishButton,
    insulinTestQuestions,
    nextButton,
    stepperLabels,
    yourScore
} from "../../public/lit/texts";
import {Stepper} from "react-stepa";
import {useRecoilValue} from "recoil";
import {languageAtom} from "../atoms/languageAtom";
import {Texts} from "../hooks/useAnimate";
import {useTranslate} from "../hooks/useTranslate";
import {useNavigate} from "react-router-dom";

const InsulinTest = () => {
    const language = useRecoilValue(languageAtom);
    const [currentStep, setCurrentStep] = useState(0);
    const nextButtonText = useTranslate(nextButton);
    const finishButtonText = useTranslate(finishButton);
    const correctButtonText = useTranslate(correct);
    const scoreText = useTranslate(yourScore);
    const [selectedAnswer, setSelectedAnswer] = useState(null);
    const [isAnswered, setIsAnswered] = useState(false);
    const [score, setScore] = useState(0);
    const navigate = useNavigate();

    const handleNextStep = () => {
        setCurrentStep(currentStep + 1);
        setSelectedAnswer(null);
        setIsAnswered(false);
    };

    const handleAnswerClick = (index: any) => {
        if (!isAnswered) {
            setSelectedAnswer(index);
            setIsAnswered(true);
            if (insulinTestQuestions[currentStep].answers[index].isCorrect) {
                setScore(score + 1);
            }
        }
    };

    const isLastStep = currentStep === insulinTestQuestions.length - 1;
    const isSummaryStep = currentStep === insulinTestQuestions.length;

    return (
        <div className="container mx-auto py-8">
            <Stepper
                customStyle={{
                    completed: '#3D348B',
                    pending: '#aaccff',
                    progress: '#5599ff',
                }}
                steps={stepperLabels.map((question) => ({
                    label: question[language as keyof Texts],
                    description: ""
                }))}

                activeStep={currentStep}
            />
            <div className="text-center">
                {isSummaryStep ? (
                    <p className="text-xl font-semibold py-4">
                        {`${scoreText} ${(score / insulinTestQuestions.length) * 100}%`}
                    </p>
                ) : (
                    <p className="text-xl font-semibold py-4">
                        {language === "EN"
                            ? insulinTestQuestions[currentStep].EN
                            : insulinTestQuestions[currentStep].SK}
                    </p>
                )}
            </div>
            <div className="text-center mt-4">
                {isSummaryStep ? (
                    <button
                        className="bg-primary-light hover:bg-primary-main text-white font-bold py-2 px-4 rounded"
                        onClick={() => navigate("/")}
                    >
                        {nextButtonText}
                    </button>
                ) : (
                    <div>
                        <div>
                            {insulinTestQuestions[currentStep].answers.map((answer, index) => (
                                <button
                                    key={index}
                                    className={`bg-primary-dark ${
                                        selectedAnswer === index
                                            ? answer.isCorrect
                                                ? "bg-green-500"
                                                : "bg-red-500"
                                            : ""
                                    } ${
                                        selectedAnswer !== null ? "cursor-not-allowed" : ""
                                    } hover:bg-primary-light font-bold py-2 px-4 rounded mr-4`}
                                    onClick={() => handleAnswerClick(index)}
                                    disabled={isAnswered}
                                >
                                    {language === "EN" ? answer.EN : answer.SK}
                                </button>
                            ))}
                        </div>
                        {selectedAnswer !== null && (
                            <div
                                className={`text-${insulinTestQuestions[currentStep].answers[selectedAnswer].isCorrect ? "green" : "red"}-500 mt-4`}>
                                {insulinTestQuestions[currentStep].answers[selectedAnswer].isCorrect
                                    ? `${correctButtonText}`
                                    : insulinTestQuestions[currentStep].explanation[language as keyof Texts]}
                            </div>
                        )}
                        {!isLastStep && (
                            <button
                                className={`${!isAnswered ? 'bg-gray-main' : 'bg-primary-light  hover:bg-primary-main'} text-white font-bold mt-4 py-2 px-4 rounded`}
                                onClick={handleNextStep}
                                disabled={!isAnswered}
                            >
                                {nextButtonText}
                            </button>
                        )}
                        {isLastStep && (
                            <button
                                className={`${!isAnswered ? 'bg-gray-main' : 'bg-primary-light  hover:bg-primary-main'} text-white font-bold mt-4 py-2 px-4 rounded`}
                                onClick={() => {
                                    setCurrentStep(currentStep + 1);
                                }}
                                disabled={!isAnswered}
                            >
                                {finishButtonText}
                            </button>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
};
export default InsulinTest;