import { ref } from 'vue'
import { defineStore } from 'pinia'
import { useLocalStorage } from '@vueuse/core'
import { DEFAULT_STRIP_THEME_ID, STRIP_THEME_MAP } from '../data/stripThemes'

export const usePhotoboothStore = defineStore('photobooth', () => {
  // photos: array of objects { src: string, transform: { x,y,scale,rotate, outputWidth, outputHeight } | null }
  const photos = ref([])
  const currentStep = ref(0)
  const savedTheme = useLocalStorage('photobooth:theme', DEFAULT_STRIP_THEME_ID)
  if (!STRIP_THEME_MAP[savedTheme.value]) {
    savedTheme.value = DEFAULT_STRIP_THEME_ID
  }
  const stripTheme = ref(savedTheme.value)
  const sessionActive = ref(false)

  function addPhoto(base64) {
    if (photos.value.length >= 3) return
    // store original `src`, optional `preview` for flattened edited image, and `transform` metadata
    photos.value.push({ src: base64, preview: null, transform: null })
  }

  function resetSession() {
    photos.value = []
    currentStep.value = 0
    sessionActive.value = false
  }

  function setTheme(theme) {
    if (!STRIP_THEME_MAP[theme]) return
    stripTheme.value = theme
    savedTheme.value = theme
  }

  function setStep(step) {
    currentStep.value = step
  }

  function setSessionActive(active) {
    sessionActive.value = active
  }

  return {
    photos,
    currentStep,
    stripTheme,
    sessionActive,
    addPhoto,
    resetSession,
    setTheme,
    setStep,
    setSessionActive,
  }
})
