import {
	Exercise,
	FillBlanksExercise,
	InteractiveSpeakingExercise,
	MatchSentencesExercise,
	MultipleChoiceExercise,
	SpeakingExercise,
	TrueFalseExercise,
	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";
import TrueFalse from "./TrueFalse";
import InteractiveSpeaking from "./InteractiveSpeaking";

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

export const renderExercise = (
	exercise: Exercise,
	examID: string,
	registerSolution: (updateSolution: () => UserSolution) => void,
	preview: boolean,
	headerButtons?: React.ReactNode,
	footerButtons?: React.ReactNode,
) => {
	const sharedProps = {
		key: exercise.id,
		registerSolution, 
		headerButtons, 
		footerButtons, 
		examID,
		preview
	}
	switch (exercise.type) {
		case "fillBlanks":
			return <FillBlanks {...(exercise as FillBlanksExercise)} {...sharedProps}/>;
		case "trueFalse":
			return <TrueFalse {...(exercise as TrueFalseExercise)} {...sharedProps}/>;
		case "matchSentences":
			return <MatchSentences {...(exercise as MatchSentencesExercise)} {...sharedProps}/>;
		case "multipleChoice":
			return <MultipleChoice {...(exercise as MultipleChoiceExercise)} {...sharedProps}/>;
		case "writeBlanks":
			return <WriteBlanks {...(exercise as WriteBlanksExercise)} {...sharedProps}/>;
		case "writing":
			return <Writing {...(exercise as WritingExercise)} {...sharedProps}/>;
		case "speaking":
			return <Speaking {...(exercise as SpeakingExercise)} {...sharedProps}/>;
		case "interactiveSpeaking":
			return <InteractiveSpeaking {...(exercise as InteractiveSpeakingExercise)} {...sharedProps}/>;
	}
};