const numberList = [
  { id: "one", num: "1" },
  { id: "two", num: "2" },
  { id: "three", num: "3" },
  { id: "four", num: "4" },
  { id: "five", num: "5" },
  { id: "six", num: "6" },
  { id: "seven", num: "7" },
  { id: "eight", num: "8" },
  { id: "nine", num: "9" },
  { id: "decimal", num: "." }
];

const opperationList = [
  { op: "*", id: "multiply" },
  { id: "subtract", op: "-" },
  { id: "add", op: "+" },
  { id: "divide", op: "/" },
  { id: "equals", op: "=" }
];
import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
//Redux
const { render } = ReactDOM;
const { Component } = React;

//Action
const POWER = "POWER";
const OPPERATORADDED = "OPPERATORADDED";
const EVALUATED = "EVALUATED";
const DECIMAL = "DECIMAL";
const CLEARLOWERDISPLAY = "CLEARLOWERDISPLAY";
const CLEARUPPERDISPLAY = "CLEARUPPERDISPLAY";
const LOWERDISPLAY = "LOWERDISPLAY";
const UPPERDISPLAY = "UPPERDISPLAY";
//Action Creators

const clearLowerDisplay = (display) => {
  return {
    type: CLEARLOWERDISPLAY,
    display: display
  };
};

const addOpperator = (opperator) => {
  return {
    type: OPPERATORADDED,
    opperator: opperator
  };
};
const expEvaluated = (expression) => {
  return {
    type: EVALUATED,
    evaluated: false
  };
};
const clearUpperDisplay = (display) => {
  return {
    type: CLEARUPPERDISPLAY,
    display: display
  };
};

const updateLowerDisplay = (newNumber) => {
  return {
    type: LOWERDISPLAY,
    lowerDisplay: newNumber
  };
};
const updateUpperDisplay = (newNumber) => {
  return {
    type: UPPERDISPLAY,
    upperDisplay: newNumber
  };
};
const changePower = (currentState) => {
  return {
    type: POWER,
    power: currentState
  };
};

const addDecimal = (decimal) => {
  return {
    type: DECIMAL,
    decimal: decimal
  };
};
const innitialState = {
  power: false,
  lowerDisplay: 0,
  upperDisplay: 0,
  opperator: false,
  evaluated: false,
  decimal: false
};

const reducer = (state = innitialState, action) => {
  switch (action.type) {
    case POWER:
      return { ...state, power: !action.power };
    case EVALUATED:
      return { ...state, evaluated: !action.evaluated };
    case DECIMAL:
      return { ...state, decimal: !action.decimal };
    case CLEARLOWERDISPLAY:
      return { ...state, lowerDisplay: [] };
    case CLEARUPPERDISPLAY:
      return { ...state, upperDisplay: [] };
    case LOWERDISPLAY:
      return {
        ...state,
        lowerDisplay: [...state.lowerDisplay, action.lowerDisplay]
      };
    case UPPERDISPLAY:
      return {
        ...state,
        upperDisplay: [...state.upperDisplay, action.upperDisplay]
      };
    case OPPERATORADDED:
      return {
        ...state,
        opperator: action.opperator
      };
    default:
      return state;
  }
};
import {
  createStore,
  combineReducers,
  applyMiddleware
} from "https://cdn.skypack.dev/redux";
const store = createStore(reducer);

//React
class Display extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    let empty = <div></div>;
    let upperDisplay = this.props.power ? this.props.upperDisplay : empty;
    let lowerDisplay = this.props.power ? this.props.lowerDisplay : empty;

    return (
      <div class="center">
        <div id="display" class="upperDisplay">
          {upperDisplay}
        </div>
        <div id="display" class="lowerDisplay">
          {lowerDisplay}
        </div>
      </div>
    );
  }
}
class PowerButton extends React.Component {
  constructor(props) {
    super(props);
    this.handlePower = this.handlePower.bind(this);
  }
  handlePower(e) {
    this.props.changePower(this.props.power);
    this.props.clearLowerDisplay(this.props.op);
    this.props.clearUpperDisplay(this.props.op);
    this.props.updateUpperDisplay(0);
    this.props.updateLowerDisplay(0);
  }

  render() {
    return (
      <div class="power-button" onClick={this.handlePower}>
        <span class="material-icons-outlined">Power</span>
      </div>
    );
  }
}

class OpperationButton extends Component {
  constructor(props) {
    super(props);
    this.updateDisplay = this.updateDisplay.bind(this);
  }

  updateDisplay(event) {
    let display = document.getElementById(this.props.id);

    if (this.props.opperator === false) {
      this.props.addOpperator(true);
      this.props.updateUpperDisplay(this.props.op);
      this.props.clearLowerDisplay(this.props.op);
      this.props.updateLowerDisplay(this.props.op);
      if (display.id === "equals") {
        this.props.expEvaluated(true);

        const convertToString = this.props.upperDisplay.toString();
        var cleanedExpression = convertToString.replace(/,/g, "");

        var calculateExp = Function(
          '"use strict";return (' + cleanedExpression + ")"
        )();
        console.log(calculateExp);
        var cleanUpperDisplay = cleanedExpression.replace(/=/g, "");
        this.props.clearUpperDisplay();

        if (this.props.evaluated) {
          this.props.updateUpperDisplay(calculateExp);
          this.props.updateLowerDisplay(calculateExp);
          this.props.addOpperator(false);
        } else {
          this.props.updateUpperDisplay(cleanUpperDisplay);
          this.props.updateLowerDisplay(calculateExp);
          this.props.addOpperator(false);
        }
      }
    }
  }
  render() {
    return (
      <button
        className="opperationButton"
        id={this.props.id}
        op={this.props.op}
        onClick={(event) => {
          this.updateDisplay(event);
        }}
      >
        {this.props.op}
      </button>
    );
  }
}

