import React from 'react';
import './App.css';
import KeyPadComponent from "./Components/KeyPadComponent";
import ResultComponent from "./Components/ResultComponent";



class App extends React.Component {
  constructor(){
    super();
    this.state = {
      result: ""
    }
  }

  onClick = button => {
    if(button === "=")
    {
      this.calculate()
    }

    if(button === "C") {
      this.reset()
    }

    else
    {
      this.setState({
        result: this.state.result + button
      })
    }

  }

  calculate = () => {
    var checkResult = ''
    if(this.state.result.includes('--')){
        checkResult = this.state.result.replace('--','+')
    }

    else {
        checkResult = this.state.result
    }

    try {
        this.setState({
            // eslint-disable-next-line
            result: (eval(checkResult) || "" ) + ""
        })
    } catch (e) {
        this.setState({
            result: "error"
        })

    }
};

  reset = () => {
    this.setState({
      result: ""
    })
  }

  render() {
    return (
      <div className="calc-body">
         <ResultComponent result={this.state.result}/>
         <KeyPadComponent onClick={this.onClick}/>
      </div>

    );
  }

}

export default App;