import React, { useEffect, useState } from "react";
import RegularDropDown from "../../inputs/regularDropDown";
import { useWidgetStore } from "../../../../store/store";
import ChartComponent from "./chartComponent";

// Define Props Interface

interface Widget {
  id: string;
  type: string; // Chart type (e.g., "bar", "line")
  panel: "top" | "bottom" | "left" | "right"; // Panel location
  title: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: string;
  data: {
    labels: string[];
    datasets: {
      data: number[];
      backgroundColor: string;
      borderColor: string;
      borderWidth: number;
    }[];
  }; // Data for the chart
}
const Design = () => {
  const [selectedName, setSelectedName] = useState("drop down");
  const [selectedElement, setSelectedElement] = useState("drop down");
  const [selectedFont, setSelectedFont] = useState("drop down");
  const [selectedSize, setSelectedSize] = useState("drop down");
  const [selectedWeight, setSelectedWeight] = useState("drop down");

  // Zustand Store Hooks
  const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
    useWidgetStore();

  // Log Selected Chart ID for Debugging

  // Handle Widget Updates
  const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
    if (!selectedChartId) return;

    // Update the selectedChartId
    const updatedChartId = {
      ...selectedChartId,
      ...updatedProperties,
    };
    setSelectedChartId(updatedChartId);

    // Update the widgets array
    const updatedWidgets = widgets.map((widget) =>
      widget.id === selectedChartId.id
        ? { ...widget, ...updatedProperties }
        : widget
    );
    setWidgets(updatedWidgets);
  };

  // Default Chart Data
  const defaultChartData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    datasets: [
      {
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: "#5c87df",
        borderColor: "#ffffff",
        borderWidth: 1,
      },
    ],
  };

  return (
    <div className="design">
      {/* Title of the Selected Widget */}
      <div className="selectedWidget">
        {selectedChartId?.title || "Widget 1"}
      </div>

      {/* Chart Component */}
      <div className="reviewChart">
        {selectedChartId && (
          <ChartComponent
            type={selectedChartId.type}
            title={selectedChartId.title}
            data={selectedChartId.data || defaultChartData} // Use widget data or default
          />
        )}
      </div>

      {/* Options Container */}
      <div className="optionsContainer">
        {/* Name Dropdown */}
        <div className="option">
          <span>Name</span>
          <RegularDropDown
            header={selectedChartId?.title || "Select Name"}
            options={["Option 1", "Option 2", "Option 3"]}
            onSelect={(value) => {
              setSelectedName(value);
              handleUpdateWidget({ title: value });
            }}
          />
        </div>

        {/* Element Dropdown */}
        <div className="option">
          <span>Element</span>
          <RegularDropDown
            header={selectedChartId?.type || "Select Element"}
            options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]} // Valid chart types
            onSelect={(value) => {
              setSelectedElement(value);
              handleUpdateWidget({ type: value });
            }}
          />
        </div>

        {/* Font Family Dropdown */}
        <div className="option">
          <span>Font Family</span>
          <RegularDropDown
            header={selectedChartId?.fontFamily || "Select Font"}
            options={["Arial", "Roboto", "Sans-serif"]}
            onSelect={(value) => {
              setSelectedFont(value);
              handleUpdateWidget({ fontFamily: value });
            }}
          />
        </div>

        {/* Size Dropdown */}
        <div className="option">
          <span>Size</span>
          <RegularDropDown
            header={selectedChartId?.fontSize || "Select Size"}
            options={["12px", "14px", "16px", "18px"]}
            onSelect={(value) => {
              setSelectedSize(value);
              handleUpdateWidget({ fontSize: value });
            }}
          />
        </div>

        {/* Weight Dropdown */}
        <div className="option">
          <span>Weight</span>
          <RegularDropDown
            header={selectedChartId?.fontWeight || "Select Weight"}
            options={["Light", "Regular", "Bold"]}
            onSelect={(value) => {
              setSelectedWeight(value);
              handleUpdateWidget({ fontWeight: value });
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default Design;