<script>
import { defineComponent, computed, ref, onMounted } from "vue";
import Home from "../components/Home";
import HomeBlog from "../components/HomeBlog";
import Page from "../components/Page";
import MenuBar from "../components/MenuBar";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Common from "../components/Common";
import { resolveSidebarItems } from "../helpers/utils";
import { useInstance } from "../helpers/composable";
import { ModuleTransition } from "@vuepress-reco/core/lib/components";

export default defineComponent({
  render(h) {
    let ins = useInstance();
    global.ins = ins;

    let WBCContentObj = {
      options: {
        comp: "VApp",
        class: "",
      },
      a: {
        comp: Common,
        options: {
          props: { sidebarItems: this.sidebarItems, showModule: this.show },
        },
      },
      d: {
        0: "<~VMain>",
        1: this.$frontmatter.home
          ? [
              { comp: this.homeCom, options: { class: "brown" } },
              this.$frontmatter.home
                ? { comp: Footer, options: { class: "footer blue" } }
                : null,
            ]
          : {
              comp: Page,
              options: {
                props: { sidebarItems: this.sidebarItems },
              },
            },
      },
    };
    return h("WBC", { props: { item: WBCContentObj } });
  },
  components: { HomeBlog, Navbar, Home, Page, Common, Footer, ModuleTransition },
  setup(props, ctx) {
    const instance = useInstance();

    const sidebarItems = computed(() => {
      const { $page, $site, $localePath } = instance;
      if ($page) {
        return resolveSidebarItems(
          $page,
          $page.regularPath,
          $site,
          $localePath,
          instance.$store
        );
      } else {
        return [];
      }
    });

    const homeCom = computed(() => {
      const { type } = instance.$themeConfig || {};
      if (type) {
        return type == "blog" ? "HomeBlog" : type;
      }
      return "Home";
    });

    const show = ref(false);
    onMounted(() => {
      show.value = true;
    });

    const path = computed(() => {
      return instance?.$page.path;
    });

    const pageContent = computed(() => {
      return instance?.$page?.rawMarkdown || "";
    });

    const isSidebarOpen = ref(false);
    const shouldShowNavbar = computed(() => {
      const { themeConfig } = instance.$site;
      const { frontmatter } = instance.$page;
      if (frontmatter.navbar === false || themeConfig.navbar === false) {
        return false;
      }
      return (
        instance.$title ||
        themeConfig.logo ||
        themeConfig.nav ||
        instance.$themeConfig.blog ||
        instance.$site.locales
      );
    });
    const shouldShowSidebar = computed(() => {
      const { frontmatter } = instance.$page;
      return (
        !frontmatter.home && frontmatter.sidebar !== false && sidebarItems.value.length
      );
    });
    const recoShowFooter = computed(() => {
      return instance.$themeConfig.footer && instance.$themeConfig.footer.show;
    });

    const toggleSidebar = (to) => {
      isSidebarOpen.value = typeof to === "boolean" ? to : !isSidebarOpen.value;
      ctx.emit("toggle-sidebar", isSidebarOpen.value); // Emit event if needed by parent
    };

    instance.$router.afterEach(() => {
      isSidebarOpen.value = false; // Close sidebar on route change
    });

    const pageClasses = computed(() => {
      const userPageClass = instance.$page.frontmatter.pageClass;
      return [
        {
          "no-navbar": !shouldShowNavbar.value,
          "sidebar-open": isSidebarOpen.value,
          "no-sidebar": !shouldShowSidebar.value,
        },
        userPageClass,
      ];
    });
    const pageKey = computed(() => {
      return "key-main-" + instance.$store.state.lg;
    });

    const pageRawMarkdown = computed(() => {
      return instance?.$page.rawMarkdown || "";
    });

    return {
      sidebarItems,
      homeCom,
      show,
      path,
      pageContent,
      isSidebarOpen,
      shouldShowNavbar,
      shouldShowSidebar,
      recoShowFooter,
      toggleSidebar,
      pageClasses,
      pageKey,
      pageRawMarkdown,
    };
  },
});
</script>

<!-- <style src="prismjs/themes/prism-tomorrow.css"></style> -->
<style src="../styles/theme.styl" lang="stylus"></style>
<style src="../styles/override.styl" lang="stylus"></style>
