// vim: set ts=2 sw=2 et tw=80:

const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('q');
const solr = "http://localhost:8983/solr/photo";
const q = document.querySelector("#q");
const templateHTML = document.querySelector("#document").innerHTML;
const docs = document.querySelector("#docs");
let foamtree = null;
let queryResult = null;

function buildCard(docData) {
  const emptyOr = s => s ? s : "";
  return templateHTML
    .replaceAll("{{ id }}", emptyOr(docData.id))
    .replaceAll("{{ title }}", emptyOr(docData.t_title))
    .replaceAll("{{ author }}", emptyOr(docData.t_author))
    .replaceAll("{{ description }}", emptyOr(docData.t_description))
    .replaceAll("{{ url }}", emptyOr(docData.img_url))
    .replaceAll("{{ site_url }}", "#");
}

function updateResults() {
	docs.innerHTML = queryResult.response.docs.map(d => {
	  return buildCard(d);
	}).reduce((a, b) => a + b, "");
}

async function buildQuery(e) {
  if (e) e.preventDefault();
  let docMap = {}

  let list = await fetch(solr + "/clustering?q=" + q.value);
  queryResult = await list.json();
  console.log(queryResult);

  updateResults();
  for (const e of queryResult.response.docs) {
    docMap[e.id] = e;
  }

  let clusters = queryResult.clusters.map(e => {
    return {
      label: e.labels[0],
      weight: e.score,
      groups: e.docs.map(id => {
        return { id, label: docMap[id].t_title };
      })
    };
  });

  if (foamtree === null) {
    foamtree = new CarrotSearchFoamTree({
      id: "visualization",
      layout: "squarified",
      groupLabelFontFamily: "Fira Sans",
      dataObject: {
        groups: clusters
      }
    });
  } else {
    foamtree.set({ dataObject: { groups: clusters }});
  }
};

if (query) {
  q.value = query;
  buildQuery().catch(console.error);
}

document.querySelector("#form").addEventListener("submit", buildQuery);