<main>
  <section class="grid grid-cols-4  my-20 text-4xl">
    <div class="screen col-span-4 h-20 text-right leading-[5rem] px-2 bg-black text-white"> 0 </div>

    <button class="button-clear col-span-2 bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      C
    </button>
    <button class="button-back bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black"> ←
    </button>
    <button class="button-divide h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-b-2 border-black">
      ÷
    </button>

    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      7
    </button>
    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      8 </button>
    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      9 </button>
    <button class="button-multiply h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-b-2 border-black">
      ×
    </button>

    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      4 </button>
    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      5 </button>
    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      6 </button>
    <button class="button-minus h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-b-2 border-black">
      - </button>

    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      1 </button>
    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      2 </button>
    <button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
      3 </button>
    <button class="button-plus h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-b-2 border-black"> + </button>

    <button class="button-digit  col-span-3 bg-gray-300 hover:bg-gray-400  border-solid border-e-2  border-black"> 0
    </button>
    <button class="button-equals  h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2  border-black">
      <span class="spinny-boi"> = </span>
    </button>
  </section>
</main>

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinny-boi {
  animation: spin 1.5s infinite linear;
  display: inline-block;
  font-size: 30px;
}

console.log("Starting script...");

const screen = document.querySelector(".screen");

let a = 0;
let b = 0;
let op = "+";

let opToggled = false;

function calculate(op) {
  switch (op) {
    case "+":
      a += b;
      break;
    case "-":
      a -= b;
      break;
    case "×":
      a *= b;
      break;
    case "÷":
      a /= b;
      break;
    default:
      return a;
  }
}

function output(x) {
  screen.innerText = x;
  return x;
}

/// special buttons

// for debugging, click on the screen
screen.addEventListener("click", function () {
  console.log(`a:${a} b:${b} op:${op}`);
});

const buttonClear = document.querySelector(".button-clear");
buttonClear.addEventListener("click", function () {
  screen.innerText = "0";
  a = 0;
  b = 0;
  opToggled = false;
});

const buttonBack = document.querySelector(".button-back");
buttonBack.addEventListener("click", function () {
  x = parseInt(screen.innerText);

  if (x < 10) {
    x = 0;
  } else {
    x = Math.floor(x / 10);
  }

  if (!opToggled) {
    a = x;
  } else {
    b = x;
  }

  output(x);
});

const buttonEquals = document.querySelector(".button-equals");
buttonEquals.addEventListener("click", function () {
  calculate(op);
  console.log(output(a));
  b = 0;
  opToggled = false;
});

/// operations

const buttonPlus = document.querySelector(".button-plus");
buttonPlus.addEventListener("click", function () {
  op = "+";
  opToggled = true;
  screen.innerText = " ";
});

const buttonMinus = document.querySelector(".button-minus");
buttonMinus.addEventListener("click", function () {
  op = "-";
  opToggled = true;
  screen.innerText = " ";
});

const buttonMultiply = document.querySelector(".button-multiply");
buttonMultiply.addEventListener("click", function () {
  op = "×";
  opToggled = true;
  screen.innerText = " ";
});

const buttonDivide = document.querySelector(".button-divide");
buttonDivide.addEventListener("click", function () {
  op = "÷";
  opToggled = true;
  screen.innerText = " ";
});

/// digits
const digitButtons = document.querySelectorAll(".button-digit");
digitButtons.forEach((button) => {
  button.addEventListener("click", function (event) {
    v = parseInt(event.target.innerText);
    out = v;
    if (!opToggled) {
      a = a * 10 + v;
      out = a;
    } else {
      b = b * 10 + v;
      out = b;
    }
    output(out);
  });
});