// TODO: improve a11y
import eventManager from '../../scripts/utils/eventManager';
export default class SearchForm {
  private rootElement: Document;

  constructor(rootElement: Document) {
    this.rootElement = rootElement;
    // Click event for toggle search form
    eventManager.live(
      '.js-toggle-search',
      (_event, clickedElement: HTMLElement) => {
        if (clickedElement) {
          const elementId = clickedElement.dataset.elementId;
          const element = this.rootElement.querySelector(
            '[data-element-id=' + elementId + ']:not(.js-toggle-search)',
          );

          if (!element) return false;

          // Set is-open to search input also
          const searchInputElement =
            element.closest('.o-input-search') ?? element;

          if (
            searchInputElement &&
            !searchInputElement.classList.contains('is-open')
          ) {
            searchInputElement.classList.add('is-open');

            if (clickedElement) {
              clickedElement.removeAttribute('onclick');
            }
            return false;
          }

          // Submit form
          const form = clickedElement.closest('form');

          if (form) {
            form.submit();

            return false;
          }
        }
      },
      { domElement: this.rootElement },
    );
  }
}