// the router creates front-end endpoints and serves pages to them

import { createRouter, createWebHistory } from "vue-router";
import LoginForm from "../pages/LoginForm.vue";
import RegisterForm from "../pages/RegisterForm.vue";
import UsersList from "../pages/UsersList.vue";
import UserForm from "../pages/UserForm.vue";
import index from "../pages/index.vue";

// link path to the page component
const routes = [
	{ path: "/", component: index },
	{ path: "/login", component: LoginForm },
	{ path: "/register", component: RegisterForm },
	{ path: "/users", component: UsersList },
	{ path: "/user/new", component: UserForm, meta: { requiresAuth: true } },
	{ path: "/user/:id", component: UserForm, meta: { requiresAuth: true } }
]; // I really like this

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

// intercept before routing
router.beforeEach((to, from, next) => {

	const token = localStorage.getItem("token");
	if(to.meta.requiresAuth && !token) { // if the page requires use to be signed in, they must have at least a token set
		next("/login");
	} else {
		next();
	}
	// TODO: if they have a token, but invalid, it will still send them to the page (the api will catch non-authorized though)
	// maybe have a "validate token" from the api and refresh it if valid
	/*
	} else {
		bool authorizedUser = authApi.refreshToken(token);
		if(authorizedUser) {
			next();
		} else {
			next("/login");
		}
	}
	*/
});

export default router;