carhop__dynamiques-theme__PROD-DEV/resources/js/search-bar.ts

interface SearchBarOptions {
  searchBarSelector?: string;
  buttonSelector?: string;
}

export default class SearchBar {
  private searchBar: HTMLDivElement | null;
  private searchButtons: NodeListOf<HTMLButtonElement> | null;
  private searchInput: HTMLInputElement | null;
  private isOpen: boolean = false;
  private lastScrollY: number = 0;
  private activeButton: HTMLButtonElement | null = null;

  constructor(options: SearchBarOptions = {}) {
    this.searchBar = document.querySelector('#search-module') as HTMLDivElement;
    this.searchButtons = document.querySelectorAll(
      '.tools-container .search-button'
    ) as NodeListOf<HTMLButtonElement>; // Il y a 2 boutons de recherche (1 mobile; 1 desktop)
    this.searchInput = document.querySelector(
      '.search-module__search-form__input'
    ) as HTMLInputElement;

    this.init();
  }

  private init(): void {
    if (!this.searchBar || !this.searchButtons) return;

    // Initialiser l'état
    this.isOpen = this.searchBar.hasAttribute('opened');
    this.lastScrollY = window.scrollY;
    this.updateAriaHidden();

    // Ajouter les event listeners
    this.searchButtons.forEach((button) =>
      button.addEventListener('click', (event) => this.toggle(event))
    );
    this.searchBar.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
    document.addEventListener('keydown', this.handleKeyDown.bind(this));
    document.addEventListener('click', this.handleClickOutside.bind(this));
    window.addEventListener('scroll', this.handleScroll.bind(this));
  }

  private toggle(event: Event): void {
    if (!this.searchBar) return;

    // Stocker le bouton qui a été cliqué
    this.activeButton = event.currentTarget as HTMLButtonElement;

    this.isOpen = !this.isOpen;

    if (this.isOpen) {
      this.open();
    } else {
      this.close();
    }
  }

  public open(): void {
    if (!this.searchBar) return;

    this.searchBar.removeAttribute('closed');
    this.searchBar.setAttribute('opened', '');
    this.isOpen = true;

    // Focus automatique sur le champ de recherche après un petit délai pour laisser l'animation commencer
    setTimeout(() => {
      if (this.searchInput && this.isOpen) {
        this.searchInput.focus();
      }
    }, 100);
  }

  public close(): void {
    if (!this.searchBar) return;

    // Défocus l'input de recherche
    if (this.searchInput) {
      this.searchInput.blur();
    }

    this.searchBar.setAttribute('closing', '');
    this.searchBar.removeAttribute('opened');
    this.isOpen = false;

    // Écouter la fin de l'animation de fermeture (on attend la plus longue: translate-out 800ms)
    const handleAnimationEnd = (event: AnimationEvent) => {
      if (event.animationName === 'translate-out') {
        this.searchBar?.removeAttribute('closing');
        this.searchBar?.setAttribute('closed', '');
        this.searchBar?.removeEventListener('animationend', handleAnimationEnd);

        // Refocus sur le bouton qui avait ouvert la barre après la fermeture
        if (this.activeButton) {
          this.activeButton.focus();
        }
      }
    };

    this.searchBar.addEventListener('animationend', handleAnimationEnd);
  }

  private handleTransitionEnd(): void {
    this.updateAriaHidden();
  }

  private handleKeyDown(event: KeyboardEvent): void {
    if (event.key === 'Escape' && this.isOpen) {
      this.close();
    }
  }

  private handleScroll(): void {
    if (!this.isOpen) return;

    this.close();
  }

  private handleClickOutside(event: MouseEvent): void {
    if (!this.isOpen || !this.searchBar) return;

    const target = event.target as Node;

    // Vérifier si le clic est en dehors de la barre de recherche ET des boutons
    const isClickOutsideSearchBar = !this.searchBar.contains(target);
    const isClickOnButton = Array.from(this.searchButtons || []).some((button) =>
      button.contains(target)
    );

    if (isClickOutsideSearchBar && !isClickOnButton) {
      this.close();
    }
  }

  private updateAriaHidden(): void {
    if (!this.searchBar) return;

    if (this.searchBar.hasAttribute('closed') || this.searchBar.hasAttribute('closing')) {
      this.searchBar.setAttribute('aria-hidden', 'true');
    } else {
      this.searchBar.setAttribute('aria-hidden', 'false');
    }
  }

  public isSearchBarOpen(): boolean {
    return this.isOpen;
  }

  public destroy(): void {
    if (!this.searchBar || !this.searchButtons) return;

    // Note: Les event listeners anonymes ne peuvent pas être supprimés facilement
    // Dans un vrai projet, il faudrait stocker les références des fonctions
    this.searchBar.removeEventListener('transitionend', this.handleTransitionEnd.bind(this));
    document.removeEventListener('keydown', this.handleKeyDown.bind(this));
    document.removeEventListener('click', this.handleClickOutside.bind(this));
    window.removeEventListener('scroll', this.handleScroll.bind(this));
  }
}

// Fonction de compatibilité pour l'import existant
export function searchBarInit(): SearchBar {
  return new SearchBar();
}