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/useChartStore";
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";

type Props = {};

const FlotingWidgetInput = (props: Props) => {
  const [widgetName, setWidgetName] = useState('Widget');
  const { setFlotingMeasurements, updateFlotingDuration, updateHeader } = 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 email = localStorage.getItem("email") || "";
  const organization = email?.split("@")[1]?.split(".")[0]

  useEffect(() => {
    const fetchZoneData = async () => {
      try {
        const response = await axios.get(`http://${iotApiUrl}/getinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
        } else {
          console.log("Unexpected response:", response);
        }
      } catch (error) {
        console.error("There was an error!", error);
      }
    };
    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/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
          if (response.status === 200) {
            console.log(response.data);
            
            setSelections(response.data.Data.measurements)
            setDuration(response.data.Data.duration)
            setWidgetName(response.data.header)
          } else {
            console.log("Unexpected response:", response);
          }
        } catch (error) {
          console.error("There was an error!", error);
        }
      }
    }

    fetchSavedInputes();

  }, [selectedChartId.id]);

  // Sync Zustand state when component mounts
  useEffect(() => {
    setFlotingMeasurements(selections);
    updateFlotingDuration(duration);
    updateHeader(widgetName);
  }, [selections, duration, widgetName]);


  const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
    try {
      const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`, {
        organization: organization,
        zoneId: selectedZone.zoneId,
        widget: {
          id: selectedChartId.id,
          header: inputName,
          Data: {
            measurements: inputMeasurement,
            duration: inputDuration
          }
        }
      } as any);
      if (response.status === 200) {
        return true
      } else {
        console.log("Unexpected response:", response);
        return false
      }
    } catch (error) {
      console.error("There was an error!", error);
      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
    console.log(newSelections);
    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) => {
    console.log('name change requested',name);
    
    if (await sendInputes(selections, duration, name)) {
      setWidgetName(name);
    }
  }

  return (
    <>
      <div className="inputs-wrapper">
        <div className="datas">
          <div className="datas__label">Title</div>
          <RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
        </div>
        {[...Array(6)].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
                />
                <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 FlotingWidgetInput;