import React from 'react';
import './Calculator.css';

export default class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      a: "",
      b: "",
      operator: "ADD"
    }
  }
  
  calcResult({a, operator, b}) {
    a = parseFloat(a);
    b = parseFloat(b);
    if(isNaN(a) || isNaN(b) || !operator) {
       return "";
    }
    switch(operator) {
      case "ADD":
        return a + b;
      case "SUBTRACT":
        return a - b;
      case "MULTIPLY":
        return a * b;
      case "DIVIDE":
        return a / b;
    }
    return "";
  }
  
  render() {
    return <div className="card mt-3"><div className="card-body">
      <p>This interviewer requested that I make a component that allowed a user
        to input two numbers and select an operator and get a result.</p>
      <input className="calc-number-input" onChange={e => this.setState({a: e.target.value})} />
      <select className="calc-operator-input" onChange={e => this.setState({operator: e.target.value})}>
        <option value="ADD">{String.fromCharCode(0x2B)}</option>
        <option value="SUBTRACT">{String.fromCharCode(0x2D)}</option>
        <option value="MULTIPLY">{String.fromCharCode(0xD7)}</option>
        <option value="DIVIDE">{String.fromCharCode(0xF7)}</option>
      </select>
      <input className="calc-number-input" onChange={e => this.setState({b: e.target.value})} />
      = <span className="calc-answer">{this.calcResult(this.state)}</span>
    </div></div>;
   }
}