/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, YellowBox } from 'react-native';
import { createSwitchNavigator, createStackNavigator, createDrawerNavigator, createAppContainer, createBottomTabNavigator, HeaderBackButton } from 'react-navigation';
import Connect from "./screens/login/Connect";
import SplashScreen from "./screens/splashscreen/SplashScreen";
import HelpMenu from "./screens/help/HelpMenu";
import Help from "./screens/help/Help";
import ForgottenPassword from "./screens/login/ForgottenPassword";
import TypeChoiser from "./screens/login/TypeChoiser";
import CreateUserStep2 from "./screens/login/createUserStep2";
import createAccount from "./screens/login/createAccount";
import UpdateInformations from "./screens/account/UpdateInformations";
import UserAccount from "./screens/account/UserAccount";
import ActivateAccount from "./screens/login/ActivateAccount";
import Notifications from "./screens/notifications/Notifications";
import About from "./screens/configurations/About";
import Configurations from "./screens/configurations/Configurations";

import History from './screens/history-request/History'
import OptionsMenu from "./screens/optionMenu/OptionsMenu";
import Home from "./screens/home/Home";
import HistoryItemDetails from "./screens/history-request/HistoryItemDetails";
import SuperViseurGroupeHome from "./screens/groupes/SuperViseurGroupeHome";
import HistoryRequester from "./screens/history-request/HistoryRequester";
import AddNetwork from "./screens/account/AddNetwork";
import MyHistory from "./screens/history-request/MyHistory";
import Icon from "react-native-vector-icons/FontAwesome5";
import { Appbar } from 'react-native-paper';

import IconWithBadge from "./screens/IconWithBadge"
import I18n from "react-native-i18n";
import Filter from './screens/home/Filter';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

import WalletDetail from './screens/wallet/WalletDetail';
import WalletSelect from './screens/wallet/WalletSelect';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './redux/store';
import { Provider } from 'react-redux';
import WalletDepot from './screens/wallet/WalletDepot';
import WalletRetrait from './screens/wallet/WalletRetrait';

const instructions = Platform.select({
     ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
     android:
          'Double tap R on your keyboard to reload,\n' +
          'Shake or press menu button for dev menu',
});

const theme = require("./utils/theme")

const AuthStack = createStackNavigator({
     login: Connect,
     helpMenu: HelpMenu,
     help: Help,
     forgottenpass: ForgottenPassword,
     typeaccountcreate: TypeChoiser,
     simpleusercreate: createAccount,
     step2: CreateUserStep2,
     activateaccout: ActivateAccount

}, {
     headerMode: 'none'
})
const AppStack = createDrawerNavigator({
     sta: createStackNavigator({
          home: Home,
          /* filtre:Filter,
           network:Networks,*/
          useraccount: {
               screen: UserAccount,
               navigationOptions: {
               },
          },
          notificationview: Notifications,
          configuration: Configurations,
          about: About

     })
}, { contentComponent: OptionsMenu, headerMode: 'none', contentOptions: { activeTintColor: theme.accent } })

