import { createRouter, createWebHistory } from 'vue-router'
import { usePhotoboothStore } from '../stores/photoboothStore'

import Home from '../pages/Home.vue'
import Capture from '../pages/Capture.vue'
import Customize from '../pages/Customize.vue'
import Result from '../pages/Result.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/capture', name: 'capture', component: Capture },
    {
      path: '/customize',
      name: 'customize',
      component: Customize,
      meta: { requiresPhotos: true },
    },
    {
      path: '/result',
      name: 'result',
      component: Result,
      meta: { requiresPhotos: true },
    },
  ],
})

router.beforeEach((to) => {
  if (!to.meta?.requiresPhotos) return true

  const store = usePhotoboothStore()
  if (store.photos.length >= 3) return true

  return { name: 'home' }
})

export default router