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[];
  zoneUuid: string;
  zoneViewPortTarget: number[];
  zoneViewPortPosition: number[];
  widgets: Widget[];
}

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

export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
  selectedZone: {
    zoneName: "",
    activeSides: [],
    panelOrder: [],
    lockedPanels: [],
    points: [],
    zoneUuid: "",
    zoneViewPortTarget: [],
    zoneViewPortPosition: [],
    widgets: [],
  },
  setSelectedZone: (zone) =>
    set((state) => ({
      selectedZone:
        typeof zone === "function"
          ? zone(state.selectedZone)
          : { ...state.selectedZone, ...zone },
    })),
  clearSelectedZone: () =>
    set(() => ({
      selectedZone: {
        zoneName: "",
        activeSides: [],
        panelOrder: [],
        lockedPanels: [],
        points: [],
        zoneUuid: "",
        zoneViewPortTarget: [],
        zoneViewPortPosition: [],
        widgets: [],
      },
    })),
}));
