import m from "https://esm.sh/mithril@2.3.8";

const API = "/api/v1/flashcards";

const Card = {
  view: function (v) {
    return m("li", v.attrs.card.id);
  },
};

const List = {
  oninit: async function (v) {
    v.state.cards = [];
    v.state.loading = true;
    const res = await fetch(API);
    const data = await res.json();
    v.state.cards = data.flashcards || [];
    v.state.loading = false;
    m.redraw();
  },
  view: function (v) {
    if (v.state.loading) {
      return m("h1", "loading");
    }
    const cards = m(
      ".cards-list",
      v.state.cards.map((c) => m(Card, { card: c })),
    );
    return m("ol", cards);
  },
};

const Detail = {
  oninit: async function (v) {
    v.state.flashcard = null;
    v.state.loading = true;
    v.state.flashcard = await findFlashCardByID(v.attrs.id);
    v.state.loading = false;
    m.redraw();
  },
  view: function (v) {
    if (v.state.loading)
      return m(".loading", m("i.nes-icon.nes-logo.is-small"));
    const e = v.state.entry;
    if (!e)
      return [
        m(
          ".back",
          m(
            "button.nes-btn",
            { onclick: () => m.route.set("/") },
            "\u2B05 Back",
          ),
        ),
        m("p", "Flashcard not found."),
      ];
    return [
      m(
        ".back",
        m(
          "button.nes-btn.is-warning",
          { onclick: () => m.route.set("/") },
          "\u2B05 Back",
        ),
      ),
      m(".detail-card.nes-container.is-rounded.with-title", [
        m("p.title", "#" + e.public_id + " v" + e.version),
        m(".field", [m(".field-label", "Note"), m("p", e.note)]),
        e.host
          ? m(".field", [m(".field-label", "Host"), m("p", e.host)])
          : null,
        e.user
          ? m(".field", [m(".field-label", "User"), m("p", e.user)])
          : null,
        e.context
          ? m(".field", [m(".field-label", "Context"), m("p", e.context)])
          : null,
        e.repos?.length
          ? m(".field", [
              m(".field-label", "Repos"),
              m(
                "div",
                e.repos.map((r) => m("span.nes-badge", m("span", r))),
              ),
            ])
          : null,
        e.tags?.length
          ? m(".field", [
              m(".field-label", "Tags"),
              m(
                "div",
                e.tags.map((t) => m("span.nes-badge", m("span", t))),
              ),
            ])
          : null,
        m(".field", [m(".field-label", "Created"), m("p", e.created)]),
        e.delete_timestamp
          ? m(".field", [
              m(".field-label", "Deleted"),
              m("p", e.delete_timestamp),
            ])
          : null,
      ]),
    ];
  },
};

m.route(document.getElementById("app"), "/", {
  "/": List,
  "/flashcard/:id": Detail,
});