import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input";
import {Module} from "@/interfaces";
import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import {RadioGroup} from "@headlessui/react";
import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
import {useRouter} from "next/router";
import {FormEvent, useState} from "react";
import {toast} from "react-toastify";

export default function ExamGenerator() {
	const [selectedModule, setSelectedModule] = useState<Module>();
	const [examId, setExamId] = useState<string>();
	const [isLoading, setIsLoading] = useState(false);

	const setExams = useExamStore((state) => state.setExams);
	const setSelectedModules = useExamStore((state) => state.setSelectedModules);

	const router = useRouter();

	const generateExam = (module: Module) => {
		axios.get(`/api/exam/${module}/generate`).then((result) => console.log(result.data));
	};

	return (
		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
			<label className="font-normal text-base text-mti-gray-dim">Exam Generator</label>
			<div className="w-full grid grid-cols-2 gap-2">
				{MODULE_ARRAY.map((module) => (
					<Button
						onClick={() => generateExam(module)}
						key={module}
						className={clsx(
							"w-full min-w-[200px]",
							module === "reading" && "!bg-ielts-reading/80 !border-ielts-reading hover:!bg-ielts-reading",
							module === "listening" && "!bg-ielts-listening/80 !border-ielts-listening hover:!bg-ielts-listening",
							module === "writing" && "!bg-ielts-writing/80 !border-ielts-writing hover:!bg-ielts-writing",
							module === "speaking" && "!bg-ielts-speaking/80 !border-ielts-speaking hover:!bg-ielts-speaking",
						)}>
						{capitalize(module)}
					</Button>
				))}
			</div>
		</div>
	);
}