const AppAgentStack = createDrawerNavigator({
     sta: createStackNavigator({
          home: Home,
          useraccount: UserAccount,
          walletSelect: WalletSelect,
          Historique:
          {
               screen: createBottomTabNavigator({ myDemand: MyHistory }, {
                    headerMode: "none",
                    header: null,
                    headerTitle: null,
                    headerTitle: I18n.t('CREDIT_MANAGE'),
                    tabBarOptions: {
                         labelStyle: {
                              fontSize: 13,
                              fontWeight: "bold"
                         },
                    }
               }),
               navigationOptions: ({ navigation }) => ({
                    header: null,
                    headerMode: 'none',
                    headerTitle: null,
                    activeColor: '#f0edf6',
                    inactiveColor: '#3e2465',
                    barStyle: { backgroundColor: '#694fad' },
                    headerLeft: (<HeaderBackButton />),
                    drawerLabel: I18n.t('CREDIT_MANAGE'),
                    drawerIcon: ({ tintColor }) => (
                         <Icon
                              name={'credit-card'}
                              size={24}
                         />)
               }),
          },

          historyItemDetails: HistoryItemDetails,
          creditrequest: HistoryRequester,
          addNetwork: AddNetwork,
          updateinformation: UpdateInformations,
          notificationview: Notifications,
          configuration: Configurations,
          about: About,
          walletDetail: WalletDetail,
          walletDepot: WalletDepot,
          walletRetrait: WalletRetrait
     })
}, {
     contentComponent: OptionsMenu,
     backBehavior: "none",
     lazy: false,
     headerMode: 'none', contentOptions: { activeTintColor: theme.accent }
})
const AppAdministratorStack = createDrawerNavigator({
     sta: createStackNavigator({
          home: Home,
          useraccount: UserAccount,
          walletSelect: WalletSelect,
          Historique: {
               screen: createBottomTabNavigator({
                    myDemand: MyHistory, OthersDemand: MyHistory
               }, {
                    headerMode: "none",
                    header: null,
                    headerTitle: null,
                    title: I18n.t('CREDIT_MANAGE'),
                    tabBarOptions: {
                         labelStyle: {
                              fontSize: 13,
                         },
                    }
               }),
               navigationOptions: ({ navigation }) => ({
                    header: null,
                    headerMode: 'none',
                    headerTitle: null,
                    activeColor: '#f0edf6',
                    inactiveColor: '#3e2465',
                    barStyle: { backgroundColor: '#694fad' },

                    drawerLabel: I18n.t('CREDIT_MANAGE'),
                    drawerIcon: ({ tintColor }) => (
                         <Icon
                              name={'credit-card'}
                              size={24}
                         />)
               }),
          },
          creditrequest: HistoryRequester,
          historyItemDetails: HistoryItemDetails,

          superviseurgroup: SuperViseurGroupeHome,
          notificationview: Notifications,
          configuration: Configurations,
          about: About,
          walletDetail: WalletDetail,
          walletDepot: WalletDepot,
          walletRetrait: WalletRetrait

     })
},
     {
          contentComponent: OptionsMenu,
          backBehavior: "none",
          headerMode: 'none'
     })
const AppSuperAdministrator = createDrawerNavigator({
     sta: createStackNavigator({
          home: Home,
          useraccount: UserAccount,
          walletSelect: WalletSelect,
          Historique: {
               screen: createBottomTabNavigator({ OthersDemand: MyHistory }, {
                    headerMode: "none",
                    header: null,
                    headerTitle: null,
                    title: I18n.t('CREDIT_MANAGE'),
                    tabBarOptions: {
                         labelStyle: {
                              fontSize: 13,
                              fontWeight: "bold"
                         },
                    }
               }),
               navigationOptions: ({ navigation }) => ({
                    title: I18n.t('CREDIT_MANAGE'),
                    headerMode: "none",
                    header: null,
                    headerTitle: null,
                    drawerIcon: ({ tintColor }) => (
                         <Icon
                              name={'credit-card'}
                              size={24}
                         />)
               }),
          },
          creditrequest: HistoryRequester,
          historyItemDetails: HistoryItemDetails,
          superviseurgroup: SuperViseurGroupeHome,
          notificationview: Notifications,
          configuration: Configurations,
          about: About,
          walletDetail: WalletDetail,
          walletDepot: WalletDepot,
          walletRetrait: WalletRetrait

     })
}, {
     contentComponent: OptionsMenu,
     backBehavior: "none",
     headerMode: 'none'
})
export const AppNavigator = createSwitchNavigator({
     first: {
          screen: SplashScreen
     },
     App: AppStack,
     AgentApp: AppAgentStack,
     adminApp: AppAdministratorStack,
     supAdminApp: AppSuperAdministrator,
     Auth: AuthStack
}, {
     initialRouteName: 'first'
});
const AppContainer = createAppContainer(AppNavigator);

class App extends React.Component {


     render() {
          return (
               <Provider store={store}>
                    <PersistGate persistor={persistor}>
                         <AppContainer />
                    </PersistGate>
               </Provider>
          );
     }
}

export default App;

const styles = StyleSheet.create({
     container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF',
     },
     welcome: {
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
     },
     instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5,
     },
});