import { useColorScheme } from 'react-native';
import { Provider } from 'react-redux';
import AuthContextProvider from './AuthProvider';
import { DefaultTheme, PaperProvider } from 'react-native-paper';
import { AmityUIKitReduxContext, store } from '../stores/store';
import { ConfigProvider } from './ConfigProvider';
import { validateConfigColor } from '../utils/color';
import useValidateConfig from '../../social/hooks/useValidateConfig';
import fallBackConfig from '../../../uikit.config.json';
import { BehaviourProvider } from '../../social/providers/BehaviourProvider';
import { ExploreProvider } from '../../social/providers/ExploreProvider';
import { lighten, darken, parseToHsl, hslToColorString } from 'polished';
import { AdEngineProvider } from '../../social/providers/AdEngineProvider';
import BottomSheetComponent from '../../social/components/BottomSheetComponent/BottomSheetComponent';
import Toast from '../../social/components/Toast';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ErrorBoundary } from '../components/ErrorBoundary';
const queryClient = new QueryClient();
export default function AmityUiKitProvider({
  userId,
  displayName,
  apiKey,
  apiRegion,
  apiEndpoint,
  children,
  authToken,
  configs,
  behaviour,
  fcmToken
}) {
  const colorScheme = useColorScheme();
  const SHADE_PERCENTAGES = [0.25, 0.4, 0.45, 0.6];
  const generateShades = (hexColor, isDarkTheme = false) => {
    // if the base color is the same as our design system colors, we need to return the shades of the design system colors
    // primary color
    if (hexColor.toLowerCase() === '#1054de') return ['#4A82F2', '#A9C4F9', '#D9E5FC', '#FFFFFF'];
    // secondary color
    if (hexColor.toLowerCase() === '#292b32' && !isDarkTheme) return ['#636878', '#898E9E', '#A5A9B5', '#EBECEF'];
    if (hexColor.toLowerCase() === '#ebecef' && isDarkTheme) return ['#A5A9B5', '#898E9E', '#40434E', '#292B32'];
    if (!hexColor) return Array(SHADE_PERCENTAGES.length).fill('');
    const hslColor = parseToHsl(hexColor);
    const shades = SHADE_PERCENTAGES.map(percentage => {
      return isDarkTheme ? darken(percentage, hslToColorString(hslColor)) : lighten(percentage, hslToColorString(hslColor));
    });
    return shades;
  };
  const isValidConfig = useValidateConfig(configs);
  const configData = isValidConfig ? configs : fallBackConfig;
  const isDarkTheme = (configData === null || configData === void 0 ? void 0 : configData.preferred_theme) === 'dark' || (configData === null || configData === void 0 ? void 0 : configData.preferred_theme) === 'default' && colorScheme === 'dark';
  const themeColor = isDarkTheme ? configData.theme.dark : configData.theme.light;
  const primaryShades = generateShades(themeColor.primary_color, isDarkTheme);
  const secondaryShades = generateShades(themeColor.secondary_color, isDarkTheme);
  const globalTheme = {
    ...DefaultTheme,
    isDarkTheme: isDarkTheme,
    colors: {
      ...DefaultTheme.colors,
      primary: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.primary_color),
      primaryShade1: validateConfigColor(primaryShades[0]),
      primaryShade2: validateConfigColor(primaryShades[1]),
      primaryShade3: validateConfigColor(primaryShades[2]),
      primaryShade4: validateConfigColor(primaryShades[3]),
      secondary: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.secondary_color),
      secondaryShade1: validateConfigColor(secondaryShades[0]),
      secondaryShade2: validateConfigColor(secondaryShades[1]),
      secondaryShade3: validateConfigColor(secondaryShades[2]),
      secondaryShade4: validateConfigColor(secondaryShades[3]),
      background: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.background_color),
      backgroundShade1: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.background_shade1_color),
      base: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.base_color),
      baseShade1: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.base_shade1_color),
      baseShade2: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.base_shade2_color),
      baseShade3: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.base_shade3_color),
      baseShade4: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.base_shade4_color),
      alert: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.alert_color),
      live: validateConfigColor(themeColor === null || themeColor === void 0 ? void 0 : themeColor.live_color),
      transparentBlack: 'rgba(0,0,0,0.5)',
      black: '#000000',
      white: '#FFFFFF'
    }
  };
  return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(SafeAreaProvider, null, /*#__PURE__*/React.createElement(QueryClientProvider, {
    client: queryClient
  }, /*#__PURE__*/React.createElement(Provider, {
    store: store,
    context: AmityUIKitReduxContext
  }, /*#__PURE__*/React.createElement(AuthContextProvider, {
    userId: userId,
    displayName: displayName || userId,
    apiKey: apiKey,
    apiRegion: apiRegion,
    apiEndpoint: apiEndpoint,
    authToken: authToken,
    fcmToken: fcmToken
  }, /*#__PURE__*/React.createElement(AdEngineProvider, null, /*#__PURE__*/React.createElement(ConfigProvider, {
    configs: configData
  }, /*#__PURE__*/React.createElement(BehaviourProvider, {
    behaviour: behaviour
  }, /*#__PURE__*/React.createElement(ExploreProvider, null, /*#__PURE__*/React.createElement(PaperProvider, {
    theme: globalTheme
  }, children, /*#__PURE__*/React.createElement(BottomSheetComponent, null), /*#__PURE__*/React.createElement(Toast, null)))))))))));
}
//# sourceMappingURL=AmityUIKitProvider.js.map