
/**
 * Header Search Show/Hide js
 */

let socialContainer = document.querySelectorAll('.wp-primary-social');
socialContainer.forEach((socialForm) => {
  let body = document.body;
  if (socialForm !== null) {
    let toggleIcon = socialForm.querySelector('.wp-social-toggle-container')
    let socialInnerContainer = socialForm.querySelector('.wp-social-container')
    let socialInput = socialForm.querySelector('.wp-block-social__input')
    let fseSearch = document.querySelectorAll('.social-controller .svg, .social-controller .svg')
    let body = document.body;

    fseSearch.forEach((socialButton) => {
      socialButton.addEventListener('click', function () {
        console.log('clicked')
        body.classList.remove('show-social')
        socialForm.classList.remove('toggled-on')
      })
    })

    toggleIcon.addEventListener('click', function () {
      socialForm.classList.toggle('toggled-on')
      body.classList.toggle('show-social')
      socialInput.focus()
    })

    document.addEventListener('click', function (e) {
      if (!socialInput.contains(e.target) && !socialInnerContainer.contains(e.target) && !toggleIcon.contains(e.target) && socialForm.classList.contains('toggled-on')) {
        socialForm.classList.remove('toggled-on')
        body.classList.remove('show-social')
      }
    })
  }
})

