import { Prisma, StationStatus } from "@repo/db";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { BaseNotification } from "_components/customToasts/BaseNotification";
import { FMS_STATUS_COLORS } from "_helpers/fmsStatusColors";
import { editConnectedAircraftAPI, getConnectedAircraftsAPI } from "_querys/aircrafts";
import { getStationsAPI } from "_querys/stations";
import { useMapStore } from "_store/mapStore";
import { X } from "lucide-react";
import { useEffect, useRef } from "react";
import { Toast, toast } from "react-hot-toast";

export const QUICK_RESPONSE: Record<string, string[]> = {
	"5": ["J", "c"],
	"0": ["J", "c"],
};

export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) => {
	const status0Sounds = useRef<HTMLAudioElement | null>(null);
	const status5Sounds = useRef<HTMLAudioElement | null>(null);

	useEffect(() => {
		if (typeof window !== "undefined") {
			status0Sounds.current = new Audio("/sounds/status-0.mp3");
			status5Sounds.current = new Audio("/sounds/status-5.mp3");
		}
	}, []);

	const mapStore = useMapStore((s) => s);

	const { data: connectedAircrafts } = useQuery({
		queryKey: ["aircrafts"],
		queryFn: () => getConnectedAircraftsAPI(),
		refetchInterval: 10000,
	});
	const { data: stations } = useQuery({
		queryKey: ["stations"],
		queryFn: () => getStationsAPI(),
	});

	const queryClient = useQueryClient();
	const changeAircraftMutation = useMutation({
		mutationFn: async ({
			id,
			update,
		}: {
			id: number;
			update: Prisma.ConnectedAircraftUpdateInput;
		}) => {
			await editConnectedAircraftAPI(id, update);
			queryClient.invalidateQueries({
				queryKey: ["aircrafts"],
			});
		},
	});

	const connectedAircraft = connectedAircrafts?.find((a) => a.id === event.data?.aircraftId);
	const station = stations?.find((s) => s.id === event.data?.stationId);

	useEffect(() => {
		if (connectedAircraft?.fmsStatus === "0" && status0Sounds.current) {
			status0Sounds.current.currentTime = 0;
			status0Sounds.current.volume = 0.7;
			status0Sounds.current.play();
		} else if (connectedAircraft?.fmsStatus === "5" && status5Sounds.current) {
			status5Sounds.current.currentTime = 0;
			status5Sounds.current.volume = 0.7;
			status5Sounds.current.play();
		}
	}, [connectedAircraft?.fmsStatus]);

	if (!connectedAircraft || !station) return null;
	return (
		<BaseNotification>
			<div className="flex flex-row gap-14 items-center">
				<p>
					<span
						className="underline mr-1 cursor-pointer font-bold"
						onClick={() => {
							if (!connectedAircraft.posLat || !connectedAircraft.posLng) return;
							mapStore.setOpenAircraftMarker({
								open: [{ id: connectedAircraft.id, tab: "fms" }],
								close: [],
							});
							mapStore.setMap({
								center: [connectedAircraft.posLat, connectedAircraft.posLng],
								zoom: 14,
							});
						}}
					>
						{station.bosCallsign}
					</span>
					sendet Status {connectedAircraft.fmsStatus}
				</p>
				<div className="flex gap-2 items-center">
					{QUICK_RESPONSE[String(connectedAircraft.fmsStatus)]?.map((status) => (
						<button
							key={status}
							className={
								"flex justify-center items-center min-w-10 min-h-10 cursor-pointer text-lg font-bold"
							}
							style={{
								backgroundColor: FMS_STATUS_COLORS[status],
								color: "white",
							}}
							onClick={async () => {
								await changeAircraftMutation.mutateAsync({
									id: connectedAircraft.id,
									update: {
										fmsStatus: status,
									},
								});
								toast.remove(t.id);
								toast.success(`Status auf ${status} geändert`);
							}}
						>
							{status}
						</button>
					))}
					<button className="btn btn-ghost btn-sm" onClick={() => toast.remove(t.id)}>
						<X size={16} />
					</button>
				</div>
			</div>
		</BaseNotification>
	);
};