function check(id) {
  let checkbox = $("#task-" + id);
  checkbox.parents(".row").removeClass("error");

  let uri = "/v1/undo";
  if (checkbox.prop("checked")) {
    uri = "/v1/do";
    checkbox.parents("li").css("display", "none");
  }

  $.post(uri, {id: id}, function(data) {
    checkbox.prop("checked", data.task.done);
  })
    .fail(function(request) {
      if (checkbox.prop("checked")) {
        checkbox.prop("checked", false);
      } else {
        checkbox.prop("checked", true);
      }
      checkbox.parents(".row").addClass("error");
      checkbox.parents("li").css("display", "block");
  });
}

function get_template(id) {
  let template = $(id).html();
  return $(template);
}

function new_task() {
  let input = $("#new-task-input");
  let template;

  $.post("/v1/new", {content: input.val()}, function(data) {
    template = get_template("#task-template");
    let input = $("input:checkbox", template);
    input.prop("id", "task-" + data.task.id);
    input.change(function() {
      check(data.task.id);
    });
    input.after(" " + data.task.content);
  })
    .fail(function(request) {
      template = get_template("#error-template");
      $(".error-text", template).text("ERROR: " + request.responseJSON.errors.join(" "));
  })
    .always(function() {
      $("#new-task").before(template);
  });
  input.val("");
  return false; // prevent form submission
}

function new_api_key() {
  let template;
  $.get("/v1/key/new", function(data) {
    template = get_template("#api-key-template");
    $("code", template).text(data.api_key.key);
  })
    .fail(function(request) {
      template = get_template("#error-template");
      $(".error-text", template).text("ERROR: " + request.responseJSON.errors.join(" "));
  })
    .always(function() {
      $("#new-api-key").before(template);
  });
}

function delete_item(e) {
  e = $(e).parents("li");

  checkbox = $("input:checkbox", e);
  if (checkbox.length) {
    e.css("display", "hidden");
    let id = checkbox.prop("id");
    id = Number(id.slice(id.lastIndexOf("-") + 1, id.length));

    $.post("/v1/delete", {id: id}, function(data) {
      e.remove();
    })
      .fail(function(request) {
        e.children(".row").addClass("error");
        e.css("display", "block");
    });
    return;
  }

  code = $("code", e);
  if (code.length) {
    e.css("display", "hidden"); // hide it
    $.post("/v1/key/delete", {key: code.text()}, function(data) {
      e.remove();
    })
      .fail(function(request) {
        e.children(".row").addClass("error");
        code.css("color", "black"); // make key still readable
        e.css("display", "block");
    });
    return;
  }

  e.remove(); // for errors / others, client-side only
}