/* eslint-disable prettier/prettier */
import React from 'react';
import {
  SafeAreaView,
  ImageBackground,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  Image,
  BackHandler,
} from 'react-native';
//import {Icon} from 'react-native-elements';
import Orientation from 'react-native-orientation';
import styles from '../style/styleHome';

const exitApp = () => BackHandler.exitApp();

class Home extends React.PureComponent {
  async componentDidMount() {
    Orientation.lockToPortrait();
    BackHandler.addEventListener('hardwareBackPress', exitApp);
    // Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
  }

  componentWillUnmount() {
    Orientation.lockToPortrait();
    BackHandler.removeEventListener('hardwareBackPress', exitApp);
    // Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={require('../media/img/background.jpg')}
          style={styles.imagebackground}>
          <SafeAreaView>
            <ScrollView>
              <View style={styles.viewmenu}>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => {
                    this.props.navigation.navigate('2', {
                      c: 0,
                      w: 0,
                      t: 0,
                      cc: 1,
                    });
                  }}>
                  <Image
                    style={styles.image1}
                    source={require('../media/img/1piano.png')}
                  />
                  <Text style={styles.textmenu}>{'\n'}Scale</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => this.props.navigation.navigate('3')}>
                  <Image
                    style={styles.image2}
                    source={require('../media/img/listening.png')}
                  />
                  <Text style={styles.textmenu}>{'\n'}Listen Skill</Text>
                </TouchableOpacity>
                 <TouchableOpacity
                  style={styles.menu}
                  onPress={() => this.props.navigation.navigate('4')}>
                  <Image
                    style={styles.image2}
                    source={require('../media/img/metronome.png')}
                  />
                  <Text style={styles.textmenu}>{'\n'}Metronome</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => this.props.navigation.navigate('5')}>
                  <Image
                    style={styles.image2}
                    source={require('../media/img/records.png')}
                  />
                  <Text style={styles.textmenu}>{'\n'}Records</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => this.props.navigation.navigate('6')}>
                  <Image
                    style={styles.image3}
                    source={require('../media/img/settings.png')}
                  />
                  <Text style={styles.textmenu}>{'\n'}Settings</Text>
                </TouchableOpacity>
              </View>
            </ScrollView>
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  }
}

export default Home;
