/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Image} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Icon} from 'react-native-elements';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
//import Settings from './screens/settings';
import SettingsScale from './screens/settingScale';
import SettingsListen from './screens/settingListen';
import Listen from './screens/listening';
import LogBookScale from './screens/logbookScale';
import LogBookListen from './screens/logbookListen';
import Home from './screens/home';
import Quiz from './screens/quiz';
import MetronomeSkill from './screens/metronome';
import Orientation from 'react-native-orientation';

const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();

function LogBook() {
  return (
    <Tab.Navigator
      activeColor="white"
      inactiveColor="black"
      barStyle={{backgroundColor: '#7eb9db', fontSize: 10}}>
      <Tab.Screen
        name="Scale"
        component={LogBookScale}
        options={{
          tabBarLabel: 'Scale',
          tabBarIcon: ({color, size}) => (
            <Image
              style={{height: 20, width: 30}}
              source={require('./media/img/1piano.png')}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Listen Scale"
        component={LogBookListen}
        options={{
          tabBarLabel: 'Listen Skill',
          tabBarIcon: ({color, size}) => (
            <Image
              style={{height: 23, width: 30}}
              source={require('./media/img/listening.png')}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

function Settings() {
  return (
    <Tab.Navigator
      activeColor="white"
      inactiveColor="black"
      barStyle={{backgroundColor: '#7eb9db', fontSize: 10}}>
      <Tab.Screen
        name="Scale"
        component={SettingsScale}
        options={{
          tabBarLabel: 'Scale',
          tabBarIcon: ({color, size}) => (
            <Image
              style={{height: 20, width: 30}}
              source={require('./media/img/1piano.png')}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Listen Scale"
        component={SettingsListen}
        options={{
          tabBarLabel: 'Listen Skill',
          tabBarIcon: ({color, size}) => (
            <Image
              style={{height: 23, width: 30}}
              source={require('./media/img/listening.png')}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

class App extends React.PureComponent {
  componentDidMount() {
    Orientation.lockToPortrait();
  }
  componentDidUpdate() {
    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={Listen}
            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="4"
            component={MetronomeSkill}
            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="5"
            component={LogBook}
            options={{
              title: 'Records',
              headerTransparent: true,
              headerBackImage: () => (
                <Icon
                  name="chevron-left"
                  type="font-awesome"
                  size={26}
                  color="black"
                />
              ),
            }}
          />
          <Stack.Screen
            name="6"
            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;
