"use client";

import { cn } from "@repo/shared-components";
import { ArrowLeftRight, ExternalLinkIcon, Plane, Radar, Workflow } from "lucide-react";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function ModeSwitchDropdown({
	className,
	btnClassName,
}: {
	className?: string;
	btnClassName?: string;
}) {
	const path = usePathname();
	const session = useSession();

	return (
		<div className={cn("dropdown z-999999", className)}>
			<div tabIndex={0} role="button" className={cn("btn", btnClassName)}>
				<ArrowLeftRight size={22} /> {path.includes("pilot") && "Pilot"}
				{path.includes("dispatch") && "Leitstelle"}
			</div>
			<ul
				tabIndex={0}
				className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
			>
				{session.data?.user.permissions?.includes("DISPO") && (
					<li>
						<Link href={"/dispatch"}>
							<Workflow size={22} /> Leitstelle
						</Link>
					</li>
				)}
				{session.data?.user.permissions?.includes("PILOT") && (
					<li>
						<Link href={"/pilot"}>
							<Plane size={22} /> Operations Center
						</Link>
					</li>
				)}
				<li>
					<Link href={"/tracker"}>
						<Radar size={22} /> Tracker
					</Link>
				</li>
				<li>
					<Link
						href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
						target="_blank"
						rel="noopener noreferrer"
					>
						<ExternalLinkIcon size={22} /> HUB
					</Link>
				</li>
			</ul>
		</div>
	);
}