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

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>
    );
}