import React, { useEffect, useState } from "react";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { RemoveIcon } from "../../../../icons/ExportCommonIcons";
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";

interface Child {
  id: number;
  easing: string;
}
const DATA_STRUCTURE = {
  furnace: {
    coolingRate: "coolingRate",
    furnaceTemperature: "furnaceTemperature",
    heatingRate: "heatingRate",
    machineId: "machineId",
    powerConsumption: "powerConsumption",
    status: "status",
    timestamp: "timestamp",
    vacuumLevel: "vacuumLevel",
  },
  testDevice: {
    abrasiveLevel: {
      data1: "Data 1",
      data2: "Data 2",
      data3: "Data 3",
    },
    airPressure: "airPressure",
    machineId: "machineId",
    powerConsumption: "powerConsumption",
    status: "status",
    temperature: {
      data1: "Data 1",
      data2: "Data 2",
      data3: "Data 3",
    },
    timestamp: {
      data1: "Data 1",
      data2: "Data 2",
      data3: "Data 3",
    },
  },
};

interface Group {
  id: number;
  easing: string;
  children: Child[];
}

const Data = () => {
  const { selectedChartId } = useWidgetStore();

  // State to store groups for all widgets (using Widget.id as keys)
  const [chartDataGroups, setChartDataGroups] = useState<
    Record<string, Group[]>
  >({});

  useEffect(() => {
    // Initialize data groups for the newly selected widget if it doesn't exist
    if (selectedChartId && !chartDataGroups[selectedChartId.id]) {
      setChartDataGroups((prev) => ({
        ...prev,
        [selectedChartId.id]: [
          {
            id: Date.now(),
            easing: "Connecter 1",
            children: [
              { id: Date.now(), easing: "Linear" },
              { id: Date.now() + 1, easing: "Ease Out" },
              { id: Date.now() + 2, easing: "Linear" },
            ],
          },
        ],
      }));
    }
  }, [selectedChartId]);

  // Handle adding a new child to the group
  const handleAddClick = (groupId: number) => {
    setChartDataGroups((prevGroups) => {
      const currentGroups = prevGroups[selectedChartId.id] || [];
      const group = currentGroups.find((g) => g.id === groupId);

      if (group && group.children.length < 7) {
        const newChild = { id: Date.now(), easing: "Linear" };
        return {
          ...prevGroups,
          [selectedChartId.id]: currentGroups.map((g) =>
            g.id === groupId ? { ...g, children: [...g.children, newChild] } : g
          ),
        };
      }
      return prevGroups;
    });
  };

  // Remove a child from a group
  const removeChild = (groupId: number, childId: number) => {
    setChartDataGroups((currentGroups) => {
      const currentChartData = currentGroups[selectedChartId.id] || [];

      return {
        ...currentGroups,
        [selectedChartId.id]: currentChartData.map((group) =>
          group.id === groupId
            ? {
                ...group,
                children: group.children.filter(
                  (child) => child.id !== childId
                ),
              }
            : group
        ),
      };
    });
  };

  return (
    <div className="dataSideBar">
      {selectedChartId?.title && (
        <div className="sideBarHeader">{selectedChartId?.title}</div>
      )}
      {/* <MultiLevelDropDown data={DATA_STRUCTURE} /> */}
      <div className="infoBox">
        <span className="infoIcon">i</span>
        <p>
          <em>
            By adding templates and widgets, you create a customizable and
            dynamic environment.
          </em>
        </p>
      </div>
    </div>
  );
};

export default Data;