"use client";
import { useQuery } from "@tanstack/react-query";
import { getUserAPI } from "_querys/user";
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
import { useDmeStore } from "_store/pilot/dmeStore";
import { useSession } from "next-auth/react";
import { useEffect, useRef } from "react";

export const useSounds = () => {
	const session = useSession();
	const { data: user } = useQuery({
		queryKey: ["user", session.data?.user.id],
		queryFn: () => getUserAPI(session.data!.user.id),
	});

	const { page, setPage } = useDmeStore((state) => state);
	const mission = usePilotConnectionStore((state) => state.activeMission);

	const newMissionSound = useRef<HTMLAudioElement | null>(null);

	useEffect(() => {
		if (typeof window !== "undefined") {
			newMissionSound.current = new Audio("/sounds/Melder3.wav");
		}
	}, []);

	useEffect(() => {
		const timeouts: NodeJS.Timeout[] = [];

		if (page === "new-mission" && newMissionSound.current) {
			console.log("new-mission", mission);
			newMissionSound.current.currentTime = 0;
			newMissionSound.current.volume = 0.3;
			newMissionSound.current.play();
			if (mission) {
				timeouts.push(setTimeout(() => setPage({ page: "mission", mission }), 500));
			}
		} else if (page === "acknowledge") {
			newMissionSound.current?.pause();
			if (mission) {
				timeouts.push(setTimeout(() => setPage({ page: "mission", mission }), 500));
			} else {
				timeouts.push(
					setTimeout(() => setPage({ page: "error", error: "Einsatz nicht gebunden" }), 500),
				);
			}
		}
		return () => {
			timeouts.forEach((t) => {
				clearTimeout(t);
			});
		};
	}, [page, setPage, mission]);
};