import useExamStore from "@/stores/examStore";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import TimerEndedModal from "../TimerEndedModal";
import clsx from "clsx";
import { BsStopwatch } from "react-icons/bs";

interface Props {
    minTimer: number;
    disableTimer?: boolean;
    standalone?: boolean;
}

const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) => {
    const [timer, setTimer] = useState(minTimer * 60);
    const [showModal, setShowModal] = useState(false);
    const [warningMode, setWarningMode] = useState(false);

    const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
    const { timeSpent } = useExamStore((state) => state);

    useEffect(() => setTimer((prev) => prev - timeSpent), [timeSpent]);

    useEffect(() => {
        if (!disableTimer) {
            const timerInterval = setInterval(() => setTimer((prev) => prev - 1), 1000);

            return () => {
                clearInterval(timerInterval);
            };
        }
    }, [disableTimer, minTimer]);

    useEffect(() => {
        if (timer <= 0) setShowModal(true);
    }, [timer]);

    useEffect(() => {
        if (timer < 300 && !warningMode) setWarningMode(true);
    }, [timer, warningMode]);

    return (
        <>
            <TimerEndedModal
                isOpen={showModal}
                onClose={() => {
                    setHasExamEnded(true);
                    setShowModal(false);
                }}
            />
            <motion.div
                className={clsx(
                    "absolute right-6 bg-mti-gray-seasalt px-4 py-3 flex items-center gap-2 rounded-full text-mti-gray-davy",
                    standalone ? "top-6" : "top-4", 
                    warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
                )}
                initial={{ scale: warningMode && !disableTimer ? 0.8 : 1 }}
                animate={{ scale: warningMode && !disableTimer ? 1.1 : 1 }}
                transition={{ repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut" }}>
                <BsStopwatch className="w-6 h-6" />
                <span className="text-base font-semibold w-12">
                    {timer > 0 && (
                        <>
                            {Math.floor(timer / 60)
                                .toString(10)
                                .padStart(2, "0")}
                            :
                            {Math.floor(timer % 60)
                                .toString(10)
                                .padStart(2, "0")}
                        </>
                    )}
                    {timer <= 0 && <>00:00</>}
                </span>
            </motion.div>
        </>
    );
}

export default Timer;
