encoach_frontend/src/components/Diagnostic.tsx

import {infoButtonStyle} from "@/constants/buttonStyles";
import {BAND_SCORES} from "@/constants/ielts";
import {Module} from "@/interfaces";
import {User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams";
import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
import {useRouter} from "next/router";
import {useState} from "react";
import {toast} from "react-toastify";

interface Props {
	user: User;
	onFinish: () => void;
}

const DIAGNOSTIC_EXAMS = [
	["reading", "CurQtQoxWmHaJHeN0JW2"],
	["listening", "Y6cMao8kUcVnPQOo6teV"],
	["writing", "hbueuDaEZXV37EW7I12A"],
	["speaking", "QVFm4pdcziJQZN2iUTDo"],
];

export default function Diagnostic({onFinish}: Props) {
	const [focus, setFocus] = useState<"academic" | "general">();
	const [isInsert, setIsInsert] = useState(false);
	const [levels, setLevels] = useState({reading: 0, listening: 0, writing: 0, speaking: 0});

	const router = useRouter();

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

	const selectExam = () => {
		const examPromises = DIAGNOSTIC_EXAMS.map((exam) => getExamById(exam[0] as Module, exam[1]));

		Promise.all(examPromises).then((exams) => {
			if (exams.every((x) => !!x)) {
				setExams(exams.map((x) => x!));
				setSelectedModules(exams.map((x) => x!.module));
				router.push("/exam");
			}
		});
	};

	const updateUser = (callback: () => void) => {
		axios
			.patch("/api/users/update", {focus, levels, isFirstLogin: false})
			.then(callback)
			.catch(() => {
				toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});
			});
	};

	if (!focus) {
		return (
			<div className="bg-white p-16 rounded-2xl flex flex-col items-center justify-center gap-8 h-96 relative shadow-md">
				<h2 className="absolute top-8 font-semibold text-xl">What is your focus?</h2>
				<div className="flex flex-col gap-4 justify-self-stretch">
					<button onClick={() => setFocus("academic")} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
						Academic
					</button>
					<button onClick={() => setFocus("general")} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
						General
					</button>
				</div>
			</div>
		);
	}

	if (isInsert) {
		return (
			<div className="bg-white p-16 rounded-2xl flex flex-col items-center justify-center gap-8 shadow-md">
				<h2 className="font-semibold text-xl">What is your level?</h2>
				<div className="flex w-full flex-col gap-4 justify-self-stretch">
					{Object.keys(levels).map((module) => (
						<div key={module} className="flex items-center gap-4 justify-between">
							<span className="font-medium text-lg">{capitalize(module)}</span>
							<input
								type="number"
								className={clsx(
									"input input-bordered bg-white w-24",
									!BAND_SCORES[module as Module].includes(levels[module as keyof typeof levels]) && "input-error",
								)}
								value={levels[module as keyof typeof levels]}
								min={0}
								max={9}
								step={0.5}
								onChange={(e) => setLevels((prev) => ({...prev, [module]: parseFloat(e.target.value)}))}
							/>
						</div>
					))}
				</div>
				<button
					onClick={() => updateUser(onFinish)}
					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
					disabled={!Object.keys(levels).every((module) => BAND_SCORES[module as Module].includes(levels[module as keyof typeof levels]))}>
					Next
				</button>
			</div>
		);
	}

	return (
		<div className="bg-white p-16 rounded-2xl flex flex-col items-center justify-center gap-8 h-96 relative shadow-md">
			<h2 className="absolute top-8 font-semibold text-xl">What is your current IELTS level?</h2>
			<div className="flex flex-col gap-4">
				<button onClick={() => setIsInsert(true)} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
					Insert my IELTS level
				</button>
				<button onClick={() => updateUser(selectExam)} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
					Perform a Diagnosis Test
				</button>
			</div>
		</div>
	);
}