<template>
  <n-config-provider
    :theme-overrides="naiveTheme"
    inline-theme-disabled
  >
    <slot />
  </n-config-provider>
</template>

<script setup>
import { defu } from "defu";
import {
  useHead,
  useRuntimeConfig,
  useNaiveDevice
} from "#imports";
defineProps({});
const runtimeConfig = useRuntimeConfig().public.naiveui;
const colorMode = runtimeConfig.colorModePreference === "dark-only" ? "dark" : "light";
const deviceTheme = getDeviceTheme();
const naiveTheme = getTheme();
useHead({
  htmlAttrs: {
    class: colorMode === "dark" ? "dark" : ""
  },
  bodyAttrs: {
    style: {
      "background-color": naiveTheme.common?.bodyColor,
      "color": naiveTheme.common?.textColorBase,
      "font-family": naiveTheme.common?.fontFamily,
      "font-size": naiveTheme.common?.fontSize,
      "line-height": naiveTheme.common?.lineHeight
    }
  }
});
function getTheme() {
  const colorModeTheme = colorMode === "dark" ? runtimeConfig.themeConfig.dark : runtimeConfig.themeConfig.light;
  const theme = defu(runtimeConfig.themeConfig.shared, deviceTheme, colorModeTheme);
  if (runtimeConfig.spaLoadingTemplate) {
    setLoadingTemplateTheme(theme);
  }
  return theme;
}
function getDeviceTheme() {
  const { isMobileOrTablet, isMobile } = useNaiveDevice();
  if (isMobileOrTablet) {
    return runtimeConfig.themeConfig.mobileOrTablet;
  } else if (isMobile) {
    return defu(runtimeConfig.themeConfig.mobile, runtimeConfig.themeConfig.mobileOrTablet);
  }
}
function setLoadingTemplateTheme(theme) {
  if (import.meta.client) {
    const setLocalStorageItem = (key, value) => {
      if (value)
        localStorage.setItem(key, value);
      else
        localStorage.removeItem(key);
    };
    setLocalStorageItem("naive-body-bg-color", theme?.common?.bodyColor);
    setLocalStorageItem("naive-primary-color", theme?.common?.primaryColor);
  }
}
</script>
