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

class Home extends React.PureComponent {

 async componentDidMount() {
    Orientation.lockToPortrait();
  }

  componentWillUnmount() {
    Orientation.lockToPortrait();
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={require('../img/background.jpg')}
          style={{
            width: '100%',
            height: '100%',
          }}>
          <SafeAreaView>
            <ScrollView>
              <View style={{marginTop: '5%', marginBottom: '5%'}}>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => {
                    this.props.navigation.navigate('2',{c: 0, w: 0, t: 0, cc : 1});
                  }}>
                  <Image style={{height:150, width:250}} source={require('../img/1piano.png')} />
                  <Text style={{fontSize:20}}>{'\n'}Piano</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => this.props.navigation.navigate('3')}>
                  <Icon size={150} name="clipboard" type="font-awesome" />
                  <Text style={{fontSize:20}}>{'\n'}Records</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => this.props.navigation.navigate('4')}>
                  <Image style={{height:150, width:150}} source={require('../img/settings.png')} />
                  <Text style={{fontSize:20}}>{'\n'}Settings</Text>
                </TouchableOpacity>
              </View>
            </ScrollView>
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  }
}

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  menu: {
    marginBottom: '2%',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '10%',
    marginLeft: '3%',
    marginRight: '3%',
    borderRadius: 10,
    borderWidth: 2,
    borderColor: 'white',
    backgroundColor: 'white',
  },
});
