import { createRouter, createWebHashHistory } from "vue-router";
import useUserInfoStore from "@/stores/useUserInfoStore";
import useGetCookie from "@/hooks/useGetCookie";
import System from "@/views/system/System.vue";
import SystemFloor from "@/views/system/SystemFloor.vue";

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/login",
      name: "login",
      component: () => import("@/views/login/Login.vue"),
    },
    {
      path: "/dashboard",
      index: true,
      name: "dashboard",
      component: () => import("@/views/dashboard/Dashboard.vue"),
    },
    {
      path: "/system/:main_system_id/:sub_system_id",
      name: "system",
      component: () => import("@/views/system/System.vue"),
      children: [
        {
          path: ":floor_id",
          name: "sub_system",
          component: () => import("@/views/system/SystemMain.vue"),
        },
      ],
    },
    {
      path: "/historyData",
      name: "history",
      component: () => import("@/views/history/History.vue"),
    },
    {
      path: "/operation",
      name: "operation",
      component: () => import("@/views/operation/Operation.vue"),
    },
    {
      path: "/graphManagement",
      name: "graphManagement",
      component: () => import("@/views/graphManagement/GraphManagement.vue"),
    },
    {
      path: "/accountManagement",
      name: "accountManagement",
      component: () =>
        import("@/views/accountManagement/AccountManagement.vue"),
    },
    {
      path: "/assetManagement",
      name: "assetManagement",
      component: () => import("@/views/AssetManagement/AssetManagement.vue"),
    },
    {
      path: "/alert",
      name: "alert",
      component: () => import("@/views/alert/AlertManagement.vue"),
    },
    {
      path: "/energyManagement",
      name: "energyManagement",
      component: () => import("@/views/energyManagement/EnergyManagement.vue"),
    },
    {
      path: "/setting/:main_system_id/:sub_system_id/:type",
      name: "setting",
      component: () => import("@/views/setting/SettingManagement.vue"),
    },
    {
      path: "/mytestfile/mjm",
      name: "mytestfile",
      component: () => import("@/views/Test.vue"),
    },
  ],
});

router.beforeEach(async (to, from, next) => {
  console.log("route", to, location, document.cookie);
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ["/login", "/"];
  const authRequired = !publicPages.includes(to.path);
  const auth = useUserInfoStore();
  const token = useGetCookie("JWT-Authorization");
  const user_name = useGetCookie("user_name");

  if (to.path === "/logout") {
    document.cookie = "JWT-Authorization=; Max-Age=0";
    document.cookie = "user_name=; Max-Age=0";
    auth.user.token = "";
    auth.user.user_name = "";
    localStorage.removeItem("EmpowerBuilding");
    window.location.reload();
    next({ path: "/login" });
  }

  if ((authRequired && !token) || to.path === "/") {
    auth.user.token = "";
    next({ path: "/login" });
  } else if (!authRequired) {
    document.cookie = "JWT-Authorization=; Max-Age=0";
    document.cookie = "user_name=; Max-Age=0";
    auth.user.token = "";
    auth.user.user_name = "";
  } else {
    auth.user.token = token;
    auth.user.user_name = user_name;
  }
  next();
});

export default router;