/* eslint-disable prettier/prettier */
/**
 * React Native App
 * Everthing starts from the entrypoint
 */
import React, { useEffect, useCallback, useMemo, useRef } from 'react';
import {
  ActivityIndicator,
  SafeAreaView,
  View,
  Text,
  StyleSheet,
} from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/es/integration/react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
import './i18n/i18n';

import Navigator from 'app/navigation';
import configureStore from 'app/store';
import AsyncStorage from '@react-native-async-storage/async-storage';
import SplashScreen from 'react-native-splash-screen';
import { Host, Portal } from 'react-native-portalize';
import { RootSiblingParent } from 'react-native-root-siblings';
import {
  ActionSheetProvider,
  connectActionSheet,
} from '@expo/react-native-action-sheet';
import BottomSheet from '@gorhom/bottom-sheet';

const { persistor, store } = configureStore();

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#08B09F',
    accent: '#f1c40f',
  },
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});
export default function Entrypoint() {
  useEffect(() => {
    SplashScreen.hide();
  }, []);
  const ConnectedApp = connectActionSheet(Navigator);
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);
  return (
    // <BottomSheet
    //   ref={bottomSheetRef}
    //   index={1}
    //   snapPoints={snapPoints}
    //   onChange={handleSheetChanges}>
    //   <View style={styles.contentContainer}>
    //     <Text>Awesome 🎉</Text>
    //   </View>
    // </BottomSheet>

    <Provider store={store}>
      <PersistGate loading={<ActivityIndicator />} persistor={persistor}>
        <PaperProvider
          theme={theme}
          settings={{
            icon: (props) => <AwesomeIcon {...props} />,
          }}>
          <Host>
            <RootSiblingParent>          
              <Navigator />
            </RootSiblingParent>
          </Host>
        </PaperProvider>
      </PersistGate>
    </Provider>
  );
}