import { createRouter, createWebHistory } from 'vue-router'
import AuthLayout from '../layouts/AuthLayout.vue'
// import {useAuthStore} from '../stores/auth';

// const authStore = useAuthStore();

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'auth',
      component: AuthLayout,
      children: [
        {
          path: '',
          name: 'login',
          component: () => import('../views/LoginView.vue'),
        },
        {
          path: 'registro',
          name: 'register',
          component: () => import('../views/RegisterView.vue'),
        },
        {
          path: 'recuperar-cuenta',
          name: 'recovery',
          component: () => import('../views/RecoveryPasswordView.vue'),
        },
        {
          path: 'registro-empresa',
          name: 'register-company',
          component: () => import('../views/CompleteRegisterView.vue')
        }
      ]
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: () => import('../layouts/AdminLayout.vue'),
      meta: { requiresAuth: true },
      children: [
        {
          path: 'inicio',
          name: 'home',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: 'empresa',
          name: 'company',
          component: () => import('../views/MyCompanyView.vue'),
        },
        {
          path: 'ubicaciones',
          name: 'locations',
          component: () => import('../views/LocationsView.vue'),
        },
        {
          path: 'publicaciones',
          name: 'published',
          component: () => import('../views/PublishedView.vue'),
        },
        {
          path: 'usuarios',
          name: 'users',
          component: () => import('../views/UsersView.vue'),
        },
        {
          path: 'calculadora',
          name: 'calculator',
          component: () => import('../views/CalculatorView.vue'),
        },
        {
          path: 'reportes',
          name: 'reports',
          component: () => import('../views/ReportsView.vue'),
        },
        {
          path: 'calendario',
          name: 'calendar',
          component: () => import('../views/CalendarView.vue'),
        },
        {
          path: 'cargas',
          name: 'loads',
          component: () => import('../views/LoadsView.vue'),
        },
        {
          path: 'vehiculos',
          name: 'vehicles',
          component: () => import('../views/VehiclesView.vue'),
        },
        {
          path: 'embarcadores',
          name: 'carriers',
          component: () => import('../views/CarriersView.vue'),
        },
        {
          path: 'transportistas',
          name: 'shippers',
          component: () => import('../views/ShippersView.vue'),
        },
      ]
    }
  ]
});

router.beforeEach( async(to, from, next) => {
  const requiresAuth = to.matched.some(url => url.meta.requiresAuth)
  const session = localStorage.getItem('session');
  console.log('Se ejecuta router');
  if(requiresAuth) {
    //Comprobamos si el usuario esta authenticado
    if(session) {
      // if(!authStore.user) {
      //   await authStore.checkSession();
        next();
      // }
    } else {
      next({name: 'login'})
    }
  } else {
    // No esta protegido
    next();
  }
});

export default router