import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
import React, { useEffect, useMemo, useState } from "react";
import { Line } from "react-chartjs-2";
import io from "socket.io-client";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios";

const ProgressCard1 = ({ id,title,}: {
  id: string,
  title: string;
}) => {
    const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
    const [measurements, setmeasurements] = useState<any>({});
    const [duration, setDuration] = useState("1h")
    const [name, setName] = useState(title)
    const [value, setValue] = useState<any>('')
    const { selectedChartId } = useWidgetStore();

    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
    const email = localStorage.getItem("email") || "";
    const organization = email?.split("@")[1]?.split(".")[0]


    useEffect(() => {
        const socket = io(`http://${iotApiUrl}`);
        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
    
        const inputData = {
          measurements,
          duration,
          interval: 1000,
        };
    
    
        const startStream = () => {  
          socket.emit("lastInput", inputData);
        };
    
        socket.on("connect", startStream);
    
        socket.on("lastOutput", (response) => {
            const responseData = response.input1;
            setValue(responseData);
          
        });
    
        return () => {
          socket.off("lastOutput");
          socket.emit("stop_stream"); // Stop streaming when component unmounts
          socket.disconnect();
        };
      }, [measurements, duration]);
    
      const fetchSavedInputes = async() => {
        
        if (id !== "") {
          try {
            const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
            if (response.status === 200) {
              setmeasurements(response.data.Data.measurements)
              setDuration(response.data.Data.duration)
              setName(response.data.widgetName)
            } else {
              console.log("Unexpected response:", response);
            }
          } catch (error) {
            console.error("There was an error!", error);
          }
        }
      }
    
      useEffect(() => {
        fetchSavedInputes();
      }, []);
    
      useEffect(() => {
        if (selectedChartId?.id === id) {
          fetchSavedInputes();
        }
      }
      ,[chartMeasurements, chartDuration, widgetName])

    return(
        <div className="chart progressBar">
          <div className="header">{name}</div>
            <div className="stock">
              <span className="stock-item">
                <span className="stockValues">
                <div className="value">{value}</div>
                  <div className="key">Units</div>
                  
                </span>
                <div className="stock-description">{
                    measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
              </span>
              <div className="icon">
                <StockIncreseIcon />
              </div>
            </div>
        </div>
      )
};

export default ProgressCard1;