class NumberButton extends Component {
  constructor(props) {
    super(props);
    this.updateDisplay = this.updateDisplay.bind(this);
  }

  updateDisplay(event) {
    let display = document.getElementById(this.props.num);

    let dot = this.props.lowerDisplay.filter((x) => x == ".").length;
    console.log(dot);

    if (dot > 1) {
      this.props.clearLowerDisplay();
      this.props.upperDisplay.pop();
    } else {
      this.props.updateUpperDisplay(this.props.num);
      this.props.updateLowerDisplay(this.props.num);
      this.props.addOpperator(false);
    }
  }
  render() {
    return (
      <button
        id={this.props.id}
        num={this.props.num}
        onClick={(event) => {
          this.updateDisplay(event);
        }}
      >
        {this.props.num}
      </button>
    );
  }
}

class NumberButtonGrid extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    let NumberButtonGrid = numberList.map((number) => {
      return <NumberButton id={number.id} num={number.num} />;
    });

    let PowerOff = <div></div>;
    const Display = this.props.power ? NumberButtonGrid : PowerOff;
    //Return a grid containing all the buttons
    return (
      <div class="center number-grid">
        {Display}
        <button id="zero">0</button>
      </div>
    );
  }
}

class OpperationButtonGrid extends Component {
  constructor(props) {
    super(props);
    this.clearDisplay = this.clearDisplay.bind(this);
  }
  clearDisplay(event) {
    this.props.clearLowerDisplay("0");
    this.props.clearUpperDisplay("0");
    this.props.expEvaluated(false);
    this.props.updateUpperDisplay("0");
    this.props.updateLowerDisplay("0");
  }
  render() {
    let OpperationButtonGrid = opperationList.map((opperation) => {
      return <OpperationButton op={opperation.op} id={opperation.id} />;
    });

    let PowerOff = <div></div>;
    const Display = this.props.power ? OpperationButtonGrid : PowerOff;
    //Return a grid containing all the buttons
    return (
      <div class="center number-grid">
        {Display}
        <button
          onClick={(event) => {
            this.clearDisplay(event);
          }}
          id="clear"
        >
          Clear
        </button>
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const isOn = (
      <div class="outer-grid">
        <br />
        <Display />
        <br />
        <OpperationButtonGrid />
        <NumberButtonGrid />
        <div class="controls"></div>
      </div>
    );

    const isOff = (
      <div>
        <br />
        To Use, Click On The Power Button
      </div>
    );

    const powerState = this.props.power ? isOn : isOff;
    return (
      <div class=" app center">
        <div id="display">
          <PowerButton />

          <br />
          <label>React & Redux Calculator</label>

          {powerState}
        </div>
      </div>
    );
  }
}

//React-Redux
const mapStateToProps = (state) => {
  return {
    power: state.power,
    lowerDisplay: state.lowerDisplay,
    upperDisplay: state.upperDisplay,
    opperator: state.opperator,
    evaluated: state.evaluated,
    decimal: state.decimal
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    addDecimal: (decimal) => {
      dispatch(addDecimal(decimal));
    },
    expEvaluated: (expression) => {
      dispatch(expEvaluated(expression));
    },
    addOpperator: (opperator) => {
      dispatch(addOpperator(opperator));
    },
    clearLowerDisplay: (currentDisplay) => {
      dispatch(clearLowerDisplay(currentDisplay));
    },
    clearUpperDisplay: (currentDisplay) => {
      dispatch(clearUpperDisplay(currentDisplay));
    },
    changePower: (currentState) => {
      dispatch(changePower(currentState));
    },
    updateLowerDisplay: (newNumber) => {
      dispatch(updateLowerDisplay(newNumber));
    },
    updateUpperDisplay: (contents) => {
      dispatch(updateUpperDisplay(contents));
    }
  };
};
import { Provider, connect } from "https://cdn.skypack.dev/react-redux";
const Container = connect(mapStateToProps, mapDispatchToProps)(App);

PowerButton = connect(mapStateToProps, mapDispatchToProps)(PowerButton);

NumberButtonGrid = connect(
  mapStateToProps,
  mapDispatchToProps
)(NumberButtonGrid);

NumberButton = connect(mapStateToProps, mapDispatchToProps)(NumberButton);

OpperationButtonGrid = connect(
  mapStateToProps,
  mapDispatchToProps
)(OpperationButtonGrid);

OpperationButton = connect(
  mapStateToProps,
  mapDispatchToProps
)(OpperationButton);

Display = connect(mapStateToProps, mapDispatchToProps)(Display);

//ReactDOM render of components
render(
  <Provider store={store}>
    <Container />
  </Provider>,
  document.getElementById("App")
);