import React from "https://esm.sh/react"
import ReactDOM from "https://esm.sh/react-dom"


class DecorativeElements extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <div id="mid-panel">
          <div id="solar-slot">
            <div id="solar-cell">l l l l</div>
          </div>
        </div>
      <div id="text-elements">Jay's Calculator<span id="digit">5WA6</span></div>
      </>
    )
  }
}

//This component renders the display, the text that occupies the display is passed as props.
class Display extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
  return (
    <>
      <div id="display-container">
      <div id="display-box">
      <div id="display">{this.props.displayText}</div>
      </div>
      </div>
    </>
  )
}
}

//This class renders the generic calculator button and functionality. It's modified using CSS for the buttons of different styles.


class CalculatorButton extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      
      <button className={this.props.classProp} id={this.props.propID} onClick={this.props.handleClick}>{this.props.buttonType}</button>
    )
  }
}


//This is the main body of the app. 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textOnDisplay: 'Change This',
      equation: [],
      numberInEquation: '0',
      result: ''
    }
    this.handleClick = this.handleClick.bind(this);
    this.createEquation = this.createEquation.bind(this);
    this.performCalculation = this.performCalculation.bind(this);
    this.simplifyEquation = this.simplifyEquation.bind(this);
  }

//Keeping the button's handleClick very simple. The parameter 'button' is passed into the method as a string or integer. That value will be assessed in this.createEquation.
handleClick(button) {
  this.createEquation(button);
}
  
//simplifyEquation goes through the inputted equation AFTER the equals button has been pressed. simplifyEquation's job is to remove any extraneous operators. In between each value in the equation, it determines how many operators there are. If there is one operator, that will be pushed into tempEquationArray. If there is more than one operator, it will push the most recent operator(s) into tempEquationArray. It will only push more than one operator into tempEquationArray if the oeprator closest to the next value is a '-' (negative) operator.
//simplifyEquation returns a string of the equation to be evaulated in this.performCalculation.
simplifyEquation(equationString) {
  let tempEquationArray = [];
  let countOperators = 0;
  for (let i = 0; i < equationString.length; i++) {
    if (Number.parseInt(equationString[i]) || equationString[i] === '.' || equationString[i] === '0') {
         
        if (countOperators === 1) {
          tempEquationArray.push(equationString[i-1]);
          countOperators = 0;
        } else if (countOperators > 1 && equationString[i - 1] === '-') {
          tempEquationArray.push(equationString[i - 2], equationString[i - 1]);
          countOperators = 0;
        } else if (countOperators >= 2){
          tempEquationArray.push(equationString[i-1]);
          console.log(tempEquationArray, "here")
          countOperators = 0;
        }
        if (Number.parseInt(equationString[i]) || equationString[i] === '.' || equationString[i] === '0') {
          tempEquationArray.push(equationString[i]);
        }
    } else {
      countOperators++;
    }
  }
  return tempEquationArray.join('');
}
  
//When a user presses 'equals', this.performCalculation is called. performCalculation assigns the value of a this.simplifyEquation call to simplifiedEquation and then evaluates that equation.
performCalculation(equationArray) {
  if (this.state.equation.length === 0) {
    this.state.setState({
      equation: [],
      numberInEquation: ''
    })
  }  else {
    let equationString = equationArray.join('')   
    let simplifiedEquation = this.simplifyEquation(equationString);
    console.log(simplifiedEquation)
    let result = eval(simplifiedEquation).toString();
    
    this.setState({
      result: result
    })
    return result;    
  }
}
  
//this.createEquation constructs an array of numbers from the buttons that a user presses. this.performCalculation is called when a used presses the 'equals' button.
createEquation(button) {
  if (Number.isInteger(parseInt(button))) {
        if (this.state.numberInEquation.length === 1 && this.state.numberInEquation ==='0') {
          this.setState({
            numberInEquation: button.toString()
          })   
        } else if (this.state.numberInEquation.length >= 1 || this.state.numberInEquation === '') {
          this.setState({
          numberInEquation: this.state.numberInEquation + button.toString()
          })
    }
  } else {
    
    if (button === 'clear') {
        return (
        this.setState((state, props) => ({
          equation: [],
          numberInEquation: '0',
          result: ''
        }))
        )
    }
    
     if (button === 'add') {
        let possibleInteger = Number.isInteger(parseInt(this.state.numberInEquation))
        let newEquation;
        if (possibleInteger) {
          newEquation = this.state.equation.concat(this.state.numberInEquation).concat('+')
        } else {
          newEquation = this.state.equation.concat('+');
        }

        return (
        this.setState((state, props) => ({
          equation: newEquation,
          numberInEquation: ''
        }))
        )
    }
    
     if (button === 'subtract') {
        let possibleInteger = Number.isInteger(parseInt(this.state.numberInEquation))
        let newEquation;
        if (possibleInteger) {
          newEquation = this.state.equation.concat(this.state.numberInEquation).concat('-')
        } else {
          newEquation = this.state.equation.concat('-');
        }

        return (
        this.setState((state, props) => ({
          equation: newEquation,
          numberInEquation: ''
        }))
        )
    }
    
     if (button === 'divide') {
        let possibleInteger = Number.isInteger(parseInt(this.state.numberInEquation))
        let newEquation;
        if (possibleInteger) {
          newEquation = this.state.equation.concat(this.state.numberInEquation).concat('/')
        } else {
          newEquation = this.state.equation.concat('/');
        }

        return (
        this.setState((state, props) => ({
          equation: newEquation,
          numberInEquation: ''
        }))
        )
    }
    
     if (button === 'decimal') {
        let newNumber = this.state.numberInEquation;
        if (newNumber.match(/[.]/g)) {
           return null;
        } else {
          if (newNumber === '') {
            newNumber = this.state.numberInEquation + '0.';
          } else {
            newNumber = this.state.numberInEquation + '.';
          }
        }
        return (
        this.setState((state, props) => ({
          numberInEquation: newNumber
        }))
        )
    }  
     if (button === 'multiply') {
        let possibleInteger = Number.isInteger(parseInt(this.state.numberInEquation))
        let newEquation;
        if (possibleInteger) {
          newEquation = this.state.equation.concat(this.state.numberInEquation).concat('*')
        } else {
          newEquation = this.state.equation.concat('*');
        }

        return (
        this.setState((state, props) => ({
          equation: newEquation,
          numberInEquation: ''
        }))
        )
    }
    
      if (button === 'equals') {
        let newEquation = this.state.equation.concat(this.state.numberInEquation);
        let newResult = [this.performCalculation(newEquation)];
        return (
        this.setState((state, props) => ({
          equation: newResult,
          numberInEquation: '',
        }))
        )
          return 0;
    }
  }
}
 

  render() {
    console.log(this.state)
    return (
      <div id="calculator-wrapper">
        <div id="calculator">
    <Display displayText={this.state.result.length > 0 ? this.state.result : this.state.numberInEquation}/>
    <DecorativeElements />
    <div id="calculator-btns">
          <CalculatorButton propID={"clear"} buttonType={"AC"} classProp={"wide-button ac"} handleClick={()=>{this.handleClick('clear')}}/>
          <CalculatorButton propID={"divide"} buttonType={"%"} classProp={"calc-button red-calc"} handleClick={()=>{this.handleClick('divide')}}/>
          <CalculatorButton propID={"multiply"}  buttonType={"X"} classProp={"calc-button red-calc"} handleClick={()=>{this.handleClick('multiply')}}/>
          <CalculatorButton propID={"seven"}  buttonType={"7"} classProp={"calc-button"} handleClick={()=>{this.handleClick(7)}}/>
          <CalculatorButton propID={"eight"}  buttonType={"8"} classProp={"calc-button"} handleClick={()=>{this.handleClick(8)}}/>
          <CalculatorButton propID={"nine"}  buttonType={"9"} classProp={"calc-button"} handleClick={()=>{this.handleClick(9)}}/>
          <CalculatorButton propID={"subtract"}  buttonType={"-"} classProp={"calc-button red-calc"} handleClick={()=>{this.handleClick('subtract')}}/>
          <CalculatorButton propID={"four"}  buttonType={"4"} classProp={"calc-button"} handleClick={()=>{this.handleClick(4)}}/>
          <CalculatorButton propID={"five"}  buttonType={"5"} classProp={"calc-button"} handleClick={()=>{this.handleClick(5)}}/>
          <CalculatorButton propID={"six"}  buttonType={"6"} classProp={"calc-button"} handleClick={()=>{this.handleClick(6)}}/>
          <CalculatorButton propID={"add"}  buttonType={"+"} classProp={"calc-button red-calc"} handleClick={()=>{this.handleClick('add')}}/>
          <CalculatorButton propID={"one"}  buttonType={"1"} classProp={"calc-button"} handleClick={()=>{this.handleClick(1)}}/>
          <CalculatorButton propID={"two"}  buttonType={"2"} classProp={"calc-button"} handleClick={()=>{this.handleClick(2)}}/>
          <CalculatorButton propID={"three"}  buttonType={"3"} classProp={"calc-button"} handleClick={()=>{this.handleClick(3)}}/>
          <CalculatorButton propID={"equals"}  buttonType={"="} classProp={"tall-button"} handleClick={()=>{this.handleClick('equals')}}/>
          <CalculatorButton propID={"zero"}  buttonType={"0"} classProp={"wide-button"} handleClick={()=>{this.handleClick(0)}}/>
          <CalculatorButton propID={"decimal"}  buttonType={"."} classProp={"black-calc calc-button"}  handleClick={()=>{this.handleClick('decimal')}}/>
          </div>
        </div>
      </div>
    )
  }
}

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