import { h } from "vue";
import type { Theme } from "vitepress";
import DefaultTheme from "vitepress/theme";
import { useData, useRoute } from "vitepress";
import codeblocksFold from "vitepress-plugin-codeblocks-fold";
import "vitepress-plugin-codeblocks-fold/style/index.css";
import "./style.css";
import "virtual:uno.css";

export default {
  extends: DefaultTheme,

  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // Here you can define custom layout slots or modify the layout.
    });
  },

  enhanceApp({ app, router, siteData }) {
    // This is where you can add additional app enhancements or global components
    // For example, registering global components or plugins
    // DefaultTheme.enhanceApp(ctx) can be called here if needed
    // Using the plugin within enhanceApp() is possible if needed, but `setup()` is a cleaner way to do it.
  },

  setup() {
    // Get frontmatter and route from VitePress composition API
    const { frontmatter } = useData();
    const route = useRoute();

    // Set up the codeblocks fold plugin with route and frontmatter data
    // The second argument enables collapsing by default (true/false)
    // The third argument sets the max height of the code block before it collapses (in pixels)
    codeblocksFold({ route, frontmatter }, true, 400);
  },
} satisfies Theme;