import { create } from "zustand";

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

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

interface SelectedZoneState {
  zoneName: string;
  activeSides: Side[];
  panelOrder: Side[];
  points: []
  lockedPanels: Side[];
  zoneId: string;
  zoneViewPortTarget: number[];
  zoneViewPortPosition: number[];
  widgets: Widget[];
}

interface SelectedZoneStore {
  selectedZone: SelectedZoneState;
  setSelectedZone: (
    zone:
      | Partial<SelectedZoneState>
      | ((prev: SelectedZoneState) => SelectedZoneState)
  ) => void;
}

export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
  selectedZone: {
    zoneName: "", // Empty string initially
    activeSides: [], // Empty array
    panelOrder: [], // Empty array
    lockedPanels: [], // Empty array
    points: [],
    zoneId: "",
    zoneViewPortTarget: [],
    zoneViewPortPosition: [],
    widgets: [], // Empty array
  },
  setSelectedZone: (zone) =>
    set((state) => ({
      selectedZone:
        typeof zone === "function"
          ? zone(state.selectedZone) // Handle functional updates
          : { ...state.selectedZone, ...zone }, // Handle partial updates
    })),
}));