Efl Search Mechanic

// import autocomplete from 'autocompleter';
import { Dialog } from '../../components/lightbox-overlay/lightbox-overlay';
import videoLightBox from '../../components/dynamic-video-dialog/generate-lightbox';
import vimeoVideoLightBox from '../../components/dynamic-video-dialog/generate-vimeo-lightbox';

const DIALOG_ID = 'efl-search-mechanic-dialog';

export default parentElement => {
  const searchIcon = document.querySelector(
    '.global-fixed-header .site-search'
  );
  const inputBlock = parentElement.querySelector(
    '.efl-search-mechanic__inputgroup'
  );
  const { minText } = inputBlock.dataset;
  let isAjaxRuning = false;

  if (!searchIcon) {
    return;
  }

  async function globalSearchCallback(activePanel, searchText, pageSize, skip) {
    let filter = '';
    let tab = '';
    const modal = document.querySelector(`#${DIALOG_ID}`);

    if (activePanel) {
      const tabid = activePanel.id.replace('panel-tab-', '');

      tab = modal
        .querySelector(`#tab-${tabid}`)
        .getAttribute('data-search-filter');
    }

    if (tab && tab !== 'all') {
      filter = `&filters=${tab}`;
    }

    const url = `/GlobalSearch/SearchResults?site=EF&q=${searchText}&PageIndex=${skip}&PageSize=${pageSize}${filter}`;
    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
      },
    });

    return response.json();
  }

  const initiateLightbox = () => {
    const videoLightBoxElements = document.querySelectorAll(
      '[data-behavior=video-lightbox]'
    );

    if (videoLightBoxElements) {
      videoLightBoxElements.forEach(videoLightBoxElement =>
        videoLightBox(videoLightBoxElement)
      );
    }
  };
  const initiateVimeoLightbox = () => {
    const vimeoLightBoxElements = document.querySelectorAll(
      '[data-behavior=vimeo-video-lightbox]'
    );

    if (vimeoLightBoxElements) {
      vimeoLightBoxElements.forEach(vimeoLightBoxElement =>
        vimeoVideoLightBox(vimeoLightBoxElement)
      );
    }
  };

  const hideSuggestion = () => {
    const modal = document.querySelector(`#${DIALOG_ID}`);
    const resultDiv = modal.querySelector('.efl-search-mechanic__result');
    const suggestionDiv = resultDiv.querySelector(
      '.efl-search-mechanic__result--suggestion'
    );
    const noResultDiv = resultDiv.querySelector(
      '.efl-search-mechanic__result--noresult'
    );

    resultDiv.classList.add('hidden');
    suggestionDiv.classList.add('hidden');
    noResultDiv.classList.add('hidden');
  };

  const suggesionHtml = suggestion => {
    const {
      articleHeadline,
      articleLink,
      categoryTagName,
      videoType,
      videoId,
      articleImage,
    } = suggestion;
    let category = 'Others';

    if (categoryTagName) {
      category = categoryTagName;
    }
    const modal = document.querySelector(`#${DIALOG_ID}`);
    const inputBox = modal.querySelector('.efl-search-mechanic__input');

    let videoHtml = '';

    if (videoType && videoType === 'youtube') {
      videoHtml = `data-behavior="video-lightbox"
      data-video-id="${videoId}" data-poster-image="${articleImage}"`;
    } else if (videoType && videoType === 'vimeo') {
      videoHtml = `data-behavior="vimeo-video-lightbox"
      data-video-id="${videoId}" data-poster-image="${articleImage}"`;
    }

    return `
      <a href="${articleLink}?q=${inputBox.value}" ${videoHtml}>
        <div class="list-info">
            <h4>${category}</h4>
            <p>${articleHeadline}</p>
        </div>
      </a>`;
  };
  const renderSuggestion = (response, pageSize) => {
    const modal = document.querySelector(`#${DIALOG_ID}`);
    const resultDiv = modal.querySelector('.efl-search-mechanic__result');
    const suggestionDiv = resultDiv.querySelector(
      '.efl-search-mechanic__result--suggestion'
    );
    const allresultDiv = resultDiv.querySelector(
      '.efl-search-mechanic__result--allresults'
    );
    const noresultDiv = resultDiv.querySelector(
      '.efl-search-mechanic__result--noresult'
    );
    const suggestionList = suggestionDiv.querySelector('.suggesion-list');

    suggestionList.innerHTML = '';

    response.forEach((list, index) => {
      if (index < pageSize) {
        const listClone = suggesionHtml(list);

        suggestionList.insertAdjacentHTML('beforeend', listClone);
      }
    });

    initiateLightbox();
    initiateVimeoLightbox();

    resultDiv.classList.remove('hidden');
    suggestionDiv.classList.remove('hidden');
    allresultDiv.classList.add('hidden');
    noresultDiv.classList.add('hidden');
  };

  const dateFormater = dateStr => {
    const dateObj = dateStr.split('T');
    const stDate = new Date(dateObj[0]);
    const month = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    let stDt = '';

    if (stDate.getDate() >= 10) {
      stDt = stDate.getDate();
    } else {
      stDt = `0${stDate.getDate()}`;
    }

    const stMonth = month[stDate.getMonth()];

    return `${stDt} ${stMonth} ${stDate.getFullYear()}`;
  };

  const renderResultCard = cardDetails => {
    const {
      articleHeadline,
      articleDescription,
      articleImage,
      articleLink,
      publishedDate,
      readTime,
      categoryTagName,
      videoType,
      videoId,
    } = cardDetails;

    const date = dateFormater(publishedDate);
    let imgTag = '';
    let playIcon = '';
    let read = '';

    if (articleImage) {
      imgTag = `<img src="${articleImage}" alt="" loading="lazy" />`;
    }

    let category = 'Others';

    if (categoryTagName) {
      category = categoryTagName;
    }

    if (category === 'Video') {
      playIcon = `<div class="efl-search-play_icon" alt="play icon" loading="lazy" ></div>`;
    }

    if (readTime) {
      read = `<span class="time">${readTime}</span> &nbsp;&nbsp;&#8211;&nbsp;&nbsp;<span class="date">${date}</span>`;
    } else {
      read = `<span class="date">${date}</span>`;
    }

    const tempDiv = document.createElement('div');

    tempDiv.innerHTML = articleDescription;

    const desc = tempDiv.innerText;
    const modal = document.querySelector(`#${DIALOG_ID}`);
    const inputBox = modal.querySelector('.efl-search-mechanic__input');
    let videoHtml = '';

    if (videoType && videoType === 'youtube') {
      videoHtml = `data-behavior="video-lightbox"
      data-video-id="${videoId}" data-poster-image="${articleImage}"`;
    } else if (videoType && videoType === 'vimeo') {
      videoHtml = `data-behavior="vimeo-video-lightbox"
      data-video-id="${videoId}" data-poster-image="${articleImage}"`;
    }

    return `
      <a href="${articleLink}?q=${inputBox.value}" ${videoHtml}>
        <div class="efl-search-card">
          <div class="efl-search-card__image">
              ${imgTag}
              <span>
              ${playIcon}
              </span>
          </div>
          
          <div class="efl-search-card__content">
              <p class="efl-search-card__category">${category}</p>
              <h5 class="efl-heading-5 efl-search-card__title">${articleHeadline}</h5>
              <p class="efl-p-1 efl-search-card__description">${desc}</p>
              <p class="efl-search-card__date-wrap">
                  ${read}
              </p>
          </div>
        </div>
      </a>`;
  };

  const renderAllResult = (activePanel, response, pageSize) => {
    let allCardHtml = '';
    const appendObj = activePanel.querySelector('.result-lists');
    const totalCount = activePanel.querySelector('h3');
    // eslint-disable-next-line radix
    let current = parseInt(activePanel.getAttribute('data-current'));
    // eslint-disable-next-line radix
    let skip = parseInt(activePanel.getAttribute('data-skip'));

    response.results.forEach((cardDetails, index) => {
      if (index < pageSize) {
        allCardHtml += renderResultCard(cardDetails);
      }
    });

    if (response.results.length > pageSize) {
      // eslint-disable-next-line radix
      current += parseInt(pageSize);
    } else {
      // eslint-disable-next-line radix
      current += parseInt(response.results.length);
    }
    // eslint-disable-next-line no-plusplus
    skip++;

    appendObj.insertAdjacentHTML('beforeend', allCardHtml);
    totalCount.innerText = `${response.numFound} Results`;
    activePanel.setAttribute('data-totalresult', response.numFound);
    activePanel.setAttribute('data-current', current);
    activePanel.setAttribute('data-skip', skip);
    if (response.numFound > 9) {
      activePanel.setAttribute('data-loadmore', 'true');
    }

    initiateLightbox();
    initiateVimeoLightbox();
  };

  const renderMoreResult = (activePanel, response, pageSize) => {
    let allCardHtml = '';
    const appendObj = activePanel.querySelector('.more-result-lists');
    // eslint-disable-next-line radix
    let current = parseInt(activePanel.getAttribute('data-current'));
    // eslint-disable-next-line radix
    const total = parseInt(activePanel.getAttribute('data-totalresult'));
    // eslint-disable-next-line radix
    let skip = parseInt(activePanel.getAttribute('data-skip'));

    response.results.forEach((cardDetails, index) => {
      if (index < pageSize && current + index < total) {
        allCardHtml += renderResultCard(cardDetails);
      }
    });

    if (total - current > pageSize) {
      // eslint-disable-next-line radix
      current += parseInt(pageSize);
    } else {
      // eslint-disable-next-line radix
      current += parseInt(total - current);
    }
    // eslint-disable-next-line no-plusplus
    skip++;

    appendObj.insertAdjacentHTML('beforeend', allCardHtml);
    activePanel.setAttribute('data-current', current);
    activePanel.setAttribute('data-skip', skip);
    if (response.numFound > current) {
      activePanel.setAttribute('data-loadmore', 'true');
    } else {
      activePanel.setAttribute('data-loadmore', 'false');
    }

    initiateLightbox();
    initiateVimeoLightbox();
  };

  const renderNoResult = () => {
    const modal = document.querySelector(`#${DIALOG_ID}`);
    const resultDiv = modal.querySelector('.efl-search-mechanic__result');
    const suggestionDiv = resultDiv.querySelector(
      '.efl-search-mechanic__result--suggestion'
    );
    const allresultDiv = resultDiv.querySelector(
      '.efl-search-mechanic__result--allresults'
    );
    const noresultDiv = resultDiv.querySelector(
      '.efl-search-mechanic__result--noresult'
    );

    resultDiv.classList.remove('hidden');
    suggestionDiv.classList.add('hidden');
    allresultDiv.classList.add('hidden');
    noresultDiv.classList.remove('hidden');
  };

  const renderTabNoResult = activePanel => {
    const resultlist = activePanel.querySelector('.result-lists');
    const moreresult = activePanel.querySelector('.more-result-lists');
    const noresult = activePanel.querySelector('.result-lists-norsult');

    resultlist.classList.add('hidden');
    moreresult.classList.add('hidden');
    noresult.classList.remove('hidden');
    // eslint-disable-next-line no-param-reassign
    activePanel.querySelector('h3').innerText = 'No Results';
  };

  const removeLoading = (loaderDiv, type) => {
    const loading = loaderDiv.querySelector('.loading');

    if (type === 'search') {
      loaderDiv.classList.add('hidden');
    }

    if (loading) {
      loading.classList.remove('show');
    }
  };

  const showLoading = (loaderDiv, type) => {
    const loading = loaderDiv.querySelector('.loading');

    if (type === 'search') {
      loaderDiv.classList.remove('hidden');
    }

    if (loading) {
      loading.classList.add('show');
    }
  };

  function globalSearch(activePanel, type, searchText, pageSize, skip) {
    try {
      if (activePanel) {
        showLoading(activePanel, type);
      } else if (type === 'search') {
        const modal = document.querySelector(`#${DIALOG_ID}`);
        const loaderDiv = modal.querySelector(
          '.efl-search-mechanic__result--loading'
        );
        const resultDiv = modal.querySelector('.efl-search-mechanic__result');
        const suggestionDiv = resultDiv.querySelector(
          '.efl-search-mechanic__result--suggestion'
        );
        const resultAllDiv = resultDiv.querySelector(
          '.efl-search-mechanic__result--allresults'
        );

        showLoading(loaderDiv, type);
        resultDiv.classList.remove('hidden');
        suggestionDiv.classList.add('hidden');
        resultAllDiv.classList.add('hidden');
      }
      isAjaxRuning = true;
      globalSearchCallback(activePanel, searchText, pageSize, skip).then(
        response => {
          if (activePanel) {
            removeLoading(activePanel, type);
          } else {
            const modal = document.querySelector(`#${DIALOG_ID}`);
            const loaderDiv = modal.querySelector(
              '.efl-search-mechanic__result--loading'
            );
            const resultDiv = modal.querySelector(
              '.efl-search-mechanic__result'
            );

            removeLoading(loaderDiv, type);
            resultDiv.classList.add('hidden');
          }
          isAjaxRuning = false;
          if (response && response !== 'null' && response.numFound) {
            if (type === 'search') {
              renderSuggestion(response.results, pageSize);
            } else if (type === 'allresult') {
              renderAllResult(activePanel, response, pageSize);
            } else {
              renderMoreResult(activePanel, response, pageSize);
            }
          } else if (type === 'allresult') {
            renderTabNoResult(activePanel);
          } else {
            renderNoResult();
          }
        }
      );
    } catch (e) {
      throw new Error('Uable to retrive the sessions ::', e);
    }
  }

  const generateLightBox = ({ labelId }) => {
    const html = parentElement.innerHTML;

    return `
      <div role="dialog" id="${DIALOG_ID}" aria-labelledby="${labelId}" aria-modal="true" class="lightbox-overlay">
        <div class="efl-search-mechanic">
          <button class="lightbox-overlay__close" id="close">
            <span class="visually-hidden">Close dialog</span>
          </button>      
          <div class="efl-search-mechanic__content">
            ${html}
          </div>
        </div>
      </div>`;
  };

  const removeLightBox = () => {
    document.getElementById(DIALOG_ID).remove();
  };

  searchIcon.addEventListener('click', event => {
    event.preventDefault();

    // Create the lightbox
    const lightboxContainer = document.createElement('div');

    lightboxContainer.innerHTML = generateLightBox({
      labelId: parentElement.id,
    });
    document.body.appendChild(lightboxContainer);

    // eslint-disable-next-line no-new
    new Dialog({
      dialogId: DIALOG_ID,
      focusAfterClosed: searchIcon,
      focusFirst: 'close',
      closeCallBack: () => removeLightBox(),
    });

    const inputBox = lightboxContainer.querySelector(
      '.efl-search-mechanic__input'
    );

    // added default focus to the inputbox
    inputBox.focus();

    const clearText = lightboxContainer.querySelector('.clear-input');
    const resultAllCta = lightboxContainer.querySelector('.see-all-cta');
    const suggestionDiv = lightboxContainer.querySelector(
      '.efl-search-mechanic__result--suggestion'
    );
    const resultAllDiv = lightboxContainer.querySelector(
      '.efl-search-mechanic__result--allresults'
    );
    const allTabs = resultAllDiv.querySelectorAll('.allresults-tabs > a');
    const firstTab = resultAllDiv.querySelector(
      '.allresults-tabs > a:first-child'
    );
    const allTabPanel = resultAllDiv.querySelectorAll('div[role="tabpanel"]');

    const tabActive = activeTab => {
      allTabs.forEach(t => t.setAttribute('aria-selected', 'false'));
      allTabPanel.forEach(t => t.setAttribute('hidden', 'true'));
      activeTab.setAttribute('aria-selected', 'true');
      const activePanel = activeTab.getAttribute('aria-controls');

      resultAllDiv.querySelector(`#${activePanel}`).removeAttribute('hidden');
    };

    const resetTab = () => {
      allTabs.forEach(tab => {
        tab.setAttribute('aria-selected', 'false');
      });
      allTabPanel.forEach(panel => {
        panel.setAttribute('hidden', 'true');
        panel.setAttribute('data-skip', '1');
        panel.setAttribute('data-totalresult', '0');
        panel.setAttribute('data-current', '0');
        panel.setAttribute('data-loadmore', 'false');
        panel.querySelector('.result-lists').classList.remove('hidden');
        panel.querySelector('.more-result-lists').classList.remove('hidden');
        panel.querySelector('.result-lists-norsult').classList.add('hidden');
        // eslint-disable-next-line no-param-reassign
        panel.querySelector('.result-lists').innerHTML = '';
        // eslint-disable-next-line no-param-reassign
        panel.querySelector('.more-result-lists').innerHTML = '';
        // eslint-disable-next-line no-param-reassign
        panel.querySelector('h3').innerText = '0 Results';
      });
      allTabs[0].setAttribute('aria-selected', 'true');
      const activePanel = allTabs[0].getAttribute('aria-controls');

      resultAllDiv.querySelector(`#${activePanel}`).removeAttribute('hidden');
    };

    inputBox.addEventListener('input', e => {
      if (e.target.value) {
        inputBox.classList.add('noempty');
      } else {
        inputBox.classList.remove('noempty');
      }
    });

    /* const keyUpDelay = (callback, ms) => {
      var timer = 0;
      return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
          callback.apply(context, args);
        }, ms || 0);
      };
    }; */

    inputBox.addEventListener('keyup', e => {
      const contentDiv = lightboxContainer.querySelector(
        '.efl-search-mechanic__content'
      );

      if (e.target.value.trim().length >= minText) {
        // console.log(e.target.value);
        contentDiv.classList.add('search-margin');
        // keyUpDelay(() => {
        globalSearch('', 'search', e.target.value, 5, 1);
        // }, 300);
      } else {
        contentDiv.classList.remove('search-margin');
        hideSuggestion();
      }
    });

    clearText.addEventListener('click', () => {
      inputBox.value = '';
      inputBox.classList.remove('noempty');
      const contentDiv = lightboxContainer.querySelector(
        '.efl-search-mechanic__content'
      );

      contentDiv.classList.remove('search-margin');
      hideSuggestion();
    });

    resultAllCta.addEventListener('click', e => {
      e.preventDefault();
      suggestionDiv.classList.add('hidden');
      resultAllDiv.classList.remove('hidden');

      resetTab();
      tabActive(firstTab);

      const modal = document.querySelector(`#${DIALOG_ID}`);
      const resultDiv = modal.querySelector('.efl-search-mechanic__result');
      const allresultDiv = resultDiv.querySelector(
        '.efl-search-mechanic__result--allresults'
      );
      const activePanel = allresultDiv.querySelector(
        'div[role="tabpanel"]:not([hidden])'
      );

      globalSearch(activePanel, 'allresult', inputBox.value, 9, 1);
    });

    allTabs.forEach(tab => {
      tab.addEventListener('click', e => {
        tabActive(e.target);

        const activeTab = e.target.getAttribute('aria-controls');
        const activePanel = lightboxContainer.querySelector(`#${activeTab}`);
        const skip = activePanel.getAttribute('data-skip');
        const current = activePanel.getAttribute('data-current');

        if (current === '0') {
          globalSearch(activePanel, 'allresult', inputBox.value, 9, skip);
        }
      });
    });

    // load more content
    allTabPanel.forEach(panel => {
      const currentPannel = panel.querySelector('.result-scroll');

      panel.querySelector('.result-scroll').addEventListener('scroll', () => {
        const { scrollTop, scrollHeight, clientHeight } = currentPannel;

        if (
          clientHeight + scrollTop >= scrollHeight - 10 &&
          panel.getAttribute('data-loadmore') === 'true' &&
          !isAjaxRuning
        ) {
          // eslint-disable-next-line radix
          const skip = parseInt(panel.getAttribute('data-skip'));

          globalSearch(panel, 'moreresult', inputBox.value, 9, skip);
        }
      });
    });
  });
};