const NATIVE_SEARCH_SELECTOR = 'input[type="search"][placeholder="Search..."]';
const HIDDEN_CLASS = "nv3-native-search-hidden";

function installStyle() {
  if (document.getElementById("nv3-hide-native-search-style")) return;

  const style = document.createElement("style");
  style.id = "nv3-hide-native-search-style";
  style.textContent = `
    .${HIDDEN_CLASS} {
      display: none !important;
    }
  `;
  document.head.appendChild(style);
}

function clearBoundSearchValue(input) {
  if (!input.value) return;

  input.value = "";
  input.dispatchEvent(new Event("input", { bubbles: true }));
  input.dispatchEvent(new Event("change", { bubbles: true }));
}

function hideNativeSearchInput(input) {
  clearBoundSearchValue(input);
  input.setAttribute("aria-hidden", "true");
  input.setAttribute("tabindex", "-1");
  input.classList.add(HIDDEN_CLASS);

  let container = input.parentElement;
  for (let depth = 0; container && depth < 4; depth += 1) {
    if (container.classList.contains("relative") && container.classList.contains("w-full")) {
      container.classList.add(HIDDEN_CLASS);
      container.setAttribute("aria-hidden", "true");
      return;
    }
    container = container.parentElement;
  }
}

function hideNativeSearchInputs() {
  document.querySelectorAll(NATIVE_SEARCH_SELECTOR).forEach(hideNativeSearchInput);
}

installStyle();
hideNativeSearchInputs();

const observer = new MutationObserver(() => {
  window.requestAnimationFrame(hideNativeSearchInputs);
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
});