BayIQ-UI/src/app/providers/WebSocketProvider.tsx

import { useEffect, useMemo, useState, type ReactNode } from "react";
import { WebsocketContext, type WebSocketConextValue } from "../context/WebSocketContext";
import useWebSocket from "react-use-websocket";
import { wsConfig } from "../config/wsconfig";
import type { CameraZoomData, InfoBarData } from "../../types/types";

type WebSocketProviderProps = {
  children: ReactNode;
};

export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
  const [systemData, setSystemData] = useState<InfoBarData | null>(null);
  const [socketData, setSocketData] = useState<CameraZoomData | null>(null);
  const infoSocket = useWebSocket(wsConfig.infoBar, { share: true, shouldReconnect: () => true });
  const cameraFeedASocket = useWebSocket(wsConfig.cameraFeedA, { share: true, shouldReconnect: () => true });
  const cameraFeedBSocket = useWebSocket(wsConfig.cameraFeedB, { share: true, shouldReconnect: () => true });
  const cameraFeedCSocket = useWebSocket(wsConfig.cameraFeedC, { share: true, shouldReconnect: () => true });

  useEffect(() => {
    async function parseData() {
      if (infoSocket.lastMessage) {
        const text = await infoSocket.lastMessage.data.text();
        const data = JSON.parse(text);
        setSystemData(data);
      }
      if (cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage) {
        const message = cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage;
        const data = await message?.data.text();
        const parsedData: CameraZoomData = JSON.parse(data || "");
        setSocketData(parsedData);
      }
    }
    parseData();
  }, [
    cameraFeedASocket.lastMessage,
    cameraFeedBSocket.lastMessage,
    cameraFeedCSocket.lastMessage,
    infoSocket.lastMessage,
  ]);

  const value = useMemo<WebSocketConextValue>(
    () => ({
      info: {
        data: systemData,
        readyState: infoSocket.readyState,
        sendJson: infoSocket.sendJsonMessage,
      },
      cameraFeedA: {
        data: socketData,
        readyState: cameraFeedASocket.readyState,

        send: cameraFeedASocket.sendMessage,
      },
      cameraFeedB: {
        data: socketData,
        readyState: cameraFeedBSocket.readyState,

        send: cameraFeedBSocket.sendMessage,
      },
      cameraFeedC: {
        data: socketData,
        readyState: cameraFeedCSocket.readyState,

        send: cameraFeedCSocket.sendMessage,
      },
    }),
    [
      cameraFeedASocket.readyState,
      cameraFeedASocket.sendMessage,
      cameraFeedBSocket.readyState,
      cameraFeedBSocket.sendMessage,
      cameraFeedCSocket.readyState,
      cameraFeedCSocket.sendMessage,
      infoSocket.readyState,
      infoSocket.sendJsonMessage,
      socketData,
      systemData,
    ],
  );

  return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;
};