import DefaultTheme from "vitepress/theme";
import { watch } from "vue";
import { useData } from "vitepress";
import type { App } from "vue";
import TDesignMobile from "tdesign-mobile-vue";
import TimiWebUI, { VPopup } from "timi-web";

// 必须引完整样式：`tdesign-mobile-vue/es/style/index.css` 只含全局 token，
// 不含任何组件类，全量注册时会导致所有组件无样式渲染。
import "tdesign-mobile-vue/dist/tdesign.css";
import "./styles/index.less";

import DemoPreview from "./containers/DemoPreview.vue";
import ApiTable from "./components/ApiTable.vue";

/**
 * 同步深色模式。
 *
 * VitePress 通过 `html.dark` 切换深色，而 TDesign 依赖 `html[theme-mode="dark"]`，
 * 两者不是同一套机制，不同步会导致深色模式下 TDesign 组件仍是亮色。
 */
function syncThemeMode(dark: boolean) {
	if (typeof document === "undefined") {
		return;
	}
	document.documentElement.setAttribute("theme-mode", dark ? "dark" : "light");
}

export default {
	extends: DefaultTheme,

	enhanceApp({ app }: { app: App }) {
		// 全量注册 TDesign Mobile，演示区内所有 t-* 组件直接可用。
		app.use(TDesignMobile);
		// 组件内部大量使用 timi-web 的 v-popup 指令，且用在组件模板里，
		// 无法由演示局部注入，只能在主题里全局注册。
		app.use(TimiWebUI);
		app.directive("popup", VPopup);

		app.component("demo-preview", DemoPreview);
		app.component("api-table", ApiTable);
	},

	setup() {
		const { isDark } = useData();
		watch(isDark, syncThemeMode, { immediate: true });
	}
};