import { Module } from "@/interfaces";
import { ExerciseOnlyExam, LevelPart, ListeningPart, PartExam, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
import useExamStore, { usePersistentExamStore } from "@/stores/exam";
import { Tab, TabGroup, TabList } from "@headlessui/react";
import clsx from "clsx";
import React from "react";
import hasDivider from "../utils/hasDivider";

interface Props {
    module: Module;
    sectionLabel: string;
    seenParts: Set<number>;
    setShowPartDivider: React.Dispatch<React.SetStateAction<boolean>>;
    setSeenParts: React.Dispatch<React.SetStateAction<Set<number>>>;
    preview: boolean;
    setIsBetweenParts?: React.Dispatch<React.SetStateAction<boolean>>;
}

const SectionNavbar: React.FC<Props> = ({ module, sectionLabel, seenParts, setSeenParts, setShowPartDivider, setIsBetweenParts, preview }) => {

    const isPartExam = ["reading", "listening", "level"].includes(module);
    const examState = useExamStore((state) => state);
	const persistentExamState = usePersistentExamStore((state) => state);

    const {
        exam,
        partIndex, setPartIndex,
        exerciseIndex, setExerciseIndex,
        setQuestionIndex,
        setBgColor
    } = !preview ? examState : persistentExamState;

    const sections = isPartExam ? (exam as PartExam).parts : (exam as ExerciseOnlyExam).exercises;
    const sectionIndex = isPartExam ? partIndex : exerciseIndex;

    const handleSectionChange = (index: number) => {
        const changeSection = isPartExam ? setPartIndex : setExerciseIndex;
        changeSection(index);
    }

    const handleClick = (index: number) => {
        setExerciseIndex(0);
        setQuestionIndex(0);
        if (!seenParts.has(index)) {
            if (hasDivider(exam!, index)) {
                setShowPartDivider(true);
                setBgColor(`bg-ielts-${module}-light`);
            } else if(setIsBetweenParts) {
                setIsBetweenParts(true);
            }
            setSeenParts(prev => new Set(prev).add(index));
        }
    }

    return (

        <div className="w-full">
            <TabGroup className="w-[90%]" selectedIndex={sectionIndex} onChange={handleSectionChange}>
                <TabList className={`flex space-x-1 rounded-xl bg-ielts-${module}/20 p-1`}>
                    {sections.map((_, index) =>
                        <Tab key={index} onClick={() => handleClick(index)}
                            className={({ selected }) =>
                                clsx(
                                    `w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-${module}/80`,
                                    "ring-white ring-opacity-60 focus:outline-none",
                                    "transition duration-300 ease-in-out hover:bg-white/70",
                                    selected && "bg-white shadow",
                                )
                            }
                        >{`${sectionLabel} ${index + 1}`}</Tab>
                    )
                    }
                </TabList>
            </TabGroup>
        </div>

    );
}

export default SectionNavbar;