//import React from 'react';
//import ReactDOM from 'react-dom';
const DOT_CHAR = '.';

const OP_PERC = '%';
const OP_DIV = '/';
const OP_MUL = '*';
const OP_MINUS = '-';
const OP_PLUS = '+';
const OP_EQUAL = '=';

const INITIAL_STATE = { 
  displayValue: "0",
  firstOperand: null,
  operator: null,
  waitOperand: false,
  displayOperations: "Start your computation"
};

class DigitKey extends React.Component {
  render() {
    const {className, label} = this.props;
    return (
      <button 
        onClick={this.props.onClick}
        type="button" 
        className={`btn btn-default ${className}`}>{label}</button>
    );
  }
}

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = INITIAL_STATE;
  }
  
  inputDigit(digit) {
    const  { displayValue, waitOperand } = this.state;    
    const nextDisplayValue = (waitOperand || displayValue === "0") ? digit : (displayValue + digit);
    this.setState({ 
      displayValue: nextDisplayValue,
      waitOperand: false
    });
  }

  inputDot() {
    const  { displayValue, waitOperand } = this.state;    
    if (displayValue.indexOf(DOT_CHAR) === -1) {
      const nextDisplayValue = waitOperand ? "0" + DOT_CHAR : (displayValue + DOT_CHAR);
      this.setState({ 
        displayValue: nextDisplayValue,
        waitOperand: false
      });      
    }
  }
  
  clearDisplay() {
    this.setState(INITIAL_STATE);      
  }

  toggleSign() {
    const  { displayValue } = this.state;    
    
    let nextDisplayValue = displayValue;
    
    if (displayValue.charAt(0) === '-') {      
      nextDisplayValue = displayValue.substr(1);
    } else if (displayValue !== '0') {
      nextDisplayValue = '-' + displayValue;
    }
    
    this.setState({ 
      displayValue: nextDisplayValue
    });      
  }
  
  inputOperator(nextOperator) {
    const {
      displayValue,
      firstOperand,
      secondOperand,
      operator,
      waitOperand
    } = this.state;

    const execOperator = {
      [OP_DIV]: (firstOperand, secondOperand) => firstOperand / secondOperand,
      [OP_MUL]: (firstOperand, secondOperand) => firstOperand * secondOperand,
      [OP_MINUS]: (firstOperand, secondOperand) => firstOperand - secondOperand,
      [OP_PLUS]: (firstOperand, secondOperand) => firstOperand + secondOperand,
      [OP_PERC]: (firstOperand, secondOperand) => firstOperand * secondOperand / 100,
      [OP_EQUAL]: (firstOperand, secondOperand) => secondOperand,
    };
    
    let nextDisplayValue = displayValue;
    let currentOperand = parseFloat(displayValue);
    
    if (!operator) {
      // no previous operator was set
      // same display value which will be the first operand

    } else {
           
      // there was already an operator set
      // the current display value is the second operand
      // execute the operator, the result is the next display value
      // and it is also the future first operand of the next operator
      
      if (nextOperator === OP_PERC) {
        const percentage = execOperator[nextOperator](firstOperand, currentOperand);
        // it will be the second operand
        nextDisplayValue = String(percentage);
        // reset operation and first operand
        nextOperator = operator;
        currentOperand = firstOperand;
      } else {
        currentOperand = execOperator[operator](firstOperand, currentOperand);
        nextDisplayValue = String(currentOperand);
      }
    }

    this.setState({ 
      displayValue: nextDisplayValue,
      firstOperand: currentOperand,
      operator: nextOperator,
      waitOperand: true
    });
    
  }
  
  render() {
    const  { displayValue } = this.state;
    return (
<div className="container">

  <div className="row">
    <div className="col-sm-4">
    </div>
    <div className="col-sm-4">
      <div className="row">
        <div className="title"><h4>React Calculator</h4></div>
      </div>
      <div className="row">
        <div className="display">
        <input 
          type="text" 
          className="form-control" 
          disabled 
          placeholder={displayValue} 
          title={displayValue}
        />
        </div>
      </div>
      <div className="row">
        <DigitKey onClick={() => this.clearDisplay()} label="AC" className="btn-danger" />        
        <DigitKey onClick={() => this.toggleSign()} label="±" />
        <DigitKey onClick={() => this.inputOperator(OP_PERC)} label="%" />
        <DigitKey onClick={() => this.inputOperator(OP_DIV)} label="÷" />
      </div>
      <div className="row">
        <DigitKey onClick={() => this.inputDigit("7")} label="7" />
        <DigitKey onClick={() => this.inputDigit("8")} label="8" />
        <DigitKey onClick={() => this.inputDigit("9")} label="9" />
        <DigitKey onClick={() => this.inputOperator(OP_MUL)} label="×" />
      </div>
      <div className="row">
        <DigitKey onClick={() => this.inputDigit("4")} label="4" />
        <DigitKey onClick={() => this.inputDigit("5")} label="5" />
        <DigitKey onClick={() => this.inputDigit("6")} label="6" />
        <DigitKey onClick={() => this.inputOperator(OP_MINUS)} label="-" />
      </div>
      <div className="row">
        <DigitKey onClick={() => this.inputDigit("1")} label="1" />
        <DigitKey onClick={() => this.inputDigit("2")} label="2" />
        <DigitKey onClick={() => this.inputDigit("3")} label="3" />
        <DigitKey onClick={() => this.inputOperator(OP_PLUS)} className="btn-warning" label="+" />
      </div>
      <div className="row">
        <DigitKey onClick={() => this.inputDigit("0")} className="zero" label="0" />
        <DigitKey onClick={() => this.inputDot()} label="." />
        <DigitKey onClick={() => this.inputOperator(OP_EQUAL)} label="=" />
      </div>
    </div>
    <div className="col-sm-4">
    </div>
  </div>
  
</div>

    )
  }
}

ReactDOM.render(
    <Calculator/>, 
    document.getElementById('app')
);