import { createRouter, createWebHistory } from 'vue-router';
import { setLocale } from './../i18n';
import VisualizationView from '../views/VisualizationView.vue';

const routes = [
  {
    path: '/', // Root path
    redirect: () => {
      // Detect the user's browser language
      const userLang = navigator.language || navigator.userLanguage;
      const defaultLocale = userLang.startsWith('es') ? 'es' : 'en';
      return `/${defaultLocale}`; // Redirect to '/en' or '/es'
    },
  },
  {
    path: '/:lang(en|es)', // Language prefix is required
    name: 'VisualizationContent',
    component: VisualizationView,
    meta: {
      requiresLang: true,
    },
  },
  {
    path: '/index.html', // Handle direct navigation to /index.html
    redirect: () => {
      const userLang = navigator.language || navigator.userLanguage;
      const defaultLocale = userLang.startsWith('es') ? 'es' : 'en';
      return `/${defaultLocale}`; // Redirect to '/en' or '/es'
    },
  },
  {
    path: '/:lang(en|es)', // Language prefix route
    name: 'VisualizationContent',
    component: VisualizationView,
    meta: {
      requiresLang: true,
    },
  },
  {
    path: '/:lang(en|es)?/index.html', // Language prefix route
    name: 'Index',
    component: VisualizationView,
    meta: {
      requiresLang: true,
    },
  },
];


const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

// Global beforeEach guard for setting up the locale
router.beforeEach(async (to, from, next) => {
  const lang = to.params.lang || 'en'; // Default to 'en' if no language is provided

  // Set the i18n locale
  if (to.meta.requiresLang) {
    await setLocale(lang); // Asynchronously update the locale
  }

  next();
});

export default router;