import { createWebHistory, createRouter, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
const Settings = () => import("../views/Settings.vue");
const Login = () => import("../views/Login.vue");
const Sites = () => import("../views/Sites.vue");
const AccessPoints = () => import("../views/AccessPoints.vue");
const CreateAccessPoint = () => import("../views/CreateAccessPoint.vue");
const RegisterAccessPoint = () => import("../views/RegisterAccessPoint.vue");
import { isLoggedIn } from "../api";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/settings",
    name: "Settings",
    component: Settings,
  },
  {
    path: "/sites",
    name: "Sites",
    component: Sites,
  },
  {
    path: "/login",
    name: "Login",
    component: Login,
    props: (route) => ({ logout: route.query.logout }),
  },
  {
    path: "/aps",
    name: "AccessPoints",
    component: AccessPoints,
    props: (route) => ({ siteID: Number(route.query["site-id"]).valueOf() }),
  },
  {
    path: "/createAccessPoint",
    name: "CreateAccessPoint",
    component: CreateAccessPoint,
    props: (route) => ({ siteID: Number(route.query["site-id"]).valueOf() }),
  },
  {
    path: "/editAccessPoint",
    name: "EditAccessPoint",
    component: CreateAccessPoint,
    props: (route) => ({
      apID: Number(route.query["ap-id"]).valueOf(),
      edit: true,
    }),
  },
  {
    path: "/registerAccessPoint",
    name: "RegisterAccessPoint",
    component: RegisterAccessPoint,
    props: (route) => ({ apID: Number(route.query["ap-id"]).valueOf() }),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(async (to) => {
  if (to.name !== "Login") {
    const canAccess = await isLoggedIn();
    if (!canAccess) return "/login";
  }
  return true;
});

export default router;