import { Html } from "@react-three/drei";
import React, { useEffect, useMemo, useState } from "react";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/useChartStore";
import axios from "axios";
import io from "socket.io-client";

// import image from "../../../../assets/image/temp/image.png";
interface StateWorkingProps {
  id: string;
  type: string;
  position: [number, number, number];
  rotation: [number, number, number];
  onContextMenu?: (event: React.MouseEvent) => void;
}
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotation, onContextMenu }) => {
  const { selectedChartId, setSelectedChartId } = useWidgetStore();
  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
  const [measurements, setmeasurements] = useState<any>({});
  const [duration, setDuration] = useState("1h")
  const [name, setName] = useState("Widget")
  const [datas, setDatas] = useState<any>({});
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
  const email = localStorage.getItem("email") || "";
  const organization = email?.split("@")[1]?.split(".")[0]
  // const datas = [
  //   { key: "Oil Tank:", value: "24/341" },
  //   { key: "Oil Refin:", value: 36.023 },
  //   { key: "Transmission:", value: 36.023 },
  //   { key: "Fuel:", value: 36732 },
  //   { key: "Power:", value: 1300 },
  //   { key: "Time:", value: 13 - 9 - 2023 },
  // ];

  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;
    

      setDatas(responseData);
    });

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

  const fetchSavedInputes = async () => {

    if (id !== "") {
      try {
        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${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])

  const rotationDegrees = {
    x: (rotation[0] * 180) / Math.PI,
    y: (rotation[1] * 180) / Math.PI,
    z: (rotation[2] * 180) / Math.PI,
  };

  const transformStyle = {
    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
  };
  return (
    <Html position={[position[0], position[1], position[2]]}
      scale={[0.5, 0.5, 0.5]}
      transform
      zIndexRange={[1, 0]}
      sprite
      style={{
        transform: transformStyle.transform,
        transformStyle: 'preserve-3d',
        transition: 'transform 0.1s ease-out'

      }}
    >
      <div className="stateWorking-wrapper card"
        onClick={() => setSelectedChartId({ id: id, type: type })}
        onContextMenu={onContextMenu}
      >
        <div className="header-wrapper">
          <div className="header">
            <span>State</span>
            <span>
              {datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
            </span>
          </div>
          <div className="img">
            {/* <img src={image} alt="" /> */}
          </div>
        </div>
        {/* Data */}
        <div className="data-wrapper">
          {/* {datas.map((data, index) => (
            <div className="data-table" key={index}>
              <div className="data">{data.key}</div>
              <div className="key">{data.value}</div>
            </div>
          ))} */}
          <div className="data-table">
            <div className="data">{measurements?.input2?.fields ? measurements.input2.fields : 'input2'}</div>
            <div className="key">{datas?.input2 ? datas.input2 : 'data'}</div>
          </div>
          <div className="data-table">
            <div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div>
            <div className="key">{datas?.input3 ? datas.input3 : 'data'}</div>
          </div>
          <div className="data-table">
            <div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div>
            <div className="key">{datas?.input4 ? datas.input4 : 'data'}</div>
          </div>
          <div className="data-table">
            <div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div>
            <div className="key">{datas?.input5 ? datas.input5 : 'data'}</div>
          </div>
          <div className="data-table">
            <div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div>
            <div className="key">{datas?.input6 ? datas.input6 : 'data'}</div>
          </div>
          <div className="data-table">
            <div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div>
            <div className="key">{datas?.input7 ? datas.input7 : 'data'}</div>
          </div>
        </div>
      </div>
    </Html>
  );
};

export default StateWorking;


