yeet

// As we'll be calling the glasgow function constantly, we'll give it a short and special name:
import gg from "https://cdn.jsdelivr.net/npm/glasgow@0.9/glasgow.js";

/*
 * This is just an example of Glasgow in action. After you're done playing with it, you should
 * remove it -- it has nothing to do with the actual assignment.
 */
async function api(method, path, body) {
  let opts = { method };
  if (body != null) {
    opts.headers = { "Content-Type": "application/json" };
    opts.body = JSON.stringify(body);
  }
  let response = await fetch("/api" + path, opts);
  let data = await response.json();

  gg.refresh();
  if (data.error) throw new Error(data.error);
  return data;
}

let lists;
let editing;
let currentList;

class Main {
  async start() {
    lists = lists || (await api("GET", "/lists"));
    currentList = lists[0];
  }

  render() {
    if (!lists) return gg("main", gg("em", "Loading..."));
    if (currentList != null && lists.indexOf(currentList) < 0)
      currentList = null;
    let sortedLists = lists.sort((a, b) => (a.name < b.name ? -1 : +1));
    return gg(
      "main",
      gg("nav", this.getTab(), sortedLists.map(this.getTab.bind(this))),
      currentList
        ? gg(List, { key: currentList.id, list: currentList })
        : gg(AddList),
      editing && gg(EditModal, editing)
    );
  }
  getTab(list) {
    let name = list ? list.name : gg("i.material-icons", "note_add");
    return gg("a", name, {
      onclick: function() {
        currentList = list;
      },
      className: currentList === list ? "active" : null,
      key: list ? "~" + list.name : "+"
    });
  }
}

class AddList {
  render() {
    return gg(
      "div.modalBg",
      gg(
        "div.modal",
        gg("h2", "Add a list"),
        gg(
          "div.inputRow",
          gg("input", { type: "text", placeholder: "List name" })
        ),
        gg(
          "div.buttonRow",
          gg("button", "Cancel"),
          gg("button.primary", "Create")
        )
      )
    );
  }
}

class List {
  async start() {
    this.list.items =
      this.list.items || (await api("GET", `/lists/${this.list.id}/items`));
  }
  render() {
    if (!this.list.items)
      return gg("section.card", gg("em", `loading "${this.list.name}"...`));

    return [
      gg(
        "section.card.special",
        gg(
          ".inputRow",
          gg("i.material-icons", "delete", { onclick: this.deleteList })
        )
      ),
      this.getItems("high", "High priority"),
      this.getItems("medium", "Medium priority"),
      this.getItems("low", "Low priority")
    ];
  }
  getItems(priority, label) {
    let items = this.list.items
      .filter(item => item.priority === priority)
      .sort((a, b) => (a.name < b.name ? -1 : +1));
    if (!items.length) return;

    return gg(
      "section.priority",
      {
        key: priority,
        oncreate: gg.fadeIn,
        onremove: gg.fadeOut
      },
      gg("h4", label),
      items.map(item => {
        return gg(Item, { key: "~" + item.name, item, list: this.list });
      })
    );
  }
  deleteList() {
    lists.splice(lists.indexOf(this.list), 1);
    api("DELETE", `/lists/${this.list.id}`);
  }
  addItem() {
    editing = { list: this.list, item: { name: "", priority: "medium" } };
  }
}

class Item {
  render() {
    return gg(
      "section.card",
      { onclick: this.toggleChecked },
      gg(
        ".inputRow",
        gg(
          "i.material-icons",
          this.item.checked ? "check_box" : "check_box_outline_blank"
        ),
        gg("label", this.item.name),
        gg("i.material-icons", "edit", { onclick: this.edit })
      ),
      {
        oncreate: gg.fadeIn,
        onremove: gg.fadeOut
      }
    );
  }

  toggleChecked() {
    this.item.checked = !this.item.checked;
    api("PUT", `/lists/${this.list.id}/items/${this.item.id}`, {
      checked: this.item.checked
    });
  }

  edit() {
    editing = { item: this.item, list: this.list };
  }
}

class Cards {
  async start() {
    this.$divElements = [];
    if (currentList) {
      this.$divElements = await api("GET", `/lists/${currentList.id}/items`);
    }
  }
  render() {
    return gg(
      "div",
      this.$divElements.map(card =>
        gg(
          "section.card",
          gg(
            "div.inputRow",
            gg("i.material-icons", "check_box_outline_blank"),
            gg("label", card.name),
            gg("i.material-icons", "edit")
          )
        )
      )
    );
  }
}

// Show the main component
gg.mount(document.body, Main);