import 'react-native-gesture-handler';
import React, {JSX} from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {SDKConfigProvider} from './contexts/SDKConfigContext';
import {QueryClientProvider} from './contexts/QueryClient';
import {ToastProvider} from './contexts/ToastProvider';
import {NavigationLayout} from './navigation';
import {StoreProvider} from './contexts/StoreContext';
import {SDKConfig} from './utils/types';

export interface SavingsSDKProps {
  config: SDKConfig;
}

const SavingsSDKCore = (): JSX.Element => {
  return (
    <SafeAreaProvider>
      <GestureHandlerRootView style={{flex: 1}}>
        <StoreProvider>
          <ToastProvider>
            <QueryClientProvider>
              <NavigationLayout />
            </QueryClientProvider>
          </ToastProvider>
        </StoreProvider>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
};

const SavingsSDK = ({config}: SavingsSDKProps): JSX.Element => {
  // Default config values (fallbacks)
  const defaultConfig: SDKConfig = {
    apiKey: '',
    primaryColor: 'rgba(166, 130, 255, 1)',
    onClose: () => {
      console.log('SDK close requested - parent app should handle this');
    },
    onTokenExpired: () => {
      console.log('Token expired - parent app should handle authentication refresh or logout');
    },
  };

  // Merge provided config with defaults
  const mergedConfig: SDKConfig = {
    apiKey: config?.apiKey || defaultConfig.apiKey,
    primaryColor: config?.primaryColor || defaultConfig.primaryColor,
    onClose: config?.onClose || defaultConfig.onClose,
    onTokenExpired: config?.onTokenExpired || defaultConfig.onTokenExpired,
  };

  return (
    <SDKConfigProvider config={mergedConfig}>
      <SavingsSDKCore />
    </SDKConfigProvider>
  );
};

export default SavingsSDK;