// Variables
const nums = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0];
const ops = ["/", "*", "-", "+"];
const ids = {
  7: "seven",
  8: "eight",
  9: "nine",
  4: "four",
  5: "five",
  6: "six",
  1: "one",
  2: "two",
  3: "three",
  0: "zero",
  "/": "divide",
  "*": "multiply",
  "-": "subtract",
  "+": "add"
};

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    lastPressed: undefined,
    display: "0",
    operation: undefined
  };

  handleClick = (e) => {
    const { display, operation, lastPressed } = this.state;
    const { innerText } = e.target;
    switch (innerText) {
      case "AC": {
        this.setState({
          display: "0"
        });
        break;
      }

      case ".": {
        const splitted = display.split(/[\+\-\*\/]/);
        const last = splitted.slice(-1)[0];

        if (!last.includes(".")) {
          this.setState({
            display: display + "."
          });
        }
        break;
      }

      case "=": {
        const answer = eval(display);
        this.setState({
          display: answer
        });
        break;
      }
      default: {
        let e = undefined;
        // check for other op
        if (ops.includes(innerText)) {
          if (ops.includes(lastPressed) && innerText !== "-") {
            // oh boii...
            const lastNumberIdx = display
              .split("")
              .reverse()
              .findIndex((char) => char !== " " && nums.includes(+char));
            e =
              display.slice(0, display.length - lastNumberIdx) +
              ` ${innerText} `;
          } else {
            e = `${display} ${innerText} `;
          }
        } else {
          e = display === "0" ? innerText : display + innerText;
        }

        this.setState({
          display: e
        });
      }
    }

    this.setState({
      lastPressed: innerText
    });
  };

  render() {
    const { display } = this.state;
    return (
      <div id="mainDiv">
        <div id="display">{display}</div>
        <div id="numPad">
          <div id="wrapperDiv">
            <div id="nums">
              <div id="acWrapper">
                <button
                  className="big-h light-grey ac"
                  onClick={this.handleClick}
                  id="clear"
                >
                  AC
                </button>
              </div>
              {nums.map((num) => (
                <button id={ids[num]} key={num} onClick={this.handleClick} className="numbers">
                  {num}
                </button>
              ))}

              <button onClick={this.handleClick} id="decimal" className="dot">
                .
              </button>
            </div>

            <div id="myOperators">
              {ops.map((op) => (
                <button id={ids[op]} key={op} onClick={this.handleClick} className="operators">
                  {op}
                </button>
              ))}

              <button onClick={this.handleClick} id="equals">
                =
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

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