import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Splash from './src/screens/Splash';
import Home from './src/screens/Home';
import Login from './src/screens/Login';
import Otp from './src/screens/Otp';
import Product from './src/screens/Product';
import Products from './src/screens/Products';
import ShoppingCart from './src/screens/ShoppingCart';
import QR from './src/screens/QR/index';
import {connect} from 'react-redux';
import i18n from './src/services/i18n';
import {useTranslation} from 'react-i18next';
import Profile from './src/screens/Profile';
import Videos from './src/screens/Videos';
import Exams from './src/screens/Exams';
import OrderDetails from './src/screens/OrderDetails';

const mapStateToProps = state => {
  return {
    profile: state.profile,
    config: state.config,
  };
};

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function BottomTab(props) {
  const {t} = useTranslation('translation', {keyPrefix: 'main'});

  return (
    <Tab.Navigator initialRouteName={'Home'}>
      <Tab.Screen
        name={'Profile'}
        component={Profile}
        options={{
          title: t('profile'),
        }}
      />
      <Tab.Screen
        name={'Exams'}
        component={Exams}
        options={{
          title: t('exams'),
        }}
      />
      <Tab.Screen
        name={'Videos'}
        component={Videos}
        options={{
          title: t('videos'),
        }}
      />
      <Tab.Screen
        name={'OrderDetails'}
        component={OrderDetails}
        options={{
          title: t('books'),
        }}
      />
      <Tab.Screen
        name={'Home'}
        component={Home}
        options={{
          title: t('home'),
        }}
      />
    </Tab.Navigator>
  );
}

function Navigator(props) {
  React.useEffect(() => {
    i18n.changeLanguage(props.config.lan);
  }, [props.config]);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{headerShown: false}}
          name="Splash"
          component={Splash}
        />
        <Stack.Screen
          name="Login"
          component={Login}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Otp"
          component={Otp}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Home"
          component={BottomTab}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Product"
          component={Product}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Products"
          component={Products}
          options={{headerShown: false}}
        />
        <Stack.Screen name="QR" component={QR} options={{headerShown: true}} />
        <Stack.Screen
          name="سبد خرید"
          component={ShoppingCart}
          options={{headerShown: true}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default connect(mapStateToProps)(Navigator);