import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

export interface CanvasState {
  camX: number
  camY: number
  zoom: number
  flying: boolean
  dragging: boolean
  collapsed: boolean
  spacePanning: boolean
}

const INITIAL_STATE: CanvasState = {
  camX: 0,
  camY: 0,
  zoom: 1,
  flying: false,
  dragging: false,
  collapsed: false,
  spacePanning: false,
}

export const useCanvasStore = create<CanvasState>()(
  devtools(
    persist(
      (set, get) => ({
        ...INITIAL_STATE,
        setCam: (x: number, y: number) => set({ camX: x, camY: y }),
        setZoom: (zoom: number) => set({ zoom }),
        setFlying: (flying: boolean) => set({ flying }),
        setDragging: (dragging: boolean) => set({ dragging }),
        setCollapsed: (collapsed: boolean) => set({ collapsed }),
        setSpacePanning: (spacePanning: boolean) => set({ spacePanning }),
      }),
      {
        name: 'canvas-state',
      }
    )
  )
)
