import {View, Text} from 'react-native';
import React, {useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import SplashScreenComp from '../Components/SplashScreen/SplashScreen';
import Login from '../Screens/Login/Login';
import {createDrawerNavigator} from '@react-navigation/drawer';
import Home from '../Screens/Home/Home';
import {useSelector, useDispatch} from 'react-redux';
import CustomDrawer from '../Components/CustomDrawer/CustomDrawer';
import Student from '../Screens/Students/Student';
import {t} from 'i18next';
import checkLanguageInLocalStorage from '../Helpers/translation';
import {useTranslation} from 'react-i18next';
import {default as MaterialIcons} from 'react-native-vector-icons/Ionicons';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import BottomTabNavigator from '../Navigation/BottomTabNavigator';
import Attendance from '../Screens/Attendance/Attendance';

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

const Home_Stack = () => {
  <Stack></Stack>;
};

const Tab_Stack = () => {
  return (
    <Tab.Navigator>
      {/* <Tab.Screen
        name="aaa"
        component={DrawerStack}
        options={{
          headerShown: false,
        }}
      /> */}
      <Tab.Screen name="Settings" component={Login} />
      <Tab.Screen name="aaaaaa" component={Attendance} />
    </Tab.Navigator>
  );
};

const DrawerStack = () => {
  return (
    <Drawer.Navigator
      headerShown={false}
      initialRouteName="Home"
      drawerPosition="right"
      drawerContent={props => <CustomDrawer {...props} />}
      screenOptions={{
        headerShown: true,
        drawerLabelStyle: {marginLeft: -15, fontSize: 18},
        drawerActiveBackgroundColor: '#ec5c26',
        drawerActiveTintColor: 'white',
        drawerInactiveTintColor: 'black',
      }}>
      <Drawer.Screen
        name="Home"
        component={Tab_Stack}
        options={{
          drawerIcon: ({color}) => (
            <MaterialIcons name="md-people" size={20} color={color} />
          ),
        }}
      />
      {/* <Drawer.Screen
        name="Login"
        component={Login}
        options={{
          drawerIcon: ({color}) => (
            <MaterialIcons name="md-people" size={20} color={color} />
          ),
        }}
      />
      <Drawer.Screen
        name={t('students')}
        component={Student}
        options={{
          drawerIcon: ({color}) => (
            <MaterialIcons name="md-people" size={20} color={color} />
          ),
        }}
      />
      <Drawer.Screen
        name={t('attendance')}
        component={Attendance}
        options={{
          drawerIcon: ({color}) => (
            <MaterialIcons name="md-people" size={20} color={color} />
          ),
        }}
      /> */}
      {/* <Drawer.Screen
        name={t('attendance')}
        component={Attendance}
        options={{
          drawerIcon: ({color}) => (
            <MaterialIcons name="md-people" size={20} color={color} />
          ),
        }}
      /> */}
    </Drawer.Navigator>
  );
};

const Routes = () => {
  const {loading, user, isLogin} = useSelector(state => state.authentication);
  console.log(isLogin, 'isLogin');
  const {t, i18n} = useTranslation();
  useEffect(() => {
    checkLanguageInLocalStorage(i18n);
  }, []);
  return (
    <>
      <NavigationContainer>
        {!isLogin ? (
          <Stack.Navigator>
            <Stack.Screen
              name="Login"
              component={Login}
              options={{headerShown: false}}
            />
          </Stack.Navigator>
        ) : (
          <>
            <DrawerStack />
            {/* <Tab.Navigator>
              <Tab.Screen
                name="aaa"
                component={DrawerStack}
                options={{
                  headerShown: false,
                }}
              />
              <Tab.Screen name="Settings" component={Login} />
              <Tab.Screen name="aaaaaa" component={Attendance} />
            </Tab.Navigator> */}
          </>
        )}
      </NavigationContainer>
    </>
  );
};

export default Routes;
