import { create } from "zustand";

export interface Widget {
  id: string;
  type: string; // Can be chart type or "progress"
  panel: "top" | "bottom" | "left" | "right";
  title: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: string;
  data: {
    // Chart data
    labels?: string[];
    datasets?: Array<{
      data: number[];
      backgroundColor: string;
      borderColor: string;
      borderWidth: number;
    }>;
    // Progress card data
    stocks?: Array<{
      key: string;
      value: number;
      description: string;
    }>;
  };
}

interface WidgetStore {
  draggedAsset: Widget | null; // The currently dragged widget asset
  widgets: Widget[]; // List of all widgets
  selectedChartId: any;
  setDraggedAsset: (asset: Widget | null) => void; // Setter for draggedAsset
  addWidget: (widget: Widget) => void; // Add a new widget
  setWidgets: (widgets: Widget[]) => void; // Replace the entire widgets array
  setSelectedChartId: (widget: Widget | null) => void; // Set the selected chart/widget
}

// Create the store with Zustand
export const useWidgetStore = create<WidgetStore>((set) => ({
  draggedAsset: null,
  widgets: [],
  selectedChartId: null, // Initialize as null, not as an array
  setDraggedAsset: (asset) => set({ draggedAsset: asset }),
  addWidget: (widget) =>
    set((state) => ({ widgets: [...state.widgets, widget] })),
  setWidgets: (widgets) => set({ widgets }),
  setSelectedChartId: (widget) => set({ selectedChartId: widget }),
}));