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 handleSelectDuration = (option: string) => {
        updateDuration(option); // Normalize for key matching
    };

    useEffect(() => {
        const fetchZoneData = async () => {
            try {
                const response = await axios.get('http://192.168.0.192:5010/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