Dwinzo_Demo/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import io from "socket.io-client";
import {
  CartIcon,
  DocumentIcon,
  GlobeIcon,
  WalletIcon,
} from "../../../../../components/icons/3dChartIcons";

const TotalCardComponent = ({ object }: any) => {
  const [progress, setProgress] = useState<any>(0);
  const [measurements, setmeasurements] = useState<any>({});
  const [duration, setDuration] = useState("1h");
  const [name, setName] = useState(object.header ? object.header : "");

  const email = localStorage.getItem("email") || "";
  const organization = email?.split("@")[1]?.split(".")[0];
  const { header, flotingDuration, flotingMeasurements } = useChartStore();
  const { selectedChartId } = useWidgetStore();

  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

  useEffect(() => {
    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
      return;

    const socket = io(`http://${iotApiUrl}`);

    const inputData = {
      measurements,
      duration,
      interval: 1000,
    };

    const startStream = () => {
      socket.emit("lastInput", inputData);
    };

    socket.on("connect", startStream);

    socket.on("lastOutput", (response) => {
      const responseData = response.input1;

      if (typeof responseData === "number") {
        setProgress(responseData);
      }
    });

    return () => {
      socket.off("lastOutput");
      socket.emit("stop_stream"); // Stop streaming when component unmounts
      socket.disconnect();
    };
  }, [measurements, duration, iotApiUrl]);

  const fetchSavedInputes = async () => {
    if (object?.id !== "") {
      try {
        const response = await axios.get(
          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`
        );
        if (response.status === 200) {
          setmeasurements(response.data.Data.measurements);
          setDuration(response.data.Data.duration);
          setName(response.data.header);
        } else {
          echo.error("Failed to fetch saved inputs");
        }
      } catch (error) {}
    }
  };

  useEffect(() => {
    fetchSavedInputes();
  }, []);

  useEffect(() => {
    if (selectedChartId?.id === object?.id) {
      fetchSavedInputes();
    }
  }, [header, flotingDuration, flotingMeasurements]);

  const mapIcon = (iconName: string) => {
    switch (iconName) {
      case "WalletIcon":
        return <WalletIcon />;
      case "GlobeIcon":
        return <GlobeIcon />;
      case "DocumentIcon":
        return <DocumentIcon />;
      case "CartIcon":
        return <CartIcon />;
      default:
        return <WalletIcon />;
    }
  };
  return (
    <>
      <div className="header-wrapper">
        <div className="header">{name}</div>
        <div className="data-values">
          <div className="value">{progress}</div>
          <div className="per">{object.per}</div>
        </div>
      </div>
      <div className="icon">{mapIcon(object.iconName)}</div>
    </>
  );
};

export default TotalCardComponent;