// Custom JS to toggle the search form const FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR = [

'#gsc-i-id1',
'#gs_st50 .gsst_a',
'.gsc-search-button .gsc-search-button.gsc-search-button-v2'

]; // Elements that Google Custom Search builds into the page const OPEN_SEARCH_BUTTON_ID = 'openSearchButton'; const OPEN_SEARCH_BUTTON_CLASS = 'header-global__search-icon'; const CLOSE_SEARCH_BUTTON_ID = 'closeSearchButton'; const CLOSE_SEARCH_BUTTON_CLASS = 'header-global__close-icon'; const SEARCH_INPUT_ID = 'gsc-i-id1'; // An element that Google Custom Search builds into the page const HEADER_GLOBAL_NAV_ID = 'headerGlobalNavbar'; const SEARCH_COLLAPSE_ID = 'searchCollapse';

function setElementAttribute(selector, attr, val) {

const el = document.querySelector(selector);

el.setAttribute(attr, val);

}

function toggleButtonAttributes(button, removeButtonOption, buttonClass) {

if ( removeButtonOption ) {
  button.classList.add(buttonClass + '--hidden');
  button.setAttribute('aria-hidden', 'true');
  button.setAttribute('tabindex', '-1');
} else {
  button.classList.remove(buttonClass + '--hidden');
  button.setAttribute('aria-hidden', 'false');
  button.setAttribute('tabindex', '0');
}

}

function handleSearchToggle(searchButtonWasClicked) {

const searchButtonEl = document.getElementById(OPEN_SEARCH_BUTTON_ID);
const closeButtonEl = document.getElementById(CLOSE_SEARCH_BUTTON_ID);
const searchInputField = document.getElementById(SEARCH_INPUT_ID);
let len = FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR.length;

if ( searchButtonWasClicked ) {
  toggleButtonAttributes(searchButtonEl, true, OPEN_SEARCH_BUTTON_CLASS);
  toggleButtonAttributes(closeButtonEl, false, CLOSE_SEARCH_BUTTON_CLASS);
  for (var i = 0; i < len; i++) {
    setElementAttribute(FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR[i], 'tabindex', '0');
  }
  searchInputField.focus();
} else {
  toggleButtonAttributes(searchButtonEl, false, OPEN_SEARCH_BUTTON_CLASS);
  toggleButtonAttributes(closeButtonEl, true, CLOSE_SEARCH_BUTTON_CLASS);
  for (var i = 0; i < len; i++) {
    setElementAttribute(FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR[i], 'tabindex', '-1');
  }
}

}

function toggleOtherElements() {

const searchCollapse = document.getElementById(SEARCH_COLLAPSE_ID);
const headerGlobalNavbar = document.getElementById(HEADER_GLOBAL_NAV_ID);
const collapseAria = searchCollapse.getAttribute('aria-hidden');

searchCollapse.classList.toggle('header-global__search-collapse--visible');
(collapseAria === "true") ? searchCollapse.setAttribute('aria-hidden', 'false') : searchCollapse.setAttribute('aria-hidden', 'true');
headerGlobalNavbar.classList.toggle('header-global__navbar--search-toggle');

}

function checkClickedButton(event) {

let openSearchButtonWasClicked;

if ( event.target.closest('#openSearchButton') ) {
  openSearchButtonWasClicked = true;
} else if ( event.target.closest('#closeSearchButton') ) {
  openSearchButtonWasClicked = false;
}
handleSearchToggle(openSearchButtonWasClicked);
toggleOtherElements();

}

function clickEventHandler(event) {

if ( event.target.closest('#openSearchButton') || event.target.closest('#closeSearchButton') ) {
  checkClickedButton(event);
} else {
  return; // Bail-out
}

}

function addClickEventListener() {

document.addEventListener('click', clickEventHandler);

}

function initSearchToggle() {

if ( ! document.getElementById('openSearchButton') )
  return;

addClickEventListener();

}

export default initSearchToggle;