const assets = [
  "wk.webp",
  "wq.webp",
  "wr.png",
  "wb.webp",
  "wn.png",
  "wp.png",
  "bk.webp",
  "bq.png",
  "br.webp",
  "bb.webp",
  "bn.webp",
  "bp.png"
].map(x => "./assets/" + x);
let hoveringPiece = -1;

const bitboards = [
  16n,
  8n,
  129n,
  36n,
  66n,
  65280n,
  1152921504606846976n,
  576460752303423488n,
  9295429630892703744n,
  2594073385365405696n,
  4755801206503243776n,
  71776119061217280n,
];
const WHITE_KING   =  1;
const WHITE_QUEEN  =  2;
const WHITE_ROOK   =  3;
const WHITE_BISHOP =  4;
const WHITE_KNIGHT =  5;
const WHITE_PAWN   =  6;
const BLACK_KING   =  7;
const BLACK_QUEEN  =  8;
const BLACK_ROOK   =  9;
const BLACK_BISHOP = 10;
const BLACK_KNIGHT = 11;
const BLACK_PAWN   = 12;

let counting_bitboard = 0n;
function trackBitboard(i, selected, output) {
  const mask = 1n << BigInt(i);
  if (selected) {
    counting_bitboard |= mask;
  } else {
    counting_bitboard &= ~mask;
  }
  output.textContent = counting_bitboard.toString();
}

function checkForPiece(square, bitIndex, set = true) {
  for (let i = 0; i < bitboards.length; i++) {
    const mask = bitboards[i];
    if ((mask >> BigInt(bitIndex)) & 1n) {
      if (set) square.style.backgroundImage = `url(${assets[i]})`;
      return i;
    }
  }
  return null;
}

const selectedAction = trackBitboard;

window.onkeydown = (e) => {
  if (e.key == 'b') {
    console.log('Bitboards');
    console.log(`
position.bitboards[WHITE_KING] = ${bitboards[0].toString()}ULL;
position.bitboards[WHITE_QUEEN] = ${bitboards[1].toString()}ULL;
position.bitboards[WHITE_ROOK] = ${bitboards[2].toString()}ULL;
position.bitboards[WHITE_BISHOP] = ${bitboards[3].toString()}ULL;
position.bitboards[WHITE_KNIGHT] = ${bitboards[4].toString()}ULL;
position.bitboards[WHITE_PAWN] = ${bitboards[5].toString()}ULL;
position.bitboards[BLACK_KING] = ${bitboards[6].toString()}ULL;
position.bitboards[BLACK_QUEEN] = ${bitboards[7].toString()}ULL;
position.bitboards[BLACK_ROOK] = ${bitboards[8].toString()}ULL;
position.bitboards[BLACK_BISHOP] = ${bitboards[9].toString()}ULL;
position.bitboards[BLACK_KNIGHT] = ${bitboards[10].toString()}ULL;
position.bitboards[BLACK_PAWN] = ${bitboards[11].toString()}ULL;
      `)
  }
}

let validMoves = {};
let renderingMoves = [];

function updateRenderingMoves() {
  for (let i = 0; i < 64; i++) {
    const square = document.getElementById(`square-${i}`);
    if (i in renderingMoves) {
      square.children[0].classList.add("possible_move");
    } else {
      square.children[0].classList.remove("possible_move");
    }
  }
}

function addMoves(moves) {
  console.log(moves);
  validMoves = {};
  for (const [from, to] of moves) {
    if (validMoves[from] == undefined) validMoves[from] = []
    validMoves[from].push(to);
  }

  console.log(validMoves);
}

window.onload = () => {
  const socket = new WebSocket("ws://localhost:3456");
  socket.addEventListener("moves", (event) => addMoves(event.data));
  // socket.addEventListener("do_move", (event) => addMoves(event.data));

  const output = document.getElementById("output");
  const board = document.getElementById("board");
  for (let i = 0; i < 64; i++) {
    if (i % 8 == 0) {
      const label = document.createElement("div");
      label.classList.add("label");
      label.textContent = 8 - Math.round(i / 8);
      board.appendChild(label);
    }
    const square = document.createElement("div");
    square.classList.add("square");

    const renderingMoveMarker = document.createElement("div");
    renderingMoveMarker.classList.add("rendering_marker");
    square.appendChild(renderingMoveMarker);

    const shift = Math.floor(i / 8);
    square.classList.add((i + shift) % 2 ? "dark" : "light");
    const bitIndex = (i % 8) - 8 * Math.floor(i / 8) + 56;
    square.id = 'square-' + bitIndex.toString();
    checkForPiece(square, bitIndex);
    square.onclick = (e) => {
      if (e.ctrlKey) {
        const selected = square.classList.contains("selected");
        selectedAction(bitIndex, !selected, output);
        if (selected) {
          square.classList.remove("selected");
        } else {
          square.classList.add("selected");
        }
        return;
      }
      
      const piece = checkForPiece(square, bitIndex, false);
      if (
        (hoveringPiece < 0 && piece == null) ||
        (hoveringPiece >= 0 && piece != null)
      ) return;
      if (hoveringPiece < 0) {
        if (validMoves[bitIndex]) {
          renderingMoves = validMoves[bitIndex];
        }
        setHoverpiece(piece);
        square.style.backgroundImage = `none`;
        bitboards[piece] &= ~(1n << BigInt(bitIndex));
      } else {
        renderingMoves = [];
        square.style.backgroundImage = `url(${assets[hoveringPiece]})`;
        bitboards[hoveringPiece] |= (1n << BigInt(bitIndex));
        setHoverpiece(-1);
      }
      updateRenderingMoves();
    };
    board.appendChild(square);
  }
  const label = document.createElement("div");
  label.classList.add("horizontal_label");
  board.appendChild(label);
  for (let i = 0; i < 8; i++)  {
    const label = document.createElement("div");
    label.classList.add("horizontal_label");
    label.textContent = ["a", "b", "c", "d", "e", "f", "g", "h"][i];
    board.appendChild(label);
  }

  const mouse = document.getElementById("mouse");
  function setHoverpiece(i) {
    hoveringPiece = i;
    if (i < 0) {
      mouse.style.backgroundImage = `none`;
      return;
    }
    mouse.style.backgroundImage = `url(${assets[i]})`;
  }
  window.onmousemove = (e) => {
    const x = e.clientX;
    const y = e.clientY;
    mouse.style.left = x.toString() + 'px';
    mouse.style.top = y.toString() + 'px';
  }
}