import { defineStore } from 'pinia'
import { ref } from 'vue'

import { createScene, deleteScene, fetchScenes, renameScene } from '../api/scenes'
import { getViewer } from '../three/instance'
import type { ScenePosition } from '../types'

export const useScenesStore = defineStore('scenes', () => {
  const items = ref<ScenePosition[]>([])
  const loaded = ref(false)
  const loading = ref(false)

  async function load(force = false): Promise<void> {
    if (loaded.value && !force) return
    loading.value = true
    try {
      items.value = await fetchScenes()
      loaded.value = true
    } finally {
      loading.value = false
    }
  }

  function apply(scene: ScenePosition, animate = true): void {
    const viewer = getViewer()
    if (!viewer) return
    if (animate) viewer.flyToCamera(scene.camera, scene.target)
    else viewer.applyCamera(scene.camera, scene.target)
  }

  async function add(name: string): Promise<void> {
    const state = getViewer()?.getCameraState()
    if (!state) return
    const scene = await createScene(name, state.camera, state.target)
    items.value = [...items.value, scene]
  }

  async function rename(id: number, name: string): Promise<void> {
    const scene = await renameScene(id, name)
    const target = items.value.find((item) => item.id === id)
    if (target) target.name = scene.name
  }

  async function remove(id: number): Promise<void> {
    await deleteScene(id)
    items.value = items.value.filter((item) => item.id !== id)
  }

  function reset(): void {
    items.value = []
    loaded.value = false
    loading.value = false
  }

  return { items, loaded, loading, load, apply, add, rename, remove, reset }
})