import React, { useEffect, useState } from "react";
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
import { AddIcon } from "../../../../icons/ExportCommonIcons";
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
import { getUserData } from "../../../../../functions/getUserData";
import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
import { useVersionContext } from "../../../../../modules/builder/version/versionContext";

type Props = {};

const PieChartInput = (props: Props) => {
  const [widgetName, setWidgetName] = useState("Widget");
  const { setMeasurements, updateDuration, updateName } = useChartStore();
  const [duration, setDuration] = useState("1h");
  const [dropDowndata, setDropDownData] = useState({});
  const [selections, setSelections] = useState<
    Record<string, { name: string; fields: string }>
  >({});
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);
  const { projectId } = useParams();
  const { visualizationSocket } = useSocketStore();
  const { selectedVersionStore } = useVersionContext();
  const { selectedVersion } = selectedVersionStore();

  useEffect(() => {
    const fetchZoneData = async () => {
      try {
        setLoading(true);
        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // 
          setDropDownData(response.data);
          setLoading(false);
        } else {

        }
      } catch (error) {
        echo.error("Failed to fetch zone data");

      }
    };
    fetchZoneData();
  }, []);

  useEffect(() => {
    const fetchSavedInputes = async () => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
            {
              headers: {
                Authorization: "Bearer <access_token>",
                "Content-Type": "application/json",
                token: localStorage.getItem("token") || "",
                refresh_token: localStorage.getItem("refreshToken") || "",
              },
            }
          );
          if (response.status === 200) {

            setSelections(response.data.Datastructure.measurements);
            setDuration(response.data.Datastructure.duration);
            setWidgetName(response.data.widgetName);
          } else {

          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");

        }
      }
    };

    fetchSavedInputes();
  }, [selectedChartId.id]);

  // Sync Zustand state when component mounts
  useEffect(() => {
    setMeasurements(selections);
    updateDuration(duration);
    updateName(widgetName);
  }, [selections, duration, widgetName]);

  const sendInputes = async (
    inputMeasurement: any,
    inputDuration: any,
    inputName: any
  ) => {

    // const userId = localStorage.getItem("userId");
    let newWidget = {
      id: selectedChartId.id,
      panel: selectedChartId.panel,
      widgetName: inputName,
      Data: {
        measurements: inputMeasurement,
        duration: inputDuration,
      },
    }
    // const adding3dWidget = {
    //   organization: organization,
    //   widget: newWidget,
    //   zoneUuid: selectedZone.zoneUuid,
    //   projectId, userId
    // };
    // if (visualizationSocket) {
    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
    // }

    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget, projectId);

    if (response.message === "Widget updated successfully") {

      return true;
    } else {


      return false;
    }
    // try {
    //   const response = await axios.post(
    //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
    //     {
    //       headers: {
    //         Authorization: "Bearer <access_token>",
    //         "Content-Type": "application/json",
    //         token: localStorage.getItem("token") || "",
    //         refresh_token: localStorage.getItem("refreshToken") || "",
    //       },
    //     },
    //     {
    //       zoneUuid: selectedZone.zoneUuid,
    //       organization: organization,
    //       widget: {
    //         id: selectedChartId.id,
    //         panel: selectedChartId.panel,
    //         widgetName: inputName,
    //         Data: {
    //           measurements: inputMeasurement,
    //           duration: inputDuration,
    //         },
    //       },
    //     } as any
    //   );

    // } catch (error) {
    //   echo.error("Failed to send input");
    //   
    //   return false;
    // }
  };

  const handleSelect = async (
    inputKey: string,
    selectedData: { name: string; fields: string } | null
  ) => {
    // async() => {
    const newSelections = { ...selections };
    if (selectedData === null) {
      delete newSelections[inputKey];
    } else {
      newSelections[inputKey] = selectedData;
    }
    // setMeasurements(newSelections); // Update Zustand store
    // 
    if (await sendInputes(newSelections, duration, widgetName)) {
      setSelections(newSelections);
    }
    // sendInputes(newSelections, duration); // Send data to server
    // return newSelections;
    // };
  };

  const handleSelectDuration = async (option: string) => {
    if (await sendInputes(selections, option, widgetName)) {
      setDuration(option);
    }
    // setDuration(option);
  };

  const handleNameChange = async (name: any) => {


    if (await sendInputes(selections, duration, name)) {
      setWidgetName(name);
    }
  };

  return (
    <>
      <div className="inputs-wrapper">
        <div className="datas">
          <div className="datas__label">Title</div>
          <RenameInput
            value={widgetName || selectedChartId?.title}
            onRename={handleNameChange}
          />
        </div>
        {[...Array(2)].map((_, index) => {
          const inputKey = `input${index + 1}`;
          return (
            <div key={index} className="datas">
              <div className="datas__label">Input {index + 1}</div>
              <div className="datas__class">
                <MultiLevelDropdown
                  data={dropDowndata}
                  onSelect={(selectedData) =>
                    handleSelect(inputKey, selectedData)
                  }
                  onUnselect={() => handleSelect(inputKey, null)}
                  selectedValue={selections[inputKey]} // Load from Zustand
                  isLoading={isLoading}
                  allSelections={selections}
                />
                <div className="icon">
                  <AddIcon />
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div>
        <div className="datas">
          <div className="datas__label">Duration</div>
          <div className="datas__class">
            <RegularDropDown
              header={duration}
              options={["1h", "2h", "12h"]}
              onSelect={handleSelectDuration}
              search={false}
            />
          </div>
        </div>
      </div>
    </>
  );
};

export default PieChartInput;