/* eslint-disable no-unused-vars */

import React from 'react';
import {Button, View, Alert} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import styles from './style.js';

//import StopwatchContainer from './stopwatch.container';
import Quiz1 from './quiz1';
import Quiz2 from './quiz2';
import Quiz3 from './quiz3';
import Quiz4 from './quiz4';
import Quiz5 from './quiz5';
import Quiz6 from './quiz6';
import Quiz7 from './quiz7';
import Quiz8 from './quiz8';
import Quiz9 from './quiz9';
import Quiz10 from './quiz10';
import Quiz11 from './quiz11';
import Quiz12 from './quiz12';
import Quiz13 from './quiz13';
import Quiz14 from './quiz14';
import TotalScore from './totalScore';
import {Icon} from 'react-native-elements';

const Stack = createStackNavigator();

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="1"
            component={Quiz1}
            options={{
              //headerShown: false,
              title: ' ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
            }}
          />
          <Stack.Screen
            name="2"
            component={Quiz2}
            options={{
              //title: 'D Major',
              title: '',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="3"
            component={Quiz3}
            options={{
              //title: 'E Major ',
              title: '',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="4"
            component={Quiz4}
            options={{
              title: '',
              //title: 'F Sharp Major',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="5"
            component={Quiz5}
            options={{
              title: '',
              //title: 'F Major ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="6"
            component={Quiz6}
            options={{
              title: '',
              // title: 'E Flat Major ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="7"
            component={Quiz7}
            options={{
              title: '',
              // title: 'D Flat Major',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="8"
            component={Quiz8}
            options={{
              title: '',
              //title: 'G Major',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="9"
            component={Quiz9}
            options={{
              title: '',
              //title: 'A Major',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="10"
            component={Quiz10}
            options={{
              title: '',
              //title: 'B Major ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="11"
            component={Quiz11}
            options={{
              title: '',
              //title: 'C Sharp Major ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="12"
            component={Quiz12}
            options={{
              title: '',
              //title: 'B Flat Major ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="13"
            component={Quiz13}
            options={{
              title: '',
              // title: 'A Flat Major ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="14"
            component={Quiz14}
            options={{
              title: '',
              //title: 'G Flat Major ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="15"
            component={TotalScore}
            options={{
              title: ' ',
              headerStyle: {
                backgroundColor: 'white',
              },
              headerTintColor: 'black',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={30}
                  color="black"
                />
              ),
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

export default App;
