import { Link } from "@tanstack/react-router";
import { useAuth, useLogout } from "../../lib/authClient";
import { ModeToggle } from "../mode-toggle";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Button } from "../ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "../ui/dropdown-menu";

export default function Nav() {
	const { session } = useAuth();
	const logout = useLogout();
	return (
		<nav className="flex justify-end w-full shadow ">
			<div className="m-2 flex flex-row gap-1">
				<div className="m-1">
					<ModeToggle />
				</div>
				<div className="m-1">
					<Button>
						<a href={`${window.location.origin}/lst/d`} target="_blank">
							LST - Docs
						</a>
					</Button>
				</div>

				{session ? (
					<div className="m-1">
						<DropdownMenu>
							<DropdownMenuTrigger>
								<Avatar>
									<AvatarImage
										src="https://github.com/evilrabbit.png"
										alt="@evilrabbit"
									/>
									<AvatarFallback>CN</AvatarFallback>
								</Avatar>
							</DropdownMenuTrigger>
							<DropdownMenuContent>
								<DropdownMenuLabel>
									Hello {session.user?.username}
								</DropdownMenuLabel>
								<DropdownMenuSeparator />
								<DropdownMenuItem>
									{/* <Link to="/passwordChange">
                                            Password Change
                                        </Link> */}
								</DropdownMenuItem>
								{/* <DropdownMenuItem>Billing</DropdownMenuItem>
                                                <DropdownMenuItem>Team</DropdownMenuItem>
                                                <DropdownMenuItem>Subscription</DropdownMenuItem> */}
								<hr className="solid"></hr>
								<DropdownMenuItem>
									<div className="m-auto">
										<button onClick={() => logout()}>Logout</button>
									</div>
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>
				) : (
					<div className="m-1">
						<Button>
							<Link to="/login">Login</Link>
						</Button>
					</div>
				)}
			</div>
		</nav>
	);
}
