import React from 'react';
import { StyleSheet, Text,TextInput, View, Button,} from 'react-native';

export default class Nilai extends React.Component {

constructor(props) {
super(props)
this.state = {
Tugas1:0,
Tugas2:0,
NA:0,
Predikat:'',
};
}
render() {
return (
<View style={styles.containerMain}>
<View style={styles.boxAtas}>
<Text style={styles.text}>Siak</Text>
</View>


<View style={styles.boxTengah}>
<View style={styles.masuk}>
<Text style={styles.text2}>Tugas 1 : </Text>
<TextInput style = {styles.txtInput}
placeholder="Masukkan Nilai Tugas1"
onChangeText={
(Tugas1)=>this.setState({Tugas1})
}
keyboardType = 'numeric'
/>
</View>

<View style={styles.masuk}>
<Text style={styles.text2}>Tugas 2 :</Text>
<TextInput style = {styles.txtInput2}
placeholder="Masukkan Nilai Tugas2"
onChangeText={
(Tugas2)=>this.setState({Tugas2})
}
keyboardType = 'numeric'
/>

</View>

<View style={styles.vbutton}>
<Button
onPress ={
    () => {
        let nilaiTotal = 0.5 * this.state.Tugas1 + 0.5* this.state.Tugas2;
        this.setState({NA:nilaiTotal});

        if (nilaiTotal>50)
          this.setState({Predikat:'Lulus'});
        else {
          this.setState({Predikat:'Tidak Lulus'});
        }
    }
  }
title="Hitung"
accessibilityLabel="Klik untuk menghitung"
/>
</View>


</View>


<View style={styles.box3}>


<Text style={styles.text2}>Nilai Akhir : {this.state.NA} </Text>
<Text style={styles.text2}>Predikat : {this.state.Predikat}</Text>





</View>

{/* <View style={styles.footer}>
<Text style={styles.text}>Copyright Ferdo Kaban</Text>
</View> */}

</View>
);
}
}

const styles = StyleSheet.create({
containerMain: {
flex: 1,
flexDirection: 'column',

},
boxAtas:{
flex: 1,
backgroundColor: 'blue',
justifyContent: 'center',
alignItems: 'center',

},
txtInput: {
    height: 40,
    width: -50,
    backgroundColor:'white',
    margin:10,
    padding: 10
},
txtInput2: {
    height: 40,
    width: -50,
    backgroundColor:'white',
    padding: 10,
    margin:10,
},

boxTengah:{
flex: 2.5,
backgroundColor: '#61cdf4',
},

masuk:{
    flexDirection:'row',
    marginTop:10,
},

box3: {
flex: 3,
backgroundColor: 'powderblue',
justifyContent: 'center',
alignItems: 'center',
},

text: {
fontSize: 35,
color: 'white',
},

text2: {
fontSize: 20,
color: 'black',
fontWeight: 'bold',
margin:10,
padding: 10
},

vbutton:{
flex : 3,
justifyContent: 'space-around',
marginTop : 60,
}

});