addEventListener("DOMContentLoaded", () => {
 
  // Modal based full search experience
  const attach = (query = undefined) => {
    GleanWebSDK.attach(document.getElementById("search-box"), {
      domainsToOpenInCurrentTab: ['github.com'],
      onSearch: (query) => {
        document.getElementById("latest-search").innerText = query
      },
      query,
      enable3PCookieAccessRequest: true
    });
  }
  
  // Attach modal search to the search input box
  attach()
  
  // Example | Open NSR with a query pre-filled
  document.getElementById("prepopulate").addEventListener('click', (e) => attach("test query"))

  // Autocomplete only
  const autocomplete = GleanWebSDK.renderSearchBox(document.getElementById("autocomplete-container"), {
    onSearch: (query) => {
      document.getElementById("autocomplete-output").innerText = `Searched for ${query}`
    },
    searchBoxCustomizations: {
      border: '2px solid red',
      borderRadius: 5,
      boxShadow: '0px 0px 10px rgba(0, 255, 0, 0.5)',
      height: 40,
      horizontalMargin: 10,
      verticalMargin: 10
    },
    enable3PCookieAccessRequest: true
  });
  
  // Example | Externally focus on autocomplete when clicked
  document.getElementById('autocomplete-focus-button').addEventListener('click', () => autocomplete.focus())
  
  // Search results only
  const sb = document.getElementById("native-search-box")
  sb.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      GleanWebSDK.renderSearchResults( 
        document.getElementById("search-results"),
        {
          query: sb.value,
          onSearch: (query) => {
            console.log('ON SEARCH', query)
            document.getElementById("native-search-box").value = query
          },
          onDatasourceChange: (datasource) => {
            document.getElementById("datasource-label")
              .innerText = datasource || "All"
          },
          enable3PCookieAccessRequest: true
        }
      )
    }
  })
  
  // Sidebar search
  const ssb = document.getElementById("sidebar-search-box")
  ssb.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      const query = ssb.value
      GleanWebSDK.openSidebar({
        query,
        recommendationsUrl: query.startsWith('http') ? query : undefined,
        enable3PCookieAccessRequest: true
      })
    }
  })
  
  // Embedded Chat
  EmbeddedSearch.renderChat(document.getElementById('glean-app'), {
    enable3PCookieAccessRequest: true
  })
});