console.clear();
//action types
const ADD = "ADD";
const SUBTRACT = 'SUBTRACT';
const MULTIPLY = 'MULTIPLY';
const DIVIDE = 'DIVIDE';
const DECIMAL = 'DECIMAL';
const VALIDATE = 'VALIDATE';
const CLEAR = 'CLEAR'; 
const EVAL = 'EVAL';
const INPUT = 'INPUT';
let re = /[\+ \- \* \/ ]$/;

let defaultState ={
  input: 0,
  equation: '',
  result : 0,
  isResult: false
} 
const rootReducer = (state=defaultState, action)=>{
  switch(action.type){
    case INPUT : 
      
      return state = {...state, 
                      input: typeof(state.input)=== 'number' ? (state.input * 10 + action.num):state.input + action.num , 
                      equation: !state.isResult ? state.equation + action.num :(state.input * 10 + action.num).toString() , 
                      isResult: false  }
    case ADD:
      
      return state={...state, equation: state.isResult ? state.result + ' + ' : state.equation.match(re) !== null ? state.equation.slice(0, state.equation.length -2) + ' + ': state.equation + ' + ', input: 0, isResult: false};
    case SUBTRACT:
      
      return state={...state, equation: state.isResult ? state.result + ' - ' : state.equation.match(re) !== null ? state.equation.slice(0, state.equation.length -2) + ' - ':  state.equation + ' - ', input: 0, isResult: false};
    case MULTIPLY:
      
      return state={...state, equation: state.isResult ? state.result + ' * ' : state.equation.match(re) !== null ? state.equation.slice(0, state.equation.length -2) + ' * ': state.equation + ' * ', input: 0, isResult: false};
    case DIVIDE:
      
      return state={...state, equation: state.isResult ? state.result + ' / ' :
                    state.equation.match(re) !== null ? state.equation.slice(0, state.equation.length -2) + ' / ': state.equation + ' / ', input: 0, isResult: false};
    case DECIMAL :
      
      return state={...state, 
                    input: state.input.toString().includes('.') ? state.input : state.input + '.', 
                    equation : state.input.toString().includes('.') ? state.equation  : state.equation.toString() + '.'}
    case EVAL:
      
      return state={...state, 
                    result: eval(state.equation.match(re) !== null ? state.equation.slice(0, state.equation.length -2) :state.equation), 
                    equation: state.equation + ' = ' + eval(state.equation.match(re) !== null ? state.equation.slice(0, state.equation.length -2) :state.equation).toString(), input: 0, isResult : true};
    case CLEAR:
      
      return state={...state, input: 0, result: 0, equation: ''}
    default: 
      return state;
      
      
  }
}
const {createStore} = Redux;
// console.log(createStore);
const store = createStore(rootReducer);
// console.log(store.getState());


// action creator
const inputAction = (num)=>{
  return {
    type : INPUT,
    num
  }
};
const addAction = (num)=>{
  return {
    type: ADD,
    num
  }
};
const subtractAction = (num)=>{
  return {
    type: SUBTRACT,
  }
};
const multiplyAction = (num)=>{
  return {
    type: MULTIPLY,
  }
};
const divideAction = (num)=>{
  return {
    type: DIVIDE,
  }
};

const decimalAction = ()=>{
  return {
    type : DECIMAL
  }
}


const clearAction = ()=>{
  return {
    type: CLEAR
  }
}
const evalAction = ()=>{
  return {
    type: EVAL
  }
}


const mapStateToProps = ({result, input, equation, isResult})=>{
  return {
    result, 
    input, 
    equation,
    isResult
  }
}

const mapDispatchToProps = (dispatch)=>{
  return {
    getInput : (e)=>{
      dispatch(inputAction(parseInt(e.target.innerText, 10)));
    },
    add : ()=>{
      dispatch(addAction());
    },
    subtract : ()=>{
      dispatch(subtractAction());
    },
    multiply : ()=>{
      dispatch(multiplyAction());
    },
    divide : ()=>{
      dispatch(divideAction());
    },
    decimal : ()=>{
      dispatch(decimalAction())
    },
    evaluate : ()=>{
      dispatch(evalAction())
    },
    clear : ()=>{
      dispatch(clearAction());        
    }
  }
}



class Keypad extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div class='container'>
        <div id='zero' onClick={this.props.getInput}>0</div>
        <div id='one' onClick={this.props.getInput}>1</div>
        <div id='two' onClick={this.props.getInput}>2</div>
        <div id='three' onClick={this.props.getInput}>3</div>
        <div id='four' onClick={this.props.getInput}>4</div>
        <div id='five' onClick={this.props.getInput}>5</div>
        <div id='six' onClick={this.props.getInput}>6</div>
        <div id='seven' onClick={this.props.getInput}>7</div>
        <div id='eight' onClick={this.props.getInput}>8</div>
        <div id='nine' onClick={this.props.getInput}>9</div>
        <div id='decimal' onClick={this.props.decimal}>.</div>
        <div id='equals' onClick={this.props.evaluate}>=</div>
        <div id='clear' onClick={this.props.clear}>CE</div>
        <div id='add' onClick={this.props.add}>+</div>
        <div id='subtract' onClick={this.props.subtract}>-</div>
        <div id='multiply' onClick={this.props.multiply}>*</div>
        <div id='divide' onClick={this.props.divide}>/</div>
        <div id='expr'>{this.props.equation}</div>
        <div id = 'display'> {this.props.isResult ? this.props.result : this.props.input}</div>
      </div> 
    )
  }
}

class App extends React.Component{
  constructor(props){
    super(props);
  }
  
  render(){
    return(
      <div>
        <KeypadContainer />
      </div>
    )
  }
}


const {Provider, connect} = ReactRedux;

const KeypadContainer = connect(mapStateToProps , mapDispatchToProps)(Keypad);

ReactDOM.render(
  <Provider store={store}><App /></Provider>, 
  document.querySelector('#root'));