import { Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { useTranslation } from "~/providers/I18nProvider";
import { Moon2 } from "../IconComponents";
import { Button } from "../ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "../ui/dropdown-menu";

export const ThemeSwitch = () => {
	const [mounted, setMounted] = useState(false);
	useEffect(() => {
		setMounted(true);
	}, []);

	if (!mounted) {
		return <ThemeSwitchSkeleton />;
	}

	return <ThemeSwitchContent2 />;
};

const ThemeSwitchSkeleton = () => (
	<div
		aria-hidden="true"
		className="h-9 w-16 animate-pulse rounded-full bg-muted p-1.25 shadow-inner"
	/>
);

// const ThemeSwitchContent = () => {
// 	const { theme, setTheme } = useTheme();

// 	const spring: Transition = {
// 		damping: 20,
// 		stiffness: 300,
// 		type: "spring",
// 	};

// 	return (
// 		<button
// 			aria-label="Toggle Theme"
// 			className={cn(
// 				`flex h-7 w-12 items-center rounded-full bg-muted p-1.25 shadow-inner hover:cursor-pointer`,
// 				theme === "light"
// 					? "place-content-end bg-sky-400 hover:bg-sky-500"
// 					: "bg-sky-900 hover:bg-sky-800",
// 			)}
// 			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
// 			type="button"
// 		>
// 			<motion.div
// 				//animate={{ opacity: 1 }}
// 				className={cn(
// 					"flex size-5.5 items-center justify-center rounded-full bg-black",
// 					theme === "light" ? "bg-yellow-300" : "bg-gray-800/60",
// 				)}
// 				//initial={{ opacity: 0 }}
// 				layout
// 				transition={{
// 					//opacity: { duration: 0.1, ease: "easeInOut", delay: 0.5 }, // Fast fade in
// 					layout: spring, // Spring for position change
// 				}}
// 			>
// 				<motion.div
// 					animate={{ rotate: theme === "light" ? 180 : 0 }}
// 					transition={spring}
// 				>
// 					{theme === "light" ? (
// 						<Sun className="size-5" />
// 					) : (
// 						<Moon className="size-5 fill-yellow-200 stroke-yellow-200" />
// 					)}
// 				</motion.div>
// 			</motion.div>
// 		</button>
// 	);
// };

const ThemeSwitchContent2 = () => {
	const { theme, setTheme } = useTheme();

	const { t } = useTranslation();

	return (
		<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button
					className="p-2"
					data-umami-event="theme_toggle_btn"
					onClick={() => setTheme(theme === "light" ? "dark" : "light")}
					size="sm"
					variant="outline"
				>
					{theme === "light" ? (
						<Sun className="size-5" />
					) : (
						<Moon2 className="size-5" />
					)}
				</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="z-700">
				<DropdownMenuGroup>
					<DropdownMenuItem onClick={() => setTheme("light")}>
						{t.theme.light}
					</DropdownMenuItem>
					<DropdownMenuItem onClick={() => setTheme("dark")}>
						{t.theme.dark}
					</DropdownMenuItem>
					<DropdownMenuItem onClick={() => setTheme("system")}>
						{t.theme.system}
					</DropdownMenuItem>
				</DropdownMenuGroup>
			</DropdownMenuContent>
		</DropdownMenu>
	);
};
