import clsx from "clsx";
import {IconType} from "react-icons";
import {MdSpaceDashboard} from "react-icons/md";
import {BsFileEarmarkText, BsClockHistory, BsPencil, BsGraphUp} from "react-icons/bs";
import {RiLogoutBoxFill} from "react-icons/ri";
import {SlPencil} from "react-icons/sl";
import {FaAward} from "react-icons/fa";
import Link from "next/link";
import {useRouter} from "next/router";
import axios from "axios";
import FocusLayer from "@/components/FocusLayer";
import {preventNavigation} from "@/utils/navigation.disabled";
interface Props {
	path: string;
	navDisabled?: boolean;
	focusMode?: boolean;
	onFocusLayerMouseEnter?: () => void;
	className?: string;
}

interface NavProps {
	Icon: IconType;
	label: string;
	path: string;
	keyPath: string;
	disabled?: boolean;
}

const Nav = ({Icon, label, path, keyPath, disabled = false}: NavProps) => (
	<Link
		href={!disabled ? keyPath : ""}
		className={clsx(
			"p-4 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-purple-light hover:text-white transition duration-300 ease-in-out",
			path === keyPath && "bg-mti-purple-light text-white",
		)}>
		<Icon size={20} />
	</Link>
);

export default function BottomBar({path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter, className}: Props) {
	const router = useRouter();

	const logout = async () => {
		axios.post("/api/logout").finally(() => {
			setTimeout(() => router.reload(), 500);
		});
	};

	const disableNavigation = preventNavigation(navDisabled, focusMode);

	return (
		<section className={clsx("w-full bg-white py-2 drop-shadow-2xl shadow-2xl rounded-t-2xl", className)}>
			<div className="flex justify-around gap-3">
				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" />
				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" />
				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" />
				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
			</div>
			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
		</section>
	);
}