/**
Full Search
================================================================================
This file's main focus in providing the Meilisearch features to the
search.html template.

For more information on Meilisearch, use:

- https://docs.meilisearch.com/
- https://github.com/meilisearch/instant-meilisearch

Meilisearch provides an 'InstantSearch' add-on (plug-in?) which
links the Meilisearch instance you have running to this website (link above for
more information).
*/

// 'server' variable defined in /templates/search.html

// -- constructed via Djula template. URL provided by data in this website's
// database. Value stored in back-end database and varies from localhost to
// prod. Which is why the database is stored in the database and passed to the
// view instead of trying to work it out in JavaScript -- the user can't change
// it here, only the developers can.

let apiKey = "";

if (location.hostname === "localhost"
    || location.hostname === "127.0.0.1") {
    apiKey= "meilisearch-beta-key";
} else {
    apiKey = "meilisearch-production-key-nera";
}

const search = instantsearch({
    indexName: "nera",
    searchClient: instantMeiliSearch(
	server,
	apiKey,
	{
	    primaryKey: 'id',
	}
    )
});

search.addWidgets([
    instantsearch.widgets.searchBox({
        container: "#searchbox",
	placeholder: "Search the archive here...",
    }),
    instantsearch.widgets.clearRefinements({
	container: "#clear-refinements"
    }),
    instantsearch.widgets.refinementList({
	container: "#year-list",
	attribute: "year"
    }),
    instantsearch.widgets.refinementList({
	container: "#month-list",
	attribute: "month"
    }),
    instantsearch.widgets.refinementList({
        container: "#keywords-list",
        attribute: "keywords"
    }),
    instantsearch.widgets.configure({
	hitsPerPage: 50,
	snippetEllipsisText: "...",
	attributesToSnippet: ["title:100"]
    }),
    instantsearch.widgets.hits({
        container: "#hits",
        templates: {
            item: `
<a class="fe-search-hit" href="{{server}}/{{relative-path}}">
<div>
<img src="{{server}}/{{thumbnail-path}}"/>
<div class="fe-search-hit-text">
<span class="fe-search-hit-title">
{{#helpers.highlight}}{"attribute": "title"}{{/helpers.highlight}}
</span>
<span class="fe-search-hit-secondary">
{{#helpers.highlight}}{"attribute": "month"}{{/helpers.highlight}}
{{#helpers.highlight}}{"attribute": "year"}{{/helpers.highlight}}
</span>
<span class="fe-search-hit-keywords">
{{keywords}}
</span>
</div>
</div>
</a>
          `
        }
    }),
    instantsearch.widgets.pagination({
	container: "#pagination"
    })
]);

search.start();