Dwinzo/frontend/src/components/ui/sideBar/realTimeViz/design.tsx

import React, { useEffect, useState } from "react";
import RegularDropDown from "../../inputs/regularDropDown";
import { useWidgetStore } from "../../../../store/store";
import styles from "./Design.module.scss"; // Import SCSS file
import ChartComponent from "./chartComponent";

type Side = "top" | "bottom" | "left" | "right";

// Define the Widget interface
interface Widget {
  id: string;
  type: string; // Change this if the type is more specific
  panel: Side; // You should define or import 'Side' type if not already defined
  title: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: string;
}

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");

  const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
    useWidgetStore(); // Get selected chart ID and list of widgets

  // Find the selected widget based on `selectedChartId`
  const selectedWidget = selectedChartId
    ? widgets.find((widget) => widget.id === selectedChartId.id)
    : null;

  // Function to update the selected widget
  const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
    if (!selectedWidget) {
      return;
    }

    // Update the widgets array
    const updatedWidgets = widgets.map((widget) =>
      widget.id === selectedWidget.id
        ? { ...widget, ...updatedProperties } // Merge existing widget with updated properties
        : widget
    );

    // Update the global state with the new widgets array
    setWidgets(updatedWidgets);

    // Update `selectedChartId` to reflect the changes
    if (selectedChartId) {
      const updatedChartId = {
        ...selectedChartId,
        ...updatedProperties, // Merge updated properties into `selectedChartId`
      };
      setSelectedChartId(updatedChartId);
    }
  };

  useEffect(() => {
    // Log the current state of widgets for debugging
  }, [widgets]);

  return (
    <div className="design">
      {/* Display the selected widget's title */}
      <div className="selectedWidget">
        {selectedWidget ? selectedWidget.title : "Widget 1"}
      </div>
      <div className="reviewChart">
        {/* Pass selectedWidget properties to ChartComponent */}
        {selectedWidget && (
          <ChartComponent
            type={selectedWidget.type}
            title={selectedWidget.title}
          />
        )}
      </div>

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

        <div className="option">
          <span>Element</span>
          <RegularDropDown
            header={selectedElement}
            options={["Option 1", "Option 2", "Option 3"]}
            onSelect={(value) => {
              setSelectedElement(value);
              handleUpdateWidget({ type: value }); // Update element type
            }}
          />
        </div>

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

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

        <div className="option">
          <span>Weight</span>
          <RegularDropDown
            header={selectedWeight}
            options={["Light", "Regular", "Bold"]}
            onSelect={(value) => {
              setSelectedWeight(value);
              handleUpdateWidget({ fontWeight: value });
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default Design;