import { create } from "zustand";

type WidgetData = {
  id: string;
  type: string;
  position: [number, number, number];
  rotation?: [number, number, number];
  tempPosition?: [number, number, number];
};

type ZoneWidgetStore = {
  zoneWidgetData: Record<string, WidgetData[]>;
  setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void;
  addWidget: (zoneId: string, widget: WidgetData) => void;
  tempWidget: (zoneId: string, widget: WidgetData) => void;
  updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) => void;
  tempWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) => void;
  updateWidgetRotation: (zoneId: string, widgetId: string, newRotation: [number, number, number]) => void;
};

export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
  zoneWidgetData: {},

  setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) =>
    set((state: ZoneWidgetStore) => ({
      zoneWidgetData: { ...state.zoneWidgetData, [zoneId]: widgets },
    })),

  addWidget: (zoneId: string, widget: WidgetData) =>
    set((state: ZoneWidgetStore) => ({
      zoneWidgetData: {
        ...state.zoneWidgetData,
        [zoneId]: [...(state.zoneWidgetData[zoneId] || []), { ...widget, rotation: widget.rotation || [0, 0, 0] }],
      },
    })),
  tempWidget: (zoneId: string, widget: WidgetData) =>
    set((state: ZoneWidgetStore) => ({
      zoneWidgetData: {
        ...state.zoneWidgetData,
        [zoneId]: [...(state.zoneWidgetData[zoneId] || []), { ...widget, rotation: widget.rotation || [0, 0, 0] }],
      },
    })),

  updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) =>
    set((state: ZoneWidgetStore) => {
      const widgets = state.zoneWidgetData[zoneId] || [];
      return {
        zoneWidgetData: {
          ...state.zoneWidgetData,
          [zoneId]: widgets.map((widget: WidgetData) =>
            widget.id === widgetId ? { ...widget, position: newPosition } : widget
          ),
        },
      };
    }),
  tempWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) =>
    set((state: ZoneWidgetStore) => {
      const widgets = state.zoneWidgetData[zoneId] || [];
      return {
        zoneWidgetData: {
          ...state.zoneWidgetData,
          [zoneId]: widgets.map((widget: WidgetData) =>
            widget.id === widgetId ? { ...widget, position: newPosition } : widget
          ),
        },
      };
    }),

  updateWidgetRotation: (zoneId: string, widgetId: string, newRotation: [number, number, number]) =>
    set((state: ZoneWidgetStore) => {
      const widgets = state.zoneWidgetData[zoneId] || [];
      return {
        zoneWidgetData: {
          ...state.zoneWidgetData,
          [zoneId]: widgets.map((widget: WidgetData) =>
            widget.id === widgetId ? { ...widget, rotation: newRotation } : widget
          ),
        },
      };
    }),
}));


interface RightClickStore {
  rightClickSelected: string | null;
  setRightClickSelected: (x: string | null) => void;
}

export const useRightClickSelected = create<RightClickStore>((set) => ({
  rightClickSelected: null, // Default to null
  setRightClickSelected: (x) => set({ rightClickSelected: x }),
}));

export const useTopData = create<any>((set: any) => ({
  top: 0,
  setTop: (x: any) => set({ top: x }),
}));

export const useLeftData = create<any>((set: any) => ({
  left: 0,
  setLeft: (x: any) => set({ left: x }),
}));

interface RightSelectStore {
  rightSelect: string | null;
  setRightSelect: (x: string | null) => void;
}

export const useRightSelected = create<RightSelectStore>((set) => ({
  rightSelect: null, // Default state is null
  setRightSelect: (x) => set({ rightSelect: x }),
}));

interface EditWidgetOptionsStore {
  editWidgetOptions: boolean;
  setEditWidgetOptions: (value: boolean) => void;
}

export const useEditWidgetOptionsStore = create<EditWidgetOptionsStore>((set) => ({
  editWidgetOptions: false,  // Initial state
  setEditWidgetOptions: (value: boolean) => set({ editWidgetOptions: value }),
}));