import { type ReactNode } from 'react';
import { LocaleProvider, LocaleProviderProps, useLocaleContext } from '../Locale/context';
import ThemeProvider, { type ThemeProviderProps, useColorScheme } from '../Theme/theme-provider';
import { useTheme } from '../Theme';

export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, ThemeProviderProps {
  children: ReactNode;
  translations?: Record<string, any>;
}

/**
 * 集中化配置
 */
export function ConfigProvider({
  children,
  // theme provider
  theme,
  injectFirst,
  darkSchemeClass,
  prefer,
  disableBlockletTheme = false,
  enableColorScheme,
  disableStyleCache,
  // locale provider
  locale,
  fallbackLocale,
  translations = {},
  languages,
  onLoadingTranslation,
}: ConfigProviderProps) {
  return (
    <ThemeProvider
      theme={theme}
      injectFirst={injectFirst}
      darkSchemeClass={darkSchemeClass}
      prefer={prefer}
      disableBlockletTheme={disableBlockletTheme}
      enableColorScheme={enableColorScheme}
      disableStyleCache={disableStyleCache}>
      <LocaleProvider
        locale={locale}
        fallbackLocale={fallbackLocale}
        translations={translations}
        onLoadingTranslation={onLoadingTranslation}
        languages={languages}>
        {children}
      </LocaleProvider>
    </ThemeProvider>
  );
}

export function useConfig() {
  const theme = useTheme();
  const localeCtx = useLocaleContext();
  const colorSchemeCtx = useColorScheme();

  return {
    theme,
    ...localeCtx,
    ...colorSchemeCtx,
  };
}
