import React, { Component } from "react";
import
 { Text,StyleSheet , AsyncStorage , TouchableWithoutFeedback , Keyboard , ScrollView  } from "react-native";
import { Button , Input  } from 'react-native-elements';

const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress ={() => Keyboard.dismiss()}>
{children}
</TouchableWithoutFeedback>

);

export default class HomeScreen extends Component {
  static navigationOptions = {
    header: null
}
constructor(props){
  super(props)
  this.state = { varFinalResult: '', varFinalResult2: ''}
  this.persistData = this.persistData.bind(this);
  this.clearData = this.clearData.bind(this);
}

persistData(){
  var result = +this.state.a + +this.state.b;
  var varFinalResult = Number(result) - Number(this.state.c);
  var varFinalResult2 = Number(this.state.c) + Number(varFinalResult);
 /* let varFinalResult = this.state.varFinalResult
  let varFinalResult2 = this.state.varFinalResult2 */
  AsyncStorage.setItem('', varFinalResult).done();
  AsyncStorage.setItem('', varFinalResult2).done();
  this.setState({varFinalResult: varFinalResult, persistedvarFinalResult: varFinalResult ,
    varFinalResult2: varFinalResult2, persistedvarFinalResult2: varFinalResult2 })
}

check(){

  AsyncStorage.getItem('varFinalResult').then((varFinalResult) => {
      this.setState({varFinalResult: varFinalResult, persistedvarFinalResult: varFinalResult})
  })

  AsyncStorage.getItem('varFinalResult2').then((varFinalResult2) => {
    this.setState({varFinalResult2: varFinalResult2, persistedvarFinalResult2: varFinalResult2})
  })
}

clearData(){
  AsyncStorage.clear();
  this.setState({persistedvarFinalResult2: '', persistedvarFinalResult: ''})
}

componentWillMount(){
  this.check();
}

  cal = () => {
    var result = +this.state.a + +this.state.b;
    var varFinalResult = result - this.state.c;
    var varFinalResult2 = Number(this.state.c) + Number(varFinalResult);
    this.setState({varFinalResult: varFinalResult, persistedvarFinalResult: varFinalResult ,
      varFinalResult2: varFinalResult2, persistedvarFinalResult2: varFinalResult2
    });

  };



  render() {
    return (
      <DismissKeyboard>
      <ScrollView style={styles.homeContainer}>
        <Text style={styles.text1}>How often do you change your car oil?</Text>


        <Input
  placeholder='e.g every 10,000 km'
  onChangeText={a => this.setState({ a })}
  keyboardType ='numeric'

/>

        <Text style={styles.text1}>What was your car odometer on last changing ?</Text>

        <Input
  placeholder='e.g every 200,000 km'
  onChangeText={b => this.setState({ b })}
  keyboardType ='numeric'
/>

        <Text style={styles.text1}>What is your car odometer currently ?</Text>

        <Input
  placeholder='e.g every 207,000 km'
  onChangeText={c => this.setState({ c })}
  keyboardType ='numeric'

/>

        <Button  onPress={this.persistData} buttonStyle = {styles.calcButton} title="Calulate"/>






        <Text style={styles.text2}>Remining on your next oil chaning is : </Text>

        <Text style={styles.r1}>{this.state.persistedvarFinalResult} </Text>


        <Text  style={styles.text2} >You need to change the oil when odometer become  : </Text>

        <Text style={styles.r1}>{this.state.persistedvarFinalResult2}  </Text>

        <Button onPress={this.clearData} buttonStyle = {styles.clearButton} title="Clear Data"/>



      </ScrollView>
      </DismissKeyboard>
    );
  }
}




/*


export default class Home extends React.Component {
  render() {
    return (
      <View style={styles.homeContainer}>
        <Text style={styles.title}>Main </Text>
        <Text style={styles.txt}>Every How Much You Changing Your Oil?</Text>
        <TextInput
          style={{ height: 40 }}
          placeholder="Type here Your Oil!"
          keyboardType={"number-pad"}
          onChangeText={text => this.setState({ text })}
        />
      </View>
    );
  }
}


*/


const styles = StyleSheet.create({
  homeContainer: {
    flex: 1,
   backgroundColor: "#F5F5F5",
   // alignItems: "center",
    padding : 50
  },
  title: {
    fontSize: 32
  },
  button: {
    alignSelf: 'center',
    color: '#FFFFFF',
    alignItems: "center",
    fontSize: 50,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: '#3498db',
    paddingTop: 4,
    paddingBottom: 4,
    paddingRight: 25,
    paddingLeft: 25,
    marginTop: 10,
    marginBottom: 10,
    width: 180 ,




  },
  text1: {

    padding: 10 ,
    fontSize: 15,
    fontWeight : 'bold' ,
     color : '#0074D9',

  },
  text2: {
    padding: 10 ,
    fontSize: 15,
    fontWeight : 'bold' ,
     color : '#0074D9',

  },
  text3: {
    alignItems: 'center',
    backgroundColor: '#4682B4',
    padding: 10 ,
    color : '#FFFFFF',

  },

  r1: {
    alignSelf: 'center',
    alignItems: 'center',
    padding: 10 ,
    color : '#FF0000' ,
    fontSize: 30,
  },

  calcButton: {
    alignItems: 'center',
  /*  padding: 25 ,
    paddingTop: 4,
    paddingBottom: 4, */
    marginTop: 20,
    marginBottom: 10,
  },


  clearButton: {
    alignItems: 'center',
    backgroundColor: 'red',
  /*  padding: 25 ,
    paddingTop: 4,
    paddingBottom: 4, */
    marginTop: 30,
    marginBottom: 10,
  },


});