import { useQueryClient } from "@tanstack/react-query";
import { useEffect } from "react";
import { ConnectionState } from "~/lib/websocket/gateway/types";
import { useGatewayStore } from "~/stores/gateway-store";
import { useTokenStore } from "~/stores/token-store";

export function GatewayWebSocketConnectionManager() {
    const token = useTokenStore((state) => state.token);

    const { setQueryClient } = useGatewayStore();

    const queryClient = useQueryClient();
    useEffect(() => {
        setQueryClient(queryClient);
    }, [queryClient]);

    useEffect(() => {
        const { status, connect, disconnect } = useGatewayStore.getState();

        if (!!token) {
            connect(token);
        } else {
            if (status === ConnectionState.CONNECTED) {
                disconnect();
            }
        }

        return () => {
            if (status === ConnectionState.CONNECTED) {
                disconnect();
            }
        };
    }, [token]);

    return null;
}