import { h } from "vue";
import { type Theme, useRoute } from "vitepress";
import DefaultTheme from "vitepress/theme";
import AsideSponsors from "./components/AsideSponsors.vue";
import VideoModuleLink from "./components/VideoModuleLink.vue";
import "./styles/vars.css";
import imageViewer from "vitepress-plugin-image-viewer";
import vImageViewer from "vitepress-plugin-image-viewer/lib/vImageViewer.vue";

import {
  DocAsideLogo,
  DocBox,
  DocBoxCube,
  DocLinks,
  DocPill,
  DocVideoLink,
  HomeFooter,
  HomeUnderline,
} from "@theojs/lumen";

const theme: Theme = {
  ...DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      "home-hero-image": () =>
        h(
          "div",
          { class: "image-src" },
          h("img", {
            src: "/logo.png",
            alt: "小蚂蚁云",
          }),
        ),
      "aside-ads-before": () => h(AsideSponsors),
    });
  },
  setup() {
    const route = useRoute();
    imageViewer(route);
  },
  enhanceApp({ app }) {
    app.component("Home", HomeUnderline);
    app.component("Pill", DocPill);
    app.component("Box", DocBox);
    app.component("Links", DocLinks);
    app.component("BoxCube", DocBoxCube);
    app.component("Vid", DocVideoLink);
    app.component("VideoModuleLink", VideoModuleLink);
    app.component("vImageViewer", vImageViewer);
  },
};

export default theme;