import { create } from "zustand";

export interface Widget {
  id: string;
  type: string;
  title: string;
  panel: string;
  data: any;
}

export interface Template {
  id: string;
  name: string;
  panelOrder: string[];
  widgets: Widget[];
  floatingWidget: any[]; // Fixed empty array type
  widgets3D: any[]; // Fixed empty array type
  snapshot?: string | null;
}

interface TemplateStore {
  templates: Template[];
  addTemplate: (template: Template) => void;
  setTemplates: (templates: Template[]) => void; // Changed from `setTemplate`
  removeTemplate: (id: string) => void;
}

export const useTemplateStore = create<TemplateStore>((set) => ({
  templates: [],
  
  // Add a new template to the list
  addTemplate: (template) =>
    set((state) => ({
      templates: [...state.templates, template],
    })),

  // Set (replace) the templates list with a new array
  setTemplates: (templates) =>
    set(() => ({
      templates, // Ensures no duplication
    })),

  // Remove a template by ID
  removeTemplate: (id) =>
    set((state) => ({
      templates: state.templates.filter((t) => t.id !== id),
    })),
}));

export default useTemplateStore;