import { View, Text, TouchableWithoutFeedback} from 'react-native';
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SearchPage from '../screens/Search/SearchPage';
import HomePage from '../screens/HomePage/HomePage';
import NotificationPage from '../screens/Notifications/NotificationPage';
import NewsDetailPage from '../screens/News/NewsDetailPage';
import NewsListPage from '../screens/News/NewsListPage';
import NewscoutHomeHeader from '../components/molecules/Header/NewscoutHomeHeader';
import colors from '../constants/colors';
import AntIcon from 'react-native-vector-icons/AntDesign'
import OctiIcon from 'react-native-vector-icons/Octicons'
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'

const Stack = createNativeStackNavigator();

const defaultScreenOptions = {
    headerShown: false
}

const MainPageNavigator = () => {
  return (
    <Stack.Navigator
        initialRouteName='MainPage'
    >
        <Stack.Screen
            name="MainPage"
            component={HomePage}
            options={{
                header: ({navigation,route}) => <NewscoutHomeHeader
                left={
                  <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
                    <OctiIcon name='three-bars' color={colors().primaryColor} size={24} />
                  </TouchableWithoutFeedback>
                }
              >
                <View style={{ alignItems: 'center', flexDirection: 'row', gap: 16 }}>
                  <TouchableWithoutFeedback onPress={() => navigation.navigate('NotificationPage')}>
                    <MaterialIcon name='notifications-none' color={colors().secondaryColor} size={30} />
                  </TouchableWithoutFeedback>
                  <TouchableWithoutFeedback onPress={() => {
                    navigation.navigate('ProfileNav', { screen: 'SettingsPage' })
                  }}>
                    <AntIcon name='setting' color={colors().primaryColor} size={24} />
                  </TouchableWithoutFeedback>
                </View>
              </NewscoutHomeHeader>
            }}
            
        />
        <Stack.Screen
            name="NotificationPage"
            component={NotificationPage}
            options={{header: ({route,navigation}) => {}}}
        />
        <Stack.Screen
            name="NewsDetailPage"
            component={NewsDetailPage}
            options={{...defaultScreenOptions}}
        />
        <Stack.Screen
            name="NewsListPage"
            component={NewsListPage}
            options={{...defaultScreenOptions}}
        />
    </Stack.Navigator>
  )
}

export default MainPageNavigator
