import * as React from 'react';
import { Button, View, Image} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import About from './screens/about';
import Gallery from './screens/gallery';
import Calendario from './screens/calendar';
import Donate from './screens/donar';
import Solicitar from './screens/solicitar';
import Account from './screens/account';
import Header from './shared/header';

const screens = {
  About: {
      screen: About,
      navigationOptions: ({navigation}) => {
          return {
              headerTitle: () => <Header navigation={navigation}/>,
          }
      }
  },
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}



const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer >
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Sobre nosotros" component={About} options={({navigation}) => {
          return {
              headerTitle: () => <Header navigation={navigation}/>,
          }
        }}/>
        <Drawer.Screen name="Calendario" component={Calendario} options={({navigation}) => {
          return {
              headerTitle: () => <Header navigation={navigation}/>,
          }
        }}/>
        <Drawer.Screen name="Galeria" component={Gallery} options={({navigation}) => {
          return {
              headerTitle: () => <Header navigation={navigation}/>,
          }
        }}/>
        <Drawer.Screen name="Donar" component={Donate} options={({navigation}) => {
          return {
              headerTitle: () => <Header navigation={navigation}/>,
          }
        }}/>
        <Drawer.Screen name="Solicitar ayuda" component={Solicitar} 
        options={({navigation}) => {
          return {
              headerTitle: () => <Header navigation={navigation}/>,
          }
        }}/>

        <Drawer.Screen name="Mi cuenta" component={Account} 
        options={({navigation}) => {
          return {
              headerTitle: () => <Header navigation={navigation}/>,
          }
        }}/>    
      </Drawer.Navigator>
    </NavigationContainer>
  );
}