import { asPublicUser, 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/dispatcher";
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="min-w-120">
			<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>{asPublicUser(d.publicUser).fullName}</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>
	);
};