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";

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>
			<Tab.Screen name={'Home'} component={Home} options={{
				title: t('home')
			}} />
			<Tab.Screen name={'Product'} component={Product} options={{
				title: t('books')
			}} />
			<Tab.Screen name={'Videos'} component={Videos} options={{
				title: t('videos')
			}} />
			<Tab.Screen name={'Exams'} component={Exams} options={{
				title: t('exams')
			}} />
			<Tab.Screen name={'Profile'} component={Profile} options={{
				title: t('profile')
			}} />
		</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);