const Button = (props) => (
  <div className={props.btnClass} onClick={()=>props.onClick()}>{props.btnVal}</div>
)

class Row extends React.Component {
  renderBtn(val) {
    // decide btn class
    let btnClass = '';
    let redBtns = ['AC', 'CE'];
    if (val === '') {
      btnClass = 'invisible';
    } else if (redBtns.includes(val)) {
      btnClass = 'red';
    } else if (/\D|[.]/.test(val)) {
      btnClass = 'white';
    }
    return <Button btnClass={btnClass} 
                   btnVal={val} 
                   onClick={()=>this.props.onClick(val)}/>
  }
  render() {
    return (
      <div className="row">
        {this.props.btns.map(val=>this.renderBtn(val))}
      </div>
    )
  }
}

class Buttons extends React.Component {
  renderRow(btns) {
    return <Row btns={btns} onClick={(btnVal)=>this.props.onClick(btnVal)}/>
  }
  render() {
    let btnVals = [
      ['AC', 7, 8, 9, '/'],
      ['CE', 4, 5, 6, 'x'],
      ['', 1, 2, 3, '-'],
      ['', 0, '.', '=', '+']
    ];
    return (
      <div className="buttons">
        {btnVals.map(btns=>this.renderRow(btns))}
      </div>
    )
  }
}

const Screen = (props) => (
  <div className="entry-box">
    <div className="screen">
      <div className="entry">{props.entry}</div>
      <div className="history">{props.history}</div>
    </div>
  </div>
)

class Calculator extends React.Component {
  constructor() {
    super();
    this.state = {
      entry: '0',
      history: '0'
    };
  }
  handleBtn(btnVal) {
    let entry = this.state.entry;
    let history = this.state.history;
    switch (true) {
      case /\d|[.]/.test(btnVal):
        if (btnVal === '.' && entry.includes('.')){
          return;
        }
        if ((entry === '0' && history ==='0') || history.includes('=')) {
          // start a new calculation
          this.setState({entry: String(btnVal), history: String(btnVal)});
        } else if (entry === '0'){
          // trim any 0 in the beginning of a number
          if(history[history.length-1] === '0'){
            this.setState({entry: String(btnVal), history: history.slice(0, history.length-1) + btnVal});
          } else {
          // entry's 0 value is the result of 'CE'
            this.setState({entry: String(btnVal), history: history + btnVal});
          }
        } else if (/[+\-x\/]/.test(entry)){
          // a new number starts after an operator
          this.setState({entry: String(btnVal), history: history + btnVal});
        } else if (entry.length < 10) {
          // add new digit to the current number
          this.setState({entry: entry + btnVal, history: history + btnVal});
        } else {
          // a number cannot have more than 10 digits
          this.setState({entry: '0', history: 'Digit Limit Met'});
        }
        break;
      case /[+\-x\/]/.test(btnVal):
        if(history.includes('=')){
          // start new calculation with history result
          this.setState({entry: btnVal, history: entry + btnVal});
        } else if(/\d|[.]/.test(history[history.length-1])){
          // if history is ended with a number, add the operator
          this.setState({entry: btnVal, history: history + btnVal});
        } else {
          // if history is ended with a operator, change the operator
          this.setState({entry: btnVal, history: history.slice(0, history.length-1) + btnVal});
        }
        break;
      case btnVal=="=":
        if(history.includes('=')){
          return;
        }
        let evalHis = history.replace(/x/g, '*');
        let result = eval(evalHis);
        if(parseInt(result) !== result){
          result = result.toFixed(2);
        }
        if(String(result).length > 10){
          this.setState({entry: '0', history: 'Digit Limit Met'});
        } else {
          this.setState({entry: String(result), history: history + '=' + result});
        }
        break;
      case btnVal=='AC':
        this.setState({entry: '0', history: '0'});
        break;
      case btnVal=='CE':
        if((entry == '0' && (history == '0' || history == 'Digit Limit Met')) 
           || history.includes('=')){
          this.setState({entry: '0', history: '0'});
        } else if(/\d/.test(entry)){
          // current entry is a number
          if(history == entry || !/[+\-x\/]/.test(history)){
            this.setState({entry: '0', history: '0'});
          } else {
            let nums = history.match(/([0-9.]+)|([+\-x\/])/g);
            this.setState({entry: '0', history: nums.slice(0, nums.length-1).join('')});
          }
        } else {
          // current entry is an operator
          this.setState({entry: '0', history: history.slice(0, history.length - 1)});
        }
        break;
    }
  }
  render() {
    return (
      <div className="calculator">
        <div className="header">
          <div className="title">Naive Calculator</div>
          <div className="bar"></div>
        </div>
        <Screen entry={this.state.entry} history={this.state.history} />
        <Buttons onClick={(btnVal)=>this.handleBtn(btnVal)}/> 
      </div>
    )
  }
}

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