import instantsearch from "instantsearch.js/es"

// import widgets individually
import { searchBox } from "instantsearch.js/es/widgets"
import { stats } from "instantsearch.js/es/widgets"
import { clearAll } from "instantsearch.js/es/widgets"
import { refinementList } from "instantsearch.js/es/widgets"
import { hits } from "instantsearch.js/es/widgets"
import { pagination } from "instantsearch.js/es/widgets"

// import templates
import hitTemplate from "./templates/hits-listed-content.html"
import noResultsTemplate from "./templates/no-results.html"
import queryResultsTemplate from "./templates/query-results.html"
import hitsToolsTemplate from "./templates/hits-tools.html"
document.addEventListener("turbolinks:load", function() {
  var search = instantsearch({
    appId: "EGKL8BPJHJ",
    apiKey: "fcbd6ff119bc3ddf14fa6115baa892ef",
    indexName: "all_content",
    urlSync: false,
    searchFunction: function(helper) {
      var searchResults = document.getElementById("results")

      if (helper.state.query === "") {
        // searchResults.hide()
        searchResults.classList.add("hidden")
        console.log("No Query")
        return
      }
      helper.search()
      // searchResults.show()
      console.log("query: " + helper.state.query)
      searchResults.classList.remove("hidden")
    },
  })

  search.addWidget(
    searchBox({
      container: "#searchbox",
      poweredBy: false,
      placeholder: "Search for Tools, Articles, and Showcase",
      magnifier: false,
      reset: false,
    })
  )

  search.addWidget(
    stats({
      container: "#stats",
      templates: {
        body: queryResultsTemplate,
      },
    })
  )

  search.addWidget(
    clearAll({
      container: "#clear-all",
      templates: {
        link: "Reset",
      },
      autoHideContainer: true,
      clearsQuery: true,
      cssClasses: {
        link:
          "inline-block px-3 py-1 no-underline rounded-t text-white text-sm bg-grey-darkest",
      },
    })
  )

  search.addWidget(
    refinementList({
      container: "#sections",
      attributeName: "section",
      operator: "and",
      limit: 10,
      collapsible: { collapsed: true },
      cssClasses: {
        item: "inline-block mr-3 my-2",
        list: "nav nav-list",
        count: "badge pull-right",
        active: "active",
      },
    })
  )

  search.addWidget(
    hits({
      hitsPerPage: 100,
      container: "#hits",
      collapsible: true,
      templates: {
        empty: noResultsTemplate,
        item: hitTemplate,
      },
    })
  )

  // initialize pagination
  search.addWidget(
    pagination({
      container: "#pagination",
      maxPages: 20,
      // default is to scroll to 'body', here we disable this behavior
      scrollTo: true,
    })
  )

  search.start()
  console.log("instantsearch Has been loaded")
  // document.addEventListener("DOMContentLoaded", function() {})
})

@@ -675,16 +675,126 @@
 s.html%22%0A
+%0Aif (PRODUCTION) %7B%0A  var documentLoad = %22turbolinks:load%22%0A%7D else %7B%0A  var documentLoad = %22DOMContentLoaded%22%0A%7D%0A%0A
 document
@@ -811,33 +811,28 @@
 istener(
-%22turbolinks:l
+documentL
 oad
-%22
 , functi
@@ -1201,16 +1201,24 @@
 st.add(%22
+results-
 hidden%22)
@@ -1413,16 +1413,24 @@
 remove(%22
+results-
 hidden%22)

Make InstantSearch place nicely with Turbolinks