const App = () => (
  <Calc />
)

class Calc extends React.Component {
  state = {
    display: '0',
    expression: [],
    currentNum: '0'
  }
  handleClickButton = e => {
    switch (e.target.id) {
      case 'clear':
        this.clearDisplay()
        break
      case 'divide':
        this.handleOperation('/')
        break
      case 'multiply':
        this.handleOperation('*')
        break
      case 'seven':
        this.handleNumber(7)
        break
      case 'eight':
        this.handleNumber(8)
        break
      case 'nine':
        this.handleNumber(9)
        break
      case 'subtract':
        this.handleOperation('-')
        break
      case 'four':
        this.handleNumber(4)
        break
      case 'five':
        this.handleNumber(5)
        break
      case 'six':
        this.handleNumber(6)
        break
      case 'add':
        this.handleOperation('+')
        break
      case 'one':
        this.handleNumber(1)
        break
      case 'two':
        this.handleNumber(2)
        break
      case 'three':
        this.handleNumber(3)
        break
      case 'equals':
        this.handleCalc()
        break
      case 'zero':
        this.handleNumber(0)
        break
      case 'decimal':
        this.handleDecimal()
        break
    }
  }
  clearDisplay = () => {
    this.setState(() => ({
      display: '0',
      expression: [],
      currentNum: '0',
      prevCalc: undefined
    }))
  }
  handleNumber = num => {
    const { prevCalc } = this.state
    if (prevCalc !== undefined) {
      this.setState(prevState => {
        return {
          display: num.toString(),
          expression: [],
          currentNum: num.toString(),
          prevCalc: undefined
        }
      })
    } else {
      this.setState(prevState => {
        const { display, expression, currentNum } = prevState
        return {
          display: display === '0' ? num.toString() : display + num.toString(),
          currentNum: currentNum === '0' ? num.toString() : currentNum + num.toString()
        }
      })
    }
  }
  handleDecimal = () => {
    this.setState(prevState => {
      const { display, expression, currentNum } = prevState
      const update = currentNum.indexOf('.') > -1
      return {
        display: update ? display : display + '.',
        currentNum: update ? currentNum : currentNum + '.',
        prevCalc: undefined
      }
    })
  }
  handleOperation = op => {
    const { expression, currentNum } = this.state
    if (currentNum === '') {
      this.setState(prevState => {
        const { expression, currentNum } = prevState
        let newExpression = [...expression]
        newExpression.splice(-1, 1)
        return {
          expression: newExpression.concat([op]),
          currentNum: '',
          prevCalc: undefined
        }
      })
      this.updateDisplay()
    } else {
      this.setState(prevState => {
        const { display, expression, currentNum } = prevState
        return {
          expression: expression.concat([currentNum]).concat([op]),
          currentNum: '',
          prevCalc: undefined
        }
      })
      this.updateDisplay()
    }
  }
  updateDisplay = () => {
    this.setState(prevState => {
      const { expression, currentNum } = prevState
      return {
        display: expression.join('')
      }
    })
  }
  handleCalc = () => {
    const { display } = this.state
    if (!/[*/+-]/.test(display.charAt(display.length - 1))) {
      this.setState(prevState => {
        const { display, expression, currentNum } = prevState
        return {
          display: eval(this.state.expression.join('') + this.state.currentNum).toString(),
          expression: [],
          currentNum: eval(this.state.expression.join('') + this.state.currentNum).toString(),
          prevCalc: eval(this.state.expression.join('') + this.state.currentNum).toString()
        }
      })
    }
  }
  render () {
    return (
      <div id='calc'>
        <Display display={this.state.display.substring(0, 23)} />
        <div id='buttons'>
          <button id='clear' style={{ gridColumnStart: 1, gridColumnEnd: 3 }} onClick={this.handleClickButton}>AC</button>
          <button id='divide' onClick={this.handleClickButton}>/</button>
          <button id='multiply' onClick={this.handleClickButton}>x</button>
          <button id='seven' className='primaryBtn' onClick={this.handleClickButton}>7</button>
          <button id='eight' className='primaryBtn' onClick={this.handleClickButton}>8</button>
          <button id='nine' className='primaryBtn' onClick={this.handleClickButton}>9</button>
          <button id='subtract' onClick={this.handleClickButton}>-</button>
          <button id='four' className='primaryBtn' onClick={this.handleClickButton}>4</button>
          <button id='five' className='primaryBtn' onClick={this.handleClickButton}>5</button>
          <button id='six' className='primaryBtn' onClick={this.handleClickButton}>6</button>
          <button id='add' onClick={this.handleClickButton}>+</button>
          <button id='one' className='primaryBtn' onClick={this.handleClickButton}>1</button>
          <button id='two' className='primaryBtn' onClick={this.handleClickButton}>2</button>
          <button id='three' className='primaryBtn' onClick={this.handleClickButton}>3</button>
          <button id='equals' style={{ gridColumnStart: 4, gridRowStart: 4, gridRowEnd: 6 }} onClick={this.handleClickButton}>=</button>
          <button id='zero' style={{ gridColumnStart: 1, gridColumnEnd: 3 }} onClick={this.handleClickButton}>0</button>
          <button id='decimal' style={{  }} onClick={this.handleClickButton}>.</button>
        </div>
      </div>
    )
  }
}

const Display = props => (
  <div id="display">{props.display}</div>
)

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