import {
	HomeIcon,
	GearIcon,
	ExitIcon,
	LockClosedIcon,
	RocketIcon,
	ReaderIcon,
} from "@radix-ui/react-icons";
import Link from "next/link";
import { WarningAlert } from "./ui/PageAlert";
import { getServerSession } from "api/auth/[...nextauth]/auth";
import { Error } from "./Error";

export const VerticalNav = async () => {
	const session = await getServerSession();
	if (!session?.user) return <Error statusCode={401} title="Benutzer nicht authentifiziert!" />;
	const viewAdminMenu = session.user.permissions.some((p) => {
		return p.startsWith("ADMIN");
	});
	return (
		<ul className="menu w-64 bg-base-300 p-3 rounded-lg shadow-md font-semibold">
			<li>
				<Link href="/">
					<HomeIcon /> Dashboard
				</Link>
			</li>
			<li>
				<Link href="/events">
					<RocketIcon />
					Events & Kurse
				</Link>
			</li>
			<li>
				<Link href="/logbook">
					<ReaderIcon />
					Logbook
				</Link>
			</li>
			<li>
				<Link href="/settings">
					<GearIcon />
					Einstellungen
				</Link>
			</li>
			{viewAdminMenu && (
				<li>
					<details open>
						<summary>
							<LockClosedIcon />
							Admin
						</summary>
						<ul>
							{session.user.permissions.includes("ADMIN_USER") && (
								<li>
									<Link href="/admin/user">Benutzer</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_STATION") && (
								<li>
									<Link href="/admin/station">Stationen</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_KEYWORD") && (
								<li>
									<Link href="/admin/keyword">Stichworte</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_EVENT") && (
								<li>
									<Link href="/admin/event">Events</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_MESSAGE") && (
								<li>
									<Link href="/admin/message">Service Nachrichten</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_USER") && (
								<li>
									<Link href="/admin/report">Reports</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_USER") && (
								<li>
									<Link href="/admin/penalty">Audit-Log</Link>
								</li>
							)}
						</ul>
					</details>
				</li>
			)}
		</ul>
	);
};

export const HorizontalNav = () => (
	<div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
		<div className="flex items-center">
			<a className="btn btn-ghost normal-case text-xl">Virtual Air Rescue - HUB</a>
			<WarningAlert />
		</div>
		<div className="flex items-center ml-auto">
			<ul className="flex space-x-2 px-1">
				<li>
					<a
						href={process.env.NEXT_PUBLIC_DISPATCH_URL || "#!"}
						rel="noopener noreferrer"
						target="_blank"
					>
						<button className="btn btn-sm btn-outline btn-primary">Zur Leitstelle</button>
					</a>
				</li>
				<li>
					<Link href="/logout">
						<button className="btn btn-sm btn-ghost">
							<ExitIcon /> Logout
						</button>
					</Link>
				</li>
			</ul>
		</div>
	</div>
);