// -- https://stackoverflow.com/a/46722645
// history.scrollRestoration = "manual";

// -- https://stackoverflow.com/a/39577640
function dataURLtoBlob(dataURL) {
  let array, binary, i, len;
  binary = atob(dataURL.split(",")[1]);
  array = [];
  i = 0;
  len = binary.length;
  while (i < len) {
    array.push(binary.charCodeAt(i));
    i++;
  }
  return new Blob([new Uint8Array(array)], {
    type: "image/png",
  });
}

var p = [];
var cols = 17;
var rows = 17;
var unit = 15; //px
var sw = 0.4; //px (strokewidth)
var img;

function setup() {
  var cnv = createCanvas(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
  cnv.parent("p5");
  img = createGraphics(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
  var but = createButton("clear!");
  but.attribute('type', 'button');
  but.class('but').parent("p5");
  // var sav = createButton("save!");
  // sav.class('sav').parent("p5");
  for (var i = 0; i < cols*rows; i++) {
    p.push(0);
  }
  but.mousePressed(function () {
    for (var i = 0; i < cols*rows; i++) {
      p.push(0);
    }
    img.clear();
  });
}

function draw() {
  //
  clear();

  //draw the grid
  stroke(255);
  strokeWeight(sw);
  for (var c = 0; c < cols; c++) {
    for (var r = 0; r < rows; r++) {
      noFill();
      rect(c*(unit+sw)+sw, r*(unit+sw)+sw, unit, unit);
    }
  }

  //
  image(img, 0, 0);

  //pointer
  fill(0, 255, 0);
  strokeWeight(0);

  //mouse way
  circle(mouseX, mouseY, 10);
  if (mouseIsPressed && mouseButton === LEFT) {
    //find slot under the pointer
    var mouseC = int(mouseX/(unit+sw));
    var mouseR = int(mouseY/(unit+sw));
    if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
    img.strokeWeight(0);
    img.fill(255);
    img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
  }

  //touch way
  if (touches.length > 0) {
    circle(touches[0].x, touches[0].y, 10);
    //find slot under the pointer
    var mouseC = int(touches[0].x/(unit+sw));
    var mouseR = int(touches[0].y/(unit+sw));
    if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
    img.strokeWeight(0);
    img.fill(255);
    img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
  }
}

function submitForm(event) {

  //TODO : first check if there is a drawing or not. (pixels)

  //
  var submit = document.getElementById("submit");
  submit.setAttribute('disabled', 'disabled');

  //
  var form = document.getElementById("form");
  var fd = new FormData(form);

  //
  var dataurl = img.elt.toDataURL();
  var pixels = dataURLtoBlob(dataurl);
  fd.append("pixels", pixels, "pixels.png");

  for(var pair of fd.entries()) {
    console.log(pair[0]+ ', '+ pair[1]);
  }

  //
  var request = new XMLHttpRequest();
  request.open("POST", "/entry");
  request.send(fd);

  //
  event.preventDefault();

  //
  alert('감사합니다! Thank you!');
  location.reload();
}

const form = document.getElementById('form');
form.addEventListener('submit', submitForm);