import {
	Exercise,
	FillBlanksExercise,
	MatchSentencesExercise,
	MultipleChoiceExercise,
	SpeakingExercise,
	UserSolution,
	WriteBlanksExercise,
	WritingExercise,
} from "@/interfaces/exam";
import dynamic from "next/dynamic";
import FillBlanks from "./FillBlanks";
import MultipleChoice from "./MultipleChoice";
import WriteBlanks from "./WriteBlanks";
import Writing from "./Writing";
import Speaking from "./Speaking";

const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});

export interface CommonProps {
	onNext: (userSolutions: UserSolution) => void;
	onBack: (userSolutions: UserSolution) => void;
}

export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserSolution) => void, onBack: (userSolutions: UserSolution) => void) => {
	switch (exercise.type) {
		case "fillBlanks":
			return <FillBlanks {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
		case "matchSentences":
			return <MatchSentences {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
		case "multipleChoice":
			return <MultipleChoice {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
		case "writeBlanks":
			return <WriteBlanks {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
		case "writing":
			return <Writing {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
		case "speaking":
			return <Speaking {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} />;
	}
};