import * as NaiveUI from "naive-ui";
import { computed } from "vue";

/**
 * 挂载 Naive-ui 脱离上下文的 API
 * 如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，可以通过 createDiscreteApi 来构建对应的 API。
 * https://www.naiveui.com/zh-CN/dark/components/discrete
 */

export function setupNaiveDiscreteApi() {
  const configProviderPropsRef = computed(() => ({
    // theme: NaiveUI.darkTheme,
    // themeOverrides: {
    //   common: {
    //     primaryColor: designStore.appTheme,
    //     primaryColorHover: designStore.appTheme,
    //     primaryColorPressed: designStore.appTheme,
    //   },
    //   LoadingBar: {
    //     colorLoading: designStore.appTheme,
    //   },
    // },
  }));
  const { message, dialog, notification, loadingBar } =
    NaiveUI.createDiscreteApi(
      ["message", "dialog", "notification", "loadingBar"],
      {
        configProviderProps: configProviderPropsRef,
      }
    );

  (window as any)["$message"] = message;
  (window as any)["$dialog"] = dialog;
  (window as any)["$notification"] = notification;
  (window as any)["$loading"] = loadingBar;
}
