import { getCookie, setCookie } from "cookies-next/client";
import { add } from "date-fns";
import { motion } from "framer-motion";
import { Expand, Minimize2 } from "lucide-react";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { ARMinimizableLinks } from "~/components/navbar/mobile-nav";
import { Button } from "~/components/ui/button";
import { cn } from "~/lib/utils";

export const Sidebar = ({
	isAdmin,
	className,
}: {
	isAdmin: boolean;
	className?: string;
}) => {
	const pathname = usePathname();

	const [minimized, setMinimized] = useState(false);

	useEffect(() => {
		const defaultOpen = getCookie("sidebar_minimized") === "true";
		setMinimized(defaultOpen);
	}, []);
	const toggleSidebar = (v: boolean) => {
		setMinimized(v);
		setCookie("sidebar_minimized", v.toString(), {
			expires: add(new Date(), { days: 30 }),
		});
	};

	return (
		<motion.nav
			animate={{ width: minimized ? 65 : 192 }}
			aria-label="Sidebar Menu"
			className={cn(
				"z-30 hidden h-auto w-48 shrink-0 space-y-4 border-r bg-white pt-3 text-accent-foreground md:block",
				className,
				minimized && "cursor-pointer",
				//defaultOpen && "w-[65px]",
			)}
			onClick={
				minimized
					? (e) => {
							e.preventDefault();
							e.stopPropagation();
							toggleSidebar(false);
						}
					: undefined
			}
		>
			<div
				className={cn(
					"flex items-center justify-between px-7",
					minimized && "justify-center px-0",
				)}
			>
				{!minimized && (
					<h4 className={cn("w-full font-semibold text-xl")}>Menu</h4>
				)}
				<Button
					aria-label="Toggle Sidebar"
					className="px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0"
					onClick={() => toggleSidebar(!minimized)}
					variant="ghost"
				>
					{minimized ? (
						<Expand className="size-6" />
					) : (
						<Minimize2 className="size-6" />
					)}
					<span className="sr-only">Toggle Menu</span>
				</Button>
			</div>
			<div className={cn("px-4 text-lg", minimized && "px-0")}>
				<ARMinimizableLinks
					isAdmin={isAdmin}
					minimized={minimized}
					pathname={pathname}
					setOpen={toggleSidebar}
				/>
			</div>
		</motion.nav>
	);
};