import { h, mount, table, badge } from "../ui.js";
import { get } from "../api.js";

export async function render(el, params, query) {
  const q = query.get("q") || "";
  const results = q.length >= 2 ? await get("/search", { q }) : [];
  const link = (r) => {
    if (r.kind === "zone") return "#/zones/" + r.id;
    if (r.kind === "record") return "#/zones/" + r.zone_id + "/records?q=" + encodeURIComponent(r.label.split(" ")[0]);
    if (r.kind === "acl") return "#/acls";
    return "#/";
  };
  mount(el, h("h1", null, "Search: ", h("span", { class: "mono" }, q)),
    h("div", { class: "panel" }, table([
      { label: "Kind", render: (r) => badge(r.kind) },
      { label: "Match", render: (r) => h("a", { href: link(r) }, r.label), tdClass: "data" },
      { label: "Where", render: (r) => h("span", { class: "muted" }, r.detail || "") },
    ], results, { empty: q.length < 2 ? "Type at least two characters." : "Nothing found." })));
}