import { Link, useRouterState } from "@tanstack/react-router";
import { useState } from "react";
import NewCompanyForm from "@/routes/_app/_forklifts/-components/NewCompany";
import NewInvoice from "@/routes/_app/_forklifts/-components/NewInvoice";
import NewLeaseForm from "@/routes/_app/_forklifts/-components/NewLease";
import { useAuth, useLogout } from "../../lib/authClient";
import { ModeToggle } from "../mode-toggle";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Button } from "../ui/button";
import { Dialog, DialogContent } from "../ui/dialog";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "../ui/dropdown-menu";

export default function Nav() {
	const { session } = useAuth();
	const logout = useLogout();
	const router = useRouterState();
	const currentPath = router.location.href;
	const [openDialog, setOpenDialog] = useState(false);
	const [openLeaseDialog, setOpenLeaseDialog] = useState(false);
	const [openInvoiceDialog, setOpenInvoiceDialog] = useState(false);
	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>
				<Button className="m-1">
					<Link to="/old">Old Version</Link>
				</Button>
				<div className="m-1">
					{location.pathname.includes("forklifts") && (
						<>
							<DropdownMenu>
								<DropdownMenuTrigger asChild>
									<Button>Forklifts</Button>
								</DropdownMenuTrigger>
								<DropdownMenuContent>
									<DropdownMenuLabel>Forklift links</DropdownMenuLabel>
									<DropdownMenuSeparator />
									<DropdownMenuItem
										onSelect={() => {
											// just open the dialog when clicked
											setOpenDialog(true);
										}}
									>
										New Company
									</DropdownMenuItem>
									<DropdownMenuItem
										onSelect={() => {
											// just open the dialog when clicked
											setOpenLeaseDialog(true);
										}}
									>
										New Lease
									</DropdownMenuItem>
									<DropdownMenuItem
										onSelect={() => {
											// just open the dialog when clicked
											setOpenInvoiceDialog(true);
										}}
									>
										New Invoice
									</DropdownMenuItem>
								</DropdownMenuContent>
							</DropdownMenu>
							{/* Company */}
							{openDialog && (
								<Dialog open={openDialog} onOpenChange={setOpenDialog}>
									<DialogContent className="sm:max-w-[425px]">
										<NewCompanyForm setOpenDialog={setOpenDialog} />
									</DialogContent>
								</Dialog>
							)}
							{openLeaseDialog && (
								<Dialog
									open={openLeaseDialog}
									onOpenChange={setOpenLeaseDialog}
								>
									<DialogContent className="sm:max-w-fit">
										<NewLeaseForm setOpenDialog={setOpenLeaseDialog} />
									</DialogContent>
								</Dialog>
							)}
							{openInvoiceDialog && (
								<Dialog
									open={openInvoiceDialog}
									onOpenChange={setOpenInvoiceDialog}
								>
									<DialogContent className="sm:max-w-fit">
										<NewInvoice setOpenInvoiceDialog={setOpenInvoiceDialog} />
									</DialogContent>
								</Dialog>
							)}
						</>
					)}
				</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="/user/profile">Profile</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" search={{ redirect: currentPath }}>
								Login
							</Link>
						</Button>
					</div>
				)}
			</div>
		</nav>
	);
}
