Dwinzo_dev/app/src/components/layout/sidebarRight/visualization/design/Design.tsx

import { useState } from "react";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";

// 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");
  console.log("selectedName: ", selectedName);

  const [selectedElement, setSelectedElement] = useState("drop down");
  console.log("selectedElement: ", selectedElement);

  const [selectedFont, setSelectedFont] = useState("drop down");
  console.log("selectedFont: ", selectedFont);

  const [selectedSize, setSelectedSize] = useState("drop down");
  console.log("selectedSize: ", selectedSize);

  const [selectedWeight, setSelectedWeight] = useState("drop down");
  console.log("selectedWeight: ", selectedWeight);

  const [elementColor, setElementColor] = useState("#6f42c1"); // Default color for elements
  const [showColorPicker, setShowColorPicker] = useState(false); // Manage visibility of the color picker

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

  // 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: elementColor, // Default background color
        borderColor: "#ffffff", // Default border color
        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>

        {/* Element Color Picker */}
        <div className="option">
          <div
            className="header"
            onClick={() => setShowColorPicker((prev) => !prev)}
          >
            <span>Element Color</span>
            <div className="icon">▾</div>{" "}
            {/* Change icon based on the visibility */}
          </div>

          {/* Show color picker only when 'showColorPicker' is true */}
          {showColorPicker && (
            <div className="colorDisplayer">
              <input
                type="color"
                value={elementColor}
                onChange={(e) => {
                  setElementColor(e.target.value);
                  handleUpdateWidget({
                    data: {
                      labels: selectedChartId?.data?.labels || [],
                      datasets: [
                        {
                          ...selectedChartId?.data?.datasets[0],
                          backgroundColor: e.target.value, // Update the element color
                        },
                      ],
                    },
                  });
                }}
              />
              {/* Display the selected color value */}
              <span style={{ marginLeft: "10px" }}>{elementColor}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Design;