import { BADGES, PublicUser } from "@repo/db";
import { useQuery } from "@tanstack/react-query";
import { Badge } from "_components/Badge/Badge";
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
import { getConnectedDispatcherAPI } from "_querys/connected-user";
import { Plane, Workflow } from "lucide-react";

export const ConnectedDispatcher = () => {
	const { data: dispatcher } = useQuery({
		queryKey: ["dispatcher"],
		queryFn: () => getConnectedDispatcherAPI(),
		refetchInterval: 10000,
	});
	const { data: aircrafts } = useQuery({
		queryKey: ["aircrafts"],
		queryFn: () => getConnectedAircraftsAPI(),
		refetchInterval: 10000,
	});

	const connections = (aircrafts?.length || 0) + (dispatcher?.length || 0);

	return (
		<div className="relative">
			<div className="absolute top-5 right-10 min-w-120 z-99999">
				<div className="collapse collapse-arrow bg-base-100 border-base-300 border">
					<input type="checkbox" />
					{/* <div className="collapse-title font-semibold">Kein Disponent Online</div> */}
					<div className="collapse-title font-semibold flex items-center justify-between">
						<span>
							{connections} {connections == 1 ? "Verbundenes Mitglied" : "Verbundene Mitglieder"}
						</span>
						<div className="gap-2 flex items-center">
							<div
								className={`badge badge-outline ${
									(dispatcher?.length || 0) > 0 ? "badge-success" : "badge-error"
								}`}
							>
								<Workflow size={14} /> {dispatcher?.length || 0}
							</div>
							<div className="badge badge-outline badge-primary">
								<Plane size={14} /> {aircrafts?.length || 0}
							</div>
						</div>
					</div>
					<div className="collapse-content">
						{!dispatcher?.length && (
							<p className="text-center text-gray-500">Aktuell sind keine Disponenten verbunden</p>
						)}
						<ul className="list bg-base-100 rounded-box shadow-md">
							{dispatcher?.map((d) => {
								return (
									<li className="list-row" key={d.id}>
										<div className="w-[100px tabular-nums] flex flex-col items-center text-center">
											<div className="tooltip tooltip-right" data-tip="Online seit">
												<p>
													{new Date(d.loginTime).toLocaleTimeString([], {
														hour: "2-digit",
														minute: "2-digit",
													})}
												</p>
											</div>
											{d.esimatedLogoutTime && (
												<div
													className="tooltip tooltip-right"
													data-tip="Vorrausichtliche Abmeldung"
												>
													<p className="text-gray-500 font-thin ">
														{new Date(d.esimatedLogoutTime).toLocaleTimeString([], {
															hour: "2-digit",
															minute: "2-digit",
														})}
													</p>
												</div>
											)}
										</div>
										<div>
											<div>{(d.publicUser as unknown as PublicUser)?.firstname}</div>
											<div className="text-xs uppercase font-semibold opacity-60">{d.zone}</div>
										</div>
										<div>
											{(d.publicUser as unknown as PublicUser).badges
												.filter((b) => b.startsWith("D"))
												.map((b) => (
													<Badge name={b as BADGES} className="h-8 w-12" />
												))}
										</div>
									</li>
								);
							})}
						</ul>
					</div>
				</div>
			</div>
		</div>
	);
};