import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import routerStatus from "@/lib/router";
import { createHead } from "@unhead/vue/client";
import { serverInfo } from "@/lib/account";

import "@/global.css";
import Layout from "@/Layout.vue";

const app = createApp(Layout);

app.use(createHead());

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      meta: {
        title: "ホーム",
      },
      component: () => import("@/routes/index.vue"),
    },
    {
      path: "/setup",
      redirect: "/setup/initialization",
    },
    {
      path: "/setup/initialization",
      meta: {
        title: "初期設定",
      },
      component: () => import("@/routes/setup/initialization.vue"),
    },
    {
      path: "/setup/create-admin",
      meta: {
        title: "管理者アカウントの作成",
      },
      component: () => import("@/routes/setup/create-admin.vue"),
    },
    {
      path: "/signin",
      meta: {
        title: "サインイン",
      },
      component: () => import("@/routes/signin.vue"),
    },
    {
      path: "/signup",
      meta: {
        title: "サインアップ",
      },
      component: () => import("@/routes/signup.vue"),
    },
    {
      path: "/community/:communityId",
      meta: {
        title: "コミュニティ",
        isFullRoute: true,
        isHiddenTitleBar: true,
      },
      component: () => import("@/routes/community/index.vue"),
      children: [
        {
          path: "",
          component: () => import("@/routes/community/index.inner.vue"),
        },
        {
          path: ":channelId",
          component: () => import("@/routes/community/channel.vue"),
        },
      ],
    },
    {
      path: "/:NotFound(.*)*",
      meta: {
        title: "お探しのページは見つかりませんでした。",
      },
      component: () => import("@/NotFound.vue"),
    },
  ],
});
router.beforeEach((to, from) => {
  if (from.matched.length > 0 && to.path === from.path)
    return false;
  
  routerStatus.isLoad = true;
  return;
});
router.afterEach((to, from) => {
  if (to.path === from.path) {
    routerStatus.isLoad = false;
    return false;
  }

  const title = to.meta.title;

  let serverName = "LynqChat";

  if (serverInfo.value?.success && serverInfo.value.name) {
    serverName = serverInfo.value.name;
  }

  document.title = title
    ? `${title} | ${serverName}`
    : serverName;
  routerStatus.isLoad = false;
});
app.use(router);

app.mount("body");