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

class Home extends React.PureComponent {

  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: '10%'}}>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => {
                    this.props.navigation.navigate('2',{c: 0, w: 0, t: 0, cc : 1});
                  }}>
                  <Icon raised name="trophy" type="font-awesome" />
                  <Text>Piano</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => this.props.navigation.navigate('3')}>
                  <Icon raised name="clipboard" type="font-awesome" />
                  <Text>Records</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.menu}
                  onPress={() => this.props.navigation.navigate('4')}>
                  <Icon raised name="cogs" type="font-awesome" />
                  <Text>Settings</Text>
                </TouchableOpacity>
              </View>
            </ScrollView>
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  }
}

export default Home;

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