import { LevelExam, LevelPart, ReadingExam, ReadingPart } from "@/interfaces/exam";
import clsx from "clsx";
import { Fragment, useState } from "react";
import { BsChevronDown, BsChevronUp } from "react-icons/bs";

const TextComponent: React.FC<{ part: ReadingPart | LevelPart; exerciseType: string }> = ({ part, exerciseType }) => {
    const numberToLetter = (number: number) => (number + 9).toString(36).toUpperCase();

    return (
        <div className="flex flex-col gap-2 w-full">
            <h3 className="text-xl font-semibold">{part.text?.title}</h3>
            <div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
            {part.text?.content
                .split(/\n|(\\n)/g)
                .filter((x) => x && x.length > 0 && x !== "\\n")
                .map((line, index) => (
                    <Fragment key={index}>
                        {exerciseType === "matchSentences" && (
                            <div className="flex gap-3 border border-transparent hover:border-mti-purple-light rounded-lg transition ease-in-out duration-300 p-2 px-3 cursor-pointer">
                                <span className="font-bold text-mti-purple-dark">{numberToLetter(index + 1)}</span>
                                <p>{line}</p>
                            </div>
                        )}
                        {exerciseType !== "matchSentences" && <p key={index}>{line}</p>}
                    </Fragment>
                ))}
        </div>
    );
}

interface Props {
    exam: ReadingExam | LevelExam;
    partIndex: number;
    exerciseType: string;
    isTextMinimized: boolean;
    setIsTextMinimized: React.Dispatch<React.SetStateAction<boolean>>;
}

const ReadingPassage: React.FC<Props> = ({exam, partIndex, exerciseType, isTextMinimized, setIsTextMinimized}) => {
    return (
        <div className={clsx("flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl mt-4 relative", isTextMinimized ? "p-2 px-8" : "py-8 px-16")}>
            <button
                data-tip={isTextMinimized ? "Maximise" : "Minimize"}
                className={clsx("absolute right-8 tooltip", isTextMinimized ? "top-1/2 -translate-y-1/2" : "top-8")}
                onClick={() => setIsTextMinimized((prev) => !prev)}>
                {isTextMinimized ? (
                    <BsChevronDown className="text-mti-purple-dark text-lg" />
                ) : (
                    <BsChevronUp className="text-mti-purple-dark text-lg" />
                )}
            </button>
            {!isTextMinimized && (
                <>
                    <div className="flex flex-col w-full gap-2">
                        <h4 className="text-xl font-semibold">
                            Please read the following excerpt attentively, you will then be asked questions about the text you&apos;ve read.
                        </h4>
                        <span className="text-base">You will be allowed to read the text while doing the exercises</span>
                    </div>
                    <TextComponent part={exam.parts[partIndex]} exerciseType={exerciseType} />
                </>
            )}
            {isTextMinimized && <span className="font-semibold">Reading Passage</span>}
        </div>
    );
};

export default ReadingPassage;