const Model = {
  createTask: function (description: string) {
    const task = document.createElement("div");
    task.appendChild(document.createTextNode(description));
    task.setAttribute("tabindex", "0");
    return task;
  },

  addTask: function (description: string) {
    document.body.appendChild(this.createTask(description)).focus();
  },

  moveCursor: function (offset: number) {
    var active = document.activeElement;
    if (offset === 1 && active) {
      active = active.nextElementSibling;
    }
    if (offset === -1 && active) {
      active = active.previousElementSibling;
    }
    if (active && active instanceof HTMLElement) active.focus();
  },
};

function handleKey(event: any) {
  if (event.target.tagName !== "INPUT") {
    if (event.key == "j") Model.moveCursor(1);
    if (event.key == "k") Model.moveCursor(-1);
    if (event.key == "c") {
      document.getElementById("taskName")!.focus();
      event.preventDefault();
    }
  }
}

function browserCreateTask(form: any) {
  if (form.taskName.value) {
    Model.addTask(form.taskName.value);
  }
  form.taskName.value = "";
  return false;
}

function browserInit() {
  document.body.addEventListener("keydown", handleKey, { capture: false });
}