import { defineStore } from 'pinia'
import { shallowRef } from 'vue'
import type { ViewMode } from '@/types/note'

export const useUiStore = defineStore('ui', () => {
  const viewMode = shallowRef<ViewMode>('canvas')
  const canvasScale = shallowRef(1)
  const canvasOffsetX = shallowRef(0)
  const canvasOffsetY = shallowRef(0)

  function setViewMode(mode: ViewMode) {
    viewMode.value = mode
  }

  function toggleView() {
    viewMode.value = viewMode.value === 'canvas' ? 'dashboard' : 'canvas'
  }

  return { viewMode, canvasScale, canvasOffsetX, canvasOffsetY, setViewMode, toggleView }
})