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";

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

	return (
		<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">
					{(aircrafts?.length || 0) + (dispatcher?.length || 0)} Verbundene Mitglieder
				</div>
				<div className="collapse-content">
					<ul className="list bg-base-100 rounded-box shadow-md">
						<li className="text-xs opacity-60 tracking-wide">
							Disponenten: {dispatcher?.length || 0}
						</li>
						<li className="pb-2 text-xs opacity-60 tracking-wide">
							Piloten: {aircrafts?.length || 0}
						</li>

						{dispatcher?.map((d) => {
							console.log("dispatcher", d);
							return (
								<li className="flex list-row justify-between items-center" key={d.id}>
									<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>
	);
};