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 {writingMarking} from "@/utils/score";
import {Menu} from "@headlessui/react";
import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
import {useRouter} from "next/router";
import {useEffect, useState} from "react";
import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen, BsQuestionSquare} from "react-icons/bs";
import {toast} from "react-toastify";
import Button from "./Low/Button";

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

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

export default function Diagnostic({onFinish}: Props) {
	const [focus, setFocus] = useState<"academic" | "general">();
	const [levels, setLevels] = useState({reading: -1, listening: -1, writing: -1, speaking: -1});
	const [desiredLevels, setDesiredLevels] = useState({reading: 9, listening: 9, writing: 9, speaking: 9});

	const router = useRouter();

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

	const isNextDisabled = () => {
		if (!focus) return true;
		return Object.values(levels).includes(-1);
	};

	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("/exercises");
			}
		});
	};

	const updateUser = (callback: () => void) => {
		axios
			.patch("/api/users/update", {
				focus,
				levels: Object.values(levels).includes(-1) ? {reading: 0, listening: 0, writing: 0, speaking: 0} : levels,
				desiredLevels,
				isFirstLogin: false,
			})
			.then(callback)
			.catch(() => {
				toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});
			});
	};

	return (
		<div className="flex flex-col items-center justify-center gap-12 w-full">
			<div className="flex flex-col items-center justify-center gap-8 w-full">
				<h2 className="font-semibold text-xl">What is your current focus?</h2>
				<div className="flex flex-col gap-16 w-full">
					<div className="grid grid-cols-2 gap-y-4 gap-x-16">
						<button
							onClick={() => setFocus("academic")}
							className={clsx(
								"w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-center items-center gap-12 bg-white",
								"hover:bg-mti-purple-light hover:text-white",
								focus === "academic" && "!bg-mti-purple-light !text-white",
								"transition duration-300 ease-in-out",
							)}>
							Academic
						</button>
						<button
							onClick={() => setFocus("general")}
							className={clsx(
								"w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-center items-center gap-12 bg-white",
								"hover:bg-mti-purple-light hover:text-white",
								focus === "general" && "!bg-mti-purple-light !text-white",
								"transition duration-300 ease-in-out",
							)}>
							General
						</button>
					</div>
				</div>
			</div>
			<div className="flex flex-col items-center justify-center gap-8 w-full">
				<h2 className="font-semibold text-xl">What is your current IELTS level?</h2>
				<div className="flex flex-col gap-16 w-full mb-20">
					<div className="grid grid-cols-2 gap-y-4 gap-x-16">
						<div className="w-full flex flex-col gap-3.5 relative">
							<span className="text-sm text-mti-gray-dim">
								<span className="font-bold">Reading</span> level
							</span>
							<Menu>
								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
									<BsBook className="text-ielts-reading" size={34} />
									<span className="text-mti-gray-cool text-sm">
										{levels.reading === -1 ? "Select your reading level" : `Level ${levels.reading}`}
									</span>
									<BsChevronDown className="text-mti-gray-cool" size={12} />
								</Menu.Button>
								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
									{Object.values(writingMarking).map((x) => (
										<Menu.Item key={x}>
											<span
												onClick={() => setLevels((prev) => ({...prev, reading: x}))}
												className="w-full py-4 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
												Level {x}
											</span>
										</Menu.Item>
									))}
								</Menu.Items>
							</Menu>
						</div>
						<div className="w-full flex flex-col gap-3.5 relative">
							<span className="text-sm text-mti-gray-dim">
								<span className="font-bold">Listening</span> level
							</span>
							<Menu>
								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
									<BsHeadphones className="text-ielts-listening" size={34} />
									<span className="text-mti-gray-cool text-sm">
										{levels.listening === -1 ? "Select your listening level" : `Level ${levels.listening}`}
									</span>
									<BsChevronDown className="text-mti-gray-cool" size={12} />
								</Menu.Button>
								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
									{Object.values(writingMarking).map((x) => (
										<Menu.Item key={x}>
											<span
												onClick={() => setLevels((prev) => ({...prev, listening: x}))}
												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
												Level {x}
											</span>
										</Menu.Item>
									))}
								</Menu.Items>
							</Menu>
						</div>
						<div className="w-full flex flex-col gap-3.5 relative">
							<span className="text-sm text-mti-gray-dim">
								<span className="font-bold">Writing</span> level
							</span>
							<Menu>
								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
									<BsPen className="text-ielts-writing" size={34} />
									<span className="text-mti-gray-cool text-sm">
										{levels.writing === -1 ? "Select your writing level" : `Level ${levels.writing}`}
									</span>
									<BsChevronDown className="text-mti-gray-cool" size={12} />
								</Menu.Button>
								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
									{Object.values(writingMarking).map((x) => (
										<Menu.Item key={x}>
											<span
												onClick={() => setLevels((prev) => ({...prev, writing: x}))}
												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
												Level {x}
											</span>
										</Menu.Item>
									))}
								</Menu.Items>
							</Menu>
						</div>
						<div className="w-full flex flex-col gap-3.5 relative">
							<span className="text-sm text-mti-gray-dim">
								<span className="font-bold">Speaking</span> level
							</span>
							<Menu>
								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
									<BsMegaphone className="text-ielts-speaking" size={34} />
									<span className="text-mti-gray-cool text-sm">
										{levels.speaking === -1 ? "Select your speaking level" : `Level ${levels.speaking}`}
									</span>
									<BsChevronDown className="text-mti-gray-cool" size={12} />
								</Menu.Button>
								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
									{Object.values(writingMarking).map((x) => (
										<Menu.Item key={x}>
											<span
												onClick={() => setLevels((prev) => ({...prev, speaking: x}))}
												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
												Level {x}
											</span>
										</Menu.Item>
									))}
								</Menu.Items>
							</Menu>
						</div>
					</div>

					<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
						<Button
							onClick={() => updateUser(selectExam)}
							color="purple"
							variant="outline"
							className="group flex items-center justify-center gap-6 relative max-w-[400px] w-full"
							disabled={!focus}>
							<BsQuestionSquare
								className="text-mti-purple-light group-hover:text-white transition duration-300 ease-in-out"
								size={20}
								onClick={() => updateUser(selectExam)}
							/>
							<span onClick={() => updateUser(selectExam)}>Perform diagnostic test instead</span>
						</Button>
						<Button color="purple" className="max-w-[400px] w-full" onClick={() => updateUser(onFinish)} disabled={isNextDisabled()}>
							Next Step
						</Button>
					</div>
				</div>
			</div>
		</div>
	);
}