/*
 * File: Provider.tsx
 * Description: Redux Provider wrapper with PersistGate
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store ,persistor} from '.';
import { Text, View } from 'react-native';


// ============================================================================
// PROVIDER COMPONENT
// ============================================================================

/**
 * Store Provider Component
 * 
 * Purpose: Wrap the app with Redux Provider and PersistGate
 * 
 * Features:
 * - Redux store provider
 * - Redux Persist gate for state rehydration
 * - Loading state during persistence
 * - Error handling for persistence failures
 * 
 * @param children - React children components
 */
interface StoreProviderProps {
  children: React.ReactNode;
}

/**
 * Loading Component for PersistGate
 * 
 * Purpose: Show loading state while Redux state is being rehydrated
 * 
 * Features:
 * - Simple loading indicator
 * - Consistent with app theme
 * - Minimal blocking UI
 */
const PersistLoadingComponent: React.FC = () => {
  return (
    <View >
      <Text style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100%',
      backgroundColor: '#f5f5f5',
      fontSize: 16,
      color: '#666',
    }}>Loading app data...</Text>
    </View>
  );
};

/**
 * Store Provider Component
 * 
 * Purpose: Main provider component that wraps the app
 * 
 * Features:
 * - Redux Provider for state management
 * - PersistGate for state persistence
 * - Loading state during rehydration
 * 
 * 
 * - Error handling for persistence issues
 */
export const StoreProvider: React.FC<StoreProviderProps> = ({ children }) => {
  return (
    <ReduxProvider store={store}>
      <PersistGate
        loading={<PersistLoadingComponent />}
        persistor={persistor}
        onBeforeLift={() => {
          // Called before the store is lifted (rehydrated)
          console.log('Redux store is about to be rehydrated');
        }}
        //@ts-ignore
        onAfterLift={() => {
          // Called after the store is lifted (rehydrated)
          console.log('Redux store has been rehydrated');
        }}
      >
        {children}
      </PersistGate>
    </ReduxProvider>
  );
};

/*
 * End of File: Provider.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */