document.addEventListener("DOMContentLoaded", function(event) {
  // Constants declaration
  const navBar        = document.querySelector("#navbar");
  const searchBar     = document.querySelector("#search-bar");
  const searchView    = document.querySelector("#search-view");
  const searchInput   = searchBar.querySelector("#search-input");
  const btnToggle     = document.querySelector(".btn-toggle");


  // Shortcuts
  window.addEventListener("keydown", function(e) {
    // CTRL + K triggers the search feature
    if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
      e.preventDefault();
      e.stopPropagation();
      openSearchBar();
    }

    // Escape key
    else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
      closeSearchBar();
    }
  });

  searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);

  function openSearchBar(e) {
    navBar.classList.add("search-mode");
    searchBar.querySelector("#search-input").focus();
    searchView.classList.add("search-mode");
  }

  function closeSearchBar(e) {
    navBar.classList.remove("search-mode");
    searchView.classList.remove("search-mode");
  }
  
  function emptySearchBar(e) {
    searchInput.value = '';
    openSearchBar();
    searchInput.focus;
  }


  // Synchronizes the search input with the <ldp-form>s 
  searchInput.addEventListener("keyup", (e) => {
    searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
      el.value = searchInput.value;
    });
  });


  btnToggle.addEventListener('click', e => {
    navBar.classList.toggle('open');
    e.stopPropagation();
  });

  window.addEventListener('click', e=>{
    navBar.classList.remove('open');
  });
});