import { create } from "zustand"

export interface SelectedCell {
    id: string
    label: string
    isEdge: boolean
}

/** Rectangle relative to the draw.io iframe's top-left corner */
export interface CanvasRect {
    x: number
    y: number
    width: number
    height: number
}

export interface CanvasPage {
    id: string
    name: string
}

interface CanvasState {
    /** The page can call the draw.io editor directly (same-origin iframe) */
    hasEditor: boolean
    canUndo: boolean
    canRedo: boolean
    /** Zoom in percent */
    zoom: number
    pages: CanvasPage[]
    currentPageId: string | null
    selection: SelectedCell[]
    selectionRect: CanvasRect | null
    /** Freehand drawing is on */
    isFreehand: boolean
    /** The format (style) panel is open */
    isFormatOpen: boolean
    isShapesOpen: boolean
    set: (partial: Partial<Omit<CanvasState, "set">>) => void
}

export const useCanvasStore = create<CanvasState>((set) => ({
    hasEditor: false,
    canUndo: false,
    canRedo: false,
    zoom: 100,
    pages: [],
    currentPageId: null,
    selection: [],
    selectionRect: null,
    isFreehand: false,
    isFormatOpen: false,
    isShapesOpen: false,
    set: (partial) => set(partial),
}))