document.addEventListener('DOMContentLoaded', function () {
  const wrappers = document.querySelectorAll('.artx__search-wrapper');

  if (!wrappers.length) return;

  function closeAll() {
    wrappers.forEach(wrapper => wrapper.classList.remove('is-open'));

    if (
      document.activeElement &&
      document.activeElement.matches('.artx__search-wrapper input')
    ) {
      document.activeElement.blur();
    }
  }

  function openWrapper(wrapper) {
    closeAll();
    wrapper.classList.add('is-open');
  }

  function isInsideBox(element, event) {
    if (!element) return false;

    const rect = element.getBoundingClientRect();

    return (
      event.clientX >= rect.left &&
      event.clientX <= rect.right &&
      event.clientY >= rect.top &&
      event.clientY <= rect.bottom
    );
  }

  document.addEventListener('pointerdown', function (e) {
    const closeButton = e.target.closest('.artx__search-main-content-close');

    if (closeButton) {
      e.preventDefault();
      e.stopImmediatePropagation();

      setTimeout(function () {
        closeAll();
      }, 0);

      return;
    }

    let clickedInsideMainContent = false;

    wrappers.forEach(function (wrapper) {
      const mainContent = wrapper.querySelector('.artx__search-main-content');

      if (isInsideBox(mainContent, e)) {
        clickedInsideMainContent = true;
      }
    });

    if (clickedInsideMainContent) return;

    const clickedInput = e.target.closest('.artx__search-wrapper input');

    if (clickedInput) {
      const wrapper = clickedInput.closest('.artx__search-wrapper');
      openWrapper(wrapper);
      return;
    }

    closeAll();
  }, true);

  document.addEventListener('click', function (e) {
    const closeButton = e.target.closest('.artx__search-main-content-close');

    if (closeButton) {
      e.preventDefault();
      e.stopImmediatePropagation();
      closeAll();
    }
  }, true);

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll();
  });
});