Dwinzo_dev/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx

// 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 axios from 'axios'

// type Props = {}

// const LineGrapInput = (props: Props) => {
//     const [dropDowndata, setDropDownData] = useState({})
//     const [selections, setSelections] = useState<Record<string, { name: string, fields: string }>>({})
//     const [selectedOption, setSelectedOption] = useState('1h')
//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
//     const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

//     const handleSelectDuration = (option: string) => {
//         updateDuration(option); // Normalize for key matching
//     };

//     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(() => {
//         console.log(selections);
//     }, [selections])

//     const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
//         setSelections(prev => {
//             if (selectedData === null) {
//                 const newSelections = { ...prev };
//                 delete newSelections[inputKey];
//                 return newSelections;
//             } else {
//                 return {
//                     ...prev,
//                     [inputKey]: selectedData
//                 };
//             }
//         });
//     };

//     interface Measurement {
//         name: string;
//         fields: string;
//       }
      
//       interface InputData {
//         [key: string]: Measurement;
//       }
      
//       const extractMeasurements = (input: InputData): Measurement[] => {
//         return Object.values(input);
//       };

//     useEffect(() => {
//         const measurementsData = extractMeasurements(selections);
//         setMeasurements(measurementsData);
//     }, [selections]);
    

//     return (
//         <>
//             <div className="inputs-wrapper">
//                 {[...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]}
//                                 />
//                                 <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 LineGrapInput



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 axios from "axios";

type Props = {};

const LineGrapInput = (props: Props) => {
  const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
  
  const [dropDowndata, setDropDownData] = useState({});
  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>(measurements); 
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
  
  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();
  }, []);

  // Sync Zustand state when component mounts
  useEffect(() => {
    setSelections(measurements);
  }, [measurements]);

  const handleSelect = (inputKey: string, selectedData: { name: string; fields: string } | null) => {
    setSelections((prev) => {
      const newSelections = { ...prev };
      if (selectedData === null) {
        delete newSelections[inputKey];
      } else {
        newSelections[inputKey] = selectedData;
      }
      setMeasurements(newSelections); // Update Zustand store
      return newSelections;
    });
  };

  const handleSelectDuration = (option: string) => {
    updateDuration(option);
  };

  return (
    <>
      <div className="inputs-wrapper">
        {[...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 LineGrapInput;