const Display = ({ equation, total }) => {
  return (
    <div class="display-container text-end px-3 mb-3 mx-1">
    <div id="display" >
      <div class="equation">{equation}</div>
    </div>
      <div class="total">{total}</div>
    </div>
  );
};

const Keypad = ({ onClick, digits}) => {
  return (
    <div id="keypad" class="keypad-container d-flex justify-content-center">
      <div class="numbers row m-0 col-12 d-flex justify-content-start gx-0">
        <div class=" row col-9 p-0 text-center gx-0">
          <div id="clear" class="col-4 button" onClick={()=>onClick('clear')}>
            <p>clr</p>
          </div>
          <div id="divide" class="col-4 button" onClick={()=>onClick('/')}>
            <p>/</p>
          </div>
          <div id="multiply" class="col-4 button" onClick={()=>onClick('*')}>
            <p>x</p>
          </div>

          {digits.map((digit) => {
            return (
              <div
                id={digit.id}
                class="col-4 button"
                value={digit.value}
                onClick={() => onClick(digit.value.toString())}
              >
                <p>{digit.value}</p>
              </div>
            );
          })}

          <div id="delete" class="col-4 button" onClick={()=>onClick('delete')}>
            <p>dlt</p>
          </div>
          <div id="zero" class="col-4 button" onClick={()=>onClick('0')}>
            <p>0</p>
          </div>
          <div id="decimal" class="col-4 button" onClick={()=>onClick('.')}>
            <p>.</p>
          </div>
        </div>
        <div class=" right row col-3 text-center gx-0 d-flex justify-content-center">
          <div id="subtract" class="col-11 button" onClick={()=>onClick('-')}>
            <p>-</p>
          </div>
          <div id="add" class="button-long col-11" onClick={()=>onClick('+')}>
            <p>+</p>
          </div>
          <div id="equals" class="button-long col-11" onClick={()=>onClick('=')}>
            <p>=</p>
          </div>
        </div>
      </div>
    </div>
  );
};

const App = () => {
  [displayMath, setDisplayMath] = React.useState('0');
  [displayTotal, setDisplayTotal]= React.useState('0');
  [answer, setAnswer] = React.useState("");
  [operators, setOperators] = React.useState(["+", "-", "/", "*", "="]);
  const multipleOps = /([*+/-]+[*+/]+)/g;
  const hasDecimal = /\.+(?!\d*[\+-/])/;
  const endsWithNegativeSign = /\d[x/+‑]{1}‑$/;
  
  
  [digits, setDigits] = React.useState([
    {
      id: "seven",
      value: 7
    },
    {
      id: "eight",
      value: 8
    },
    {
      id: "nine",
      value: 9
    },

    {
      id: "four",
      value: 4
    },
    {
      id: "five",
      value: 5
    },
    {
      id: "six",
      value: 6
    },
    {
      id: "one",
      value: 1
    },
    {
      id: "two",
      value: 2
    },
    {
      id: "three",
      value: 3
    }
  ]);

  
  
  React.useEffect(() => {

  document.addEventListener("keydown", (e) =>handleDisplay(e.key));
  
  return () => document.removeEventListener("keydown", handleDisplay);
  }, '0');
  
  
   handleDisplay = (value) => {
       if (
      operators.includes(value) && displayMath === "0" && value !== '-' || 
      value === '-' && operators.includes(displayMath.slice(-2,-1)) && operators.includes(displayMath.slice(-1))){
      return;
    }
     else if( operators.includes(value) && operators.includes(displayMath.slice(-1)) && value !== '-'){
       setDisplayMath(
       displayMath.slice(0,displayMath.length - 1) + value
       )
     }
     
    else if(value === 'clear') {
      setDisplayMath('0');
      setDisplayTotal('0');
    }
    
    else if(value  === 'delete' && displayMath.length > 1){
      setDisplayMath(displayMath.slice(0,displayMath.length - 1))
      }
     
      else if(value  === 'delete' && displayMath.length == 1){
        setDisplayMath('0');
      }
     
      else if(value == '.' && displayMath.slice(-1) === '.' || value == '.' && hasDecimal.test(displayMath)){
        return
     }
    
     
     else if(value === 'Enter' || value === '='){
     handleMath(displayMath)
     }
     
     else if(value === '0' && operators.includes(displayMath.slice(-1)) ){
       return
     }
    
    else if( !isNaN(value) || operators.includes(value) || value === '.'){
      if(displayMath === '0'){
        setDisplayMath(value)
      } else {
           setDisplayMath(displayMath + value);}
      }
      
  };
     function removeMultipleOps(match) {
    return  match.slice(-1);
  }
    function removeMultipleDots(match) {
    return  '';
  }
  
  
  
  handleMath = (equation) => {
    let cleanedEquation = equation.replace(multipleOps, removeMultipleOps);
   
      setDisplayTotal(
       math.evaluate(cleanedEquation)
      )
    
       setDisplayMath(
        math.evaluate(cleanedEquation).toString()
       )
     };
  
  return (
    <div class="calc-container my-2 mx-auto p-3">
      <Display equation={displayMath} total={displayTotal} />
      <Keypad digits={digits} onClick={handleDisplay} />
    </div>
  );
};

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