import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
import Button from "./components/Button";

export default class App extends React.Component {
  state={
    operand:"0",
    memory:"0",
    display:"0",
    operator:"",
    newNumber:1
  }


   HandleButtonOperatorPressed = (value) => {

    operator=this.state.operator
    this.setState({newNumber:1})
    if(operator=="add"){
      console.log(value);
      let display=parseInt(this.state.display);
      let memory=parseInt(this.state.memory);
      let result=String(display+memory);
      this.setState({display:result});

    }else if(operator=="del"){
      console.log(value);
      //do somet
    }
    this.setState({operator:value})
}


  HandleButtonOperandPressed = (value) =>{
    if(this.state.newNumber){
      this.setState({display:"",newNumber:0})
    }
    if(this.state.display=="0"){
      if(value!="0")
        this.setState({display:value})
    }else{
      if(this.state.display.length<17){
        number=this.state.display+value;
        this.setState({display:number})
      }
    }
  }

    /*if(this.state.display==="0") numero="";
    if(this.state.after!=0){
        this.setState({after:0});
        numero="";
    }
    if(this.state.display.length<17){
      numero=numero+value;
      this.setState({display:numero});
    }*/


  /*Add = ()=>{

        let Operand= parseInt(this.state.display);
        let Memory=parseInt(this.state.memoria);
        let PartialResult=Operand + Memory;
        this.setState({display:String(PartialResult)})
        this.setState({operando:Operand});
        this.setState({memoria:String(PartialResult)});
        this.setState({operatore:"add"});
        this.setState({after:1});

  }

  Equal = () =>{
    if(this.state.operatore==="add"){
        let Operand;
        if(this.state.after==0){
            Operand= parseInt(this.state.display);
            this.setState({after:1});
        }
        else Operand=this.state.operando;
        let Memory=parseInt(this.state.memoria);
        let PartialResult=Operand + Memory;
        this.setState({display:String(PartialResult)});
        this.setState({memoria:String(PartialResult)});
    }else{
        this.setState({display:this.state.memoria});
    }
  }

  Del =() =>{
    if(this.state.operando.length>=1){
      this.setState({operando:this.state.operando.substring(0,this.state.operando.length-1)});
    }
  }*/

  render() {
    return (
      <View style={styles.container}>
      <View style={styles.display}>
        <Text style={{textAlign:"right", fontSize:30}}>{
            this.state.display
        }</Text>
      </View>
        <View style={styles.keyboard}>
            <View style={[styles.buttonrow]}>
              <Button value='<-' onPress={() =>this.HandleButtonOperatorPressed("del")}/>
            </View>
            <View style={styles.buttonrow}>
              <Button value='7' onPress={() => this.HandleButtonOperandPressed("7")}/>
              <Button value='8' onPress={() => this.HandleButtonOperandPressed("8")}/>
              <Button value='9' onPress={() => this.HandleButtonOperandPressed("9")}/>
              <Button value='='onPress={() =>this.HandleButtonOperatorPressed("equal")}/>
            </View>
            <View style={styles.buttonrow}>
              <Button value='4' onPress={() => this.HandleButtonOperandPressed("4")}/>
              <Button value='5' onPress={() => this.HandleButtonOperandPressed("5")}/>
              <Button value='6' onPress={() => this.HandleButtonOperandPressed("6")}/>
              <Button value='+' onPress={() => this.HandleButtonOperatorPressed("add")}/>
            </View>
            <View style={styles.buttonrow}>
              <Button value='1' onPress={() => this.HandleButtonOperandPressed("1")}/>
              <Button value='2' onPress={() => this.HandleButtonOperandPressed("2")}/>
              <Button value='3' onPress={() => this.HandleButtonOperandPressed("3")}/>
              <Button value='0' onPress={() => this.HandleButtonOperandPressed("0")}/>
            </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  buttonrow: {
    flexDirection:'row',
    justifyContent:"space-between",
  },
  keyboard:{
    height:180,
    width:190,
    justifyContent:"space-between",
  },
  display:{
    height:50,
    width:300,
    backgroundColor:"rgb(220,220,220)",
    borderRadius:5
  }
});