<div id="root"></div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

$orange:       hsl(14,  100%, 53%) !default
$yellow:       hsl(48,  100%, 67%) !default
$green:        hsl(141, 71%,  48%) !default
$turquoise:    hsl(171, 100%, 41%) !default
$blue:         hsl(217, 71%,  53%) !default
$purple:       hsl(271, 100%, 71%) !default
$red:          hsl(348, 100%, 61%) !default

$primary: $red !default


h1
  font-size: 3rem
  
h2
  font-size: 2rem

.div-background 
  background-color: orange
  
.drum-bg 
  background-color: turquoise
  
.editor
  margin: 20px
  padding: 20px

.previewer
  margin: 20px
  padding: 20px
  background-color: white
  

// using https://hackernoon.com/create-a-simple-calculator-app-in-react-1ec6a7bbe09d for inspiration
// currently stuck with everything

var operators = ['+', '-', '*', '/', '.']

class App extends React.Component {
    // initiate state to be an array of operations, i.e [2, +, 4]
    constructor(props) {
      super(props);
      this.state = {
        operations: []
      };
    }
  
  calculateOperations = () => {
    let result = this.state.operations.join('')
    console.log(result)
    if (result) {
      result = eval(result)
      
      result = String(result)
      this.setState({
        operations: [result],
      })
    }
    
  }
  
  checkLast(value) {
    var lastChar = this.state.operations[this.state.operations.length - 1];
    console.log(value)
    for (var i = 0; i < operators.length; i++) {
      if (operators[i] == lastChar && value == lastChar) {
        this.state.operations.splice[this.state.operations.length]
        // this.state.operations.pop()
        console.log("removed: " + this.state.operations.pop())
      }
    }

  }
  
  handleClick = e => {
    const value = e.target.getAttribute('data-value')
    
    switch(value) {
      case "clear":
        this.setState({ operations: [] });
        break;
      case "equal":
        this.calculateOperations();
        break;
      default:
        this.checkLast(value);
        
        this.setState({
          operations: [...this.state.operations, value]
        })
        break;
     }
  }  
  
  render() {   
    return (

      <section className="section hero is-fullheight div-background">
        <div className="hero-body">
          <div className="container has-text-centered drum-bg"><br /><h1 className="title">Calculator</h1>
                <Buttons>
                  <Display data={this.state.operations} />
                <div id="calculator" className="columns">
                  
                  <div className="column">
                  <Button label="buttons that" value="" />
                  <Button onClick={this.handleClick} label="7" value="7" id="seven" />
                  <Button onClick={this.handleClick} label="4" value="4" id="four" />
                  <Button onClick={this.handleClick} label="1" value="1" id="one" />
                  <Button onClick={this.handleClick} label="Clear" value="clear" id="clear" />
                  
                  </div>
                  <div className="column">
                  <Button label="nobody ever" value="" />
                  <Button onClick={this.handleClick} label="8" value="8" id="eight" />
                  <Button onClick={this.handleClick} label="5" value="5" id="five" />
                  <Button onClick={this.handleClick} label="2" value="2" id="two" />
                  <Button onClick={this.handleClick} label="0" value="0" id="zero" />
                  </div>
                  <div className="column">
                  <Button label="uses" value="" />
                  <Button onClick={this.handleClick} label="9" value="9" id="nine" />
                  <Button onClick={this.handleClick} label="6" value="6" id="six" />
                  <Button onClick={this.handleClick} label="3" value="3" id="three" />
                  <Button onClick={this.handleClick} label="." value="." id="decimal" />
                  </div>
                  <div className="column">
                  <Button onClick={this.handleClick} label="/" value="/" id="divide" />
                  <Button onClick={this.handleClick} label="x" value="*" id="multiply" />
                  <Button onClick={this.handleClick} label="-" value="-" id="subtract" />
                  <Button onClick={this.handleClick} label="+" size="2" value="+" id="add" />
                  <Button onClick={this.handleClick} label="=" size="2" value="equal" id="equal" />
                  </div>
                  </div>
                </Buttons>
            <div><br /><br /><h3 className="subtitle">.. freeCodeCamp challenge to learn about rending components in an intelligent way, using input for calculations, create functions for checking last value & updating state correctly.</h3><br /></div>
              </div>
            </div>
      </section>

    )
  }
}

class Buttons extends React.Component{
  render(){
    return(
    <div>{this.props.children}</div>
    )
  }
}

class Button extends React.Component{
  render(){
    return(
    <div onClick={this.props.onClick} className="button is-rounded column" data-size={this.props.size} data-value={this.props.value} id={this.props.id}>{this.props.label}</div>
    )
  }
}

class Display extends React.Component{
  render(){
    const string = this.props.data.join('')
    return(
    <div className="Display" className="column" id="display">{string}</div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));