import React, {useContext} from 'react';
import {NavigationContainer, useNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Cart from '../components/screens/Cart';
import MedicineList from '../components/screens/MedicineList';
import ProductDetail from '../components/screens/ProductDetail';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Colors} from '../constants/Constants';
import {AuthContext} from '../store/AuthContext';

const Stack = createNativeStackNavigator();

export default function AuthStack() {
  const authCtx = useContext(AuthContext);
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: true,
          tabBarStyle: {backgroundColor: '#0e1529'},
        }}
        sceneContainerStyle={{backgroundColor: '#0e1529'}}>
        <Stack.Screen
          name="MedicineList"
          component={MedicineList}
          options={{
            title: 'Product List',
            headerRight: () => {
              return (
                <Icon
                  onPress={authCtx.logout}
                  name="sign-out"
                  size={30}
                  color={Colors.primary500}></Icon>
              );
            },
          }}
        />
        <Stack.Screen
          name="ProductDetail"
          component={ProductDetail}
          options={{
            title: 'Product Detail',
            headerRight: () => {
              return (
                <Icon
                  onPress={authCtx.logout}
                  // name="shopping-cart"
                  name="sign-out"
                  size={30}
                  color={Colors.primary500}></Icon>
              );
            },
          }}
        />
        <Stack.Screen name="Cart" component={Cart} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}