import React from 'react';
//import {ImageBackground} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Icon} from 'react-native-elements';

import Settings from './screens/settings';
import LogBook from './screens/logbook';
import Home from './screens/home';
import Quiz from './screens/quiz';

import Orientation from 'react-native-orientation';

const Stack = createStackNavigator();

class App extends React.Component {
  componentDidMount() {
    Orientation.lockToPortrait();
  }
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Home"
          screenOptions={{
            headerStyle: {
              backgroundColor: 'antiquewhite',
            },
            layout: {
              orientation: 'portrait',
            },
          }}>
          <Stack.Screen
            name="1"
            component={Home}
            options={{
              title: ' ',
              headerTransparent: true,
              layout: {
                orientation: 'portrait',
              },
            }}
          />
          <Stack.Screen
            name="2"
            component={Quiz}
            options={({navigation}) => ({
              //title: 'C Major',
              headerStyle: {
                backgroundColor: '#E07EF9',
              },
              headerTintColor: '#fff',
              title: '',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={26}
                  color="black"
                  onPress={() => {
                    navigation.navigate('1');
                    Orientation.lockToPortrait();
                  }}
                />
              ),
            })}
          />
          <Stack.Screen
            name="3"
            component={LogBook}
            options={{
              title: 'Records',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={26}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="4"
            component={Settings}
            options={{
              title: 'Settings ',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={26}
                  color="black"
                />
              ),
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

export default App;
