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 { usePlayButtonStore } from "../../../../../store/usePlayButtonStore";
import { getUserData } from "../../../../../functions/getUserData";
import { useParams } from "react-router-dom";
import { getFloatingWidgetInput } from "../../../../../services/visulization/zone/getFloatingWidgetInput";
import { useVersionContext } from "../../../../builder/version/versionContext";

const FleetEfficiencyComponent = ({ 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 { userName, userId, organization, email } = getUserData();
  const { header, flotingDuration, flotingMeasurements } = useChartStore();
  const { selectedChartId } = useWidgetStore();
  const { isPlaying } = usePlayButtonStore();
  const { projectId } = useParams()
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion } = selectedVersionStore();

  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

  // Calculate the rotation angle for the progress bar
  const rotationAngle = 45 + progress * 1.8;

  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 !== "") {
      let response = await getFloatingWidgetInput(object?.id, organization,projectId,selectedVersion?.versionId||"")
      if (response) {
        setmeasurements(response.Data.Datastructure.measurements);
        setDuration(response.Data.Datastructure.duration);
        setName(response.Data.header);
      }
    }
  };

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

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

  return (
    <>
      <h2 className="header">{name}</h2>
      <div
        className="progressContainer"
        style={{ transform: isPlaying ? "skew(-14deg, 0deg)" : "none" }}
      >
        <div className="progress">
          <div className="barOverflow">
            <div
              className="bar"
              style={{ transform: `rotate(${rotationAngle}deg)` }}
            ></div>
          </div>
        </div>
      </div>
      <div className="scaleLabels">
        <span>0%</span>
        <div className="centerText">
          <div className="percentage">{progress}%</div>
          <div className="status">Optimal</div>
        </div>
        <span>100%</span>
      </div>
    </>
  );
};

export default FleetEfficiencyComponent;
