import { useMainStore } from "@/stores/store";
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Language from "../components/Language.vue";
import Step_1 from "../views/Step_1.vue";
import Step_2 from "../views/Step_2.vue";
import Step_3 from "../views/Step_3.vue";
import Step_4 from "../views/Step_4.vue";
import Step_5 from "../views/Step_5.vue";
import Step_6 from "../views/Step_6.vue";
// 天燈
import Skylantern from '../views/Skylantern.vue'
import SkylanternHome from '../views/SkylanternHome.vue'
import SkylanternStep_1 from '../views/SkylanternStep_1.vue'
import SkylanternStep_2 from '../views/SkylanternStep_2.vue'
import SkylanternStep_3 from '../views/SkylanternStep_3.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/:lang?',
      name: 'home',
      component: HomeView,
      children: [
        {
          path: '/:lang?',
          component: Language,
        },
        {
          path: 'step1',
          component: Step_1,
        },
        {
          path: 'step2',
          component: Step_2,
        },
        {
          path: 'step3',
          component: Step_3,
        },
        {
          path: 'step4',
          component: Step_4,
          meta: {
            requiresBgImg: true
          }
        },
        {
          path: 'step5',
          component: Step_5,
          meta: {
            requiresBgImg: true
          }
        },
        {
          path: 'step6',
          component: Step_6,
          meta: {
            requiresBgImg: true
          }
        },
        // 天燈
        {
          path: '/skylantern',
          name: 'skylantern',
          component: Skylantern
        },
        {
          path: '/skylanternhome',
          name: 'skylantern_home',
          component: SkylanternHome
        },
        {
          path: '/skylantern_step1',
          name: 'skylantern_step1',
          component: SkylanternStep_1
        },
        {
          path: '/skylantern_step2',
          name: 'skylantern_step2',
          component: SkylanternStep_2
        },
        {
          path: '/skylantern_step3',
          name: 'skylantern_step3',
          component: SkylanternStep_3
        },
      ],
    },
  ]
})

router.beforeEach((to, from, next) => {
  const store = useMainStore();
  // 檢查是否已選擇背景圖，否則不能進入結果頁(step6)
  if (to.meta.requiresBgImg && !store.assignBgImg) {
    next('/step3'); // 返回選擇背景頁面
  } else {
    next();
  }
});

export default router