import * as visuals from "./visuals.js";

function get_json(url) {
  var request = new XMLHttpRequest();
  request.open("get", url, false);
  request.send(null);
  return JSON.parse(request.responseText);
}

function post_json(url, json) {
  var request = new XMLHttpRequest();
  request.open("post", url, false);
  request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  request.send(JSON.stringify(json));
  if (request.status != 200) return null;
  return JSON.parse(request.responseText);
}

class Backend {
  getConfig() {
    return new Map(
      Object.entries(get_json("http://localhost:3000/get_state/"))
    );
  }
  makeMove(source, target) {
    return post_json("http://localhost:3000/make_move/", [source, target]);
  }
  chooseMove(color) {
    return post_json("http://localhost:3000/choose_move/", color);
  }
  getAvailableMoves(position) {
    return post_json("http://localhost:3000/get_moves/", position);
  }
  reset() {
    return post_json("http://localhost:3000/reset/");
  }
}

class Chess {
  constructor() {
    this.backend = new Backend();
    this.canvas = new visuals.Canvas();
    this.autoplay = false;

    this.button = document.createElement("button");
    this.button.innerHTML = "Autoplay Off";
    this.button.onclick = () => {
      this.autoplay = !this.autoplay;
      this.button.innerHTML = ["Autoplay Off", "Autoplay On"][
        Number(this.autoplay)
      ];
    };
    document.body.appendChild(this.button);

    this.resetButton = document.createElement("button");
    this.resetButton.innerHTML = "Reset";
    this.resetButton.onclick = () => {
      this.backend.reset();
      this.updateState();
    };
    document.body.appendChild(this.resetButton);

    this.configVis = new visuals.ConfigVis(this.backend.getConfig());
    this.configVis.draw(this.canvas);
    this.activeSquares = new visuals.ActiveSquares();
    this.moveSource = null;
    this.canMoveTo = [];
    document.onclick = (ev) => this.click(ev);
  }
  updateState() {
    let config = this.backend.getConfig();
    this.configVis.configuration = config;
    this.configVis.draw(this.canvas);
  }
  chooseMove() {
    let move = this.backend.chooseMove("black");
    if (move === null) return;
    this.backend.makeMove(...move);
    this.updateState();
  }
  initializeMove(source) {
    if (source === null) return;
    let validMoves = this.backend.getAvailableMoves(source);
    if (validMoves === null) return;
    this.activeSquares.selectSquare(this.canvas, source);
    this.activeSquares.setMoveSquares(this.canvas, validMoves);
    this.moveSource = source;
  }
  finalizeMove(target) {
    let success;
    if (target !== null) {
      success = this.backend.makeMove(this.moveSource, target) !== null;
    } else {
      success = false;
    }
    this.activeSquares.unselectSquare(this.canvas);
    this.activeSquares.unsetMoveSquares(this.canvas);
    this.updateState();
    this.moveSource = null;
    if (this.autoplay && success) {
      this.chooseMove();
    }
  }
  click(ev) {
    let rc = this.canvas.screenCoordsToRowCol(ev.clientX, ev.clientY);
    let position;
    if (rc === null) {
      position = null;
    } else {
      position = visuals.rowColToBoardIndex(...rc);
    }
    if (this.moveSource === null) {
      this.initializeMove(position);
    } else {
      this.finalizeMove(position);
    }
  }
}

new Chess();