import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import SplashScreen from './src/screens/SplashScreen';
import HomeScreen from './src/screens/HomeScreen';
import {StatusBar, View} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import PredictScreen from './src/screens/PredictScreen';
import AntDesign from 'react-native-vector-icons/AntDesign';

import Entypo from 'react-native-vector-icons/Entypo';
import ResultScreen from './src/screens/ResultScreen';
import UserResult from './src/screens/UserResult';

const welcomeStack = createNativeStackNavigator();
const tab = createBottomTabNavigator();

const welcomeNavigator = () => {
  return (
    <welcomeStack.Navigator>
      <welcomeStack.Screen
        name="SplashScreen"
        component={SplashScreen}
        options={{headerShown: false}}
      />
      <welcomeStack.Screen
        name="HomeScreen"
        component={TabNavigator}
        options={{headerShown: false}}
      />
      <welcomeStack.Screen
        name="UserResult"
        component={UserResult}
        options={{headerShown: false}}
      />
      <welcomeStack.Screen
        name="ResultScreen"
        component={ResultScreen}
        options={{headerShown: false}}
      />
    </welcomeStack.Navigator>
  );
};

const TabNavigator = () => {
  return (
    <tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarStyle: {backgroundColor: '#1A2980'},
        tabBarActiveTintColor: 'white',
        tabBarInactiveTintColor: '#26D0CE',
        tabBarLabelStyle: {fontSize: 18},
      }}>
      <tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({color, size}) => {
            return <AntDesign name="home" color={color} size={size} />;
          },
        }}
      />
      <tab.Screen
        name="Predict"
        component={PredictScreen}
        options={{
          tabBarIcon: ({color, size}) => {
            return <Entypo name="awareness-ribbon" color={color} size={size} />;
          },
        }}
      />
      <tab.Screen
        name="Result"
        component={ResultScreen}
        options={{
          tabBarIcon: ({color, size}) => {
            return <Entypo name="bar-graph" color={color} size={size} />;
          },
        }}
      />
    </tab.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <StatusBar barStyle="light-content" backgroundColor="#26D0CE" />
      <View style={{flex: 1}}>{welcomeNavigator()}</View>
    </NavigationContainer>
  );
};

export default App;