Efl Index Left Filter

/*eslint-disable */
export default parentElement => {
  const checkboxes = parentElement.querySelectorAll(
    '.efl-index-left-filter__list--checkbox'
  );
  const { filterType } = parentElement.dataset;
  let skipData = 10;
  let moreData = true;
  let isAjaxRuning = false;
  let defaultOr = true;
  const MOBILE_BREAKPOINT = 820;
  let defaultWidth = window.innerWidth;
  const cardCount = document.querySelector('#how-many-sessions');
  const filterBarType = document.querySelector('#filter-bar-type');
  const allCards = document.querySelectorAll('[data-filter]');
  const linkslevel1 = parentElement.querySelectorAll(
    '.efl-index-left-filter__list'
  );
  const resetfilter = parentElement.querySelector('#reset-results');
  const showMeResut = parentElement.querySelector('#show-me-sessions');
  const toggleFilterButton = document.querySelector(
    '.efl-filter-bar__inner--show-hide'
  );

  const calibrateFilterBarSize = () => {
    const filterBarContainer = document.querySelector(
      '.efl-filter-bar--container'
    );
    filterBarContainer.style.minHeight = `${self.clientHeight}px`;
  };

  // Tags
  const NmbrOfMoreTags = document.querySelector(
    '.efl-filter-bar__inner__show-more--indicator'
  );
  const showMoreButton = document.querySelector(
    '.efl-filter-bar__inner__show-more--button-next'
  );
  const prevTagButton = document.querySelector(
    '.efl-filter-bar__inner__show-more--button-prev'
  );
  const tagsContainer = document.querySelector('.efl-filter-bar__inner--tags');
  let tagPage = 0;
  let defaultTagIndex = 0;
  const closeFilterButton = document.querySelector(
    '.efl-filter-bar__inner--close'
  );

  const tagPagination = (defaultIndex = 0) => {
    const tagsArray = tagsContainer.querySelectorAll('li');
    const containerWidth = tagsContainer.clientWidth;
    const cardlistContainer = document.querySelector('.efl-index-layout');
    const resutDiv = document.querySelector('.efl-filter-bar__inner--session');
    const filterBarContainer = document.querySelector(
      '.efl-filter-bar__inner--tags-scroll'
    );
    const showmore = document.querySelector(
      '.efl-filter-bar__inner__show-more'
    );
    // Width starts at 32 because of margin left
    let maximumWidth = 32;
    let extraTags = 0;
    let tagIndex = 0 + defaultIndex;
    // cardlistContainer.clientWidth - showing 1 resut - +more - 32
    const defaultScroll = cardlistContainer.clientWidth - 160 - 165 - 32 - 170;

    if (window.innerWidth < MOBILE_BREAKPOINT) {
      showMoreButton.style.display = 'none';
      NmbrOfMoreTags.style.display = 'none';
      prevTagButton.style.display = 'none';
      return;
    }

    tagsArray.forEach((tag, index) => {
      if (index < tagIndex) {
        return;
      }

      if (maximumWidth <= defaultScroll) {
        maximumWidth += tag.clientWidth + 16;
        tagIndex += 1;
      }

      if (maximumWidth > defaultScroll) {
        extraTags += 1;
        tag.classList.add('hidden');
      }
    });
    prevTagButton.style.display = 'none';
    if (extraTags > 0) {
      NmbrOfMoreTags.innerHTML = `+ ${extraTags} More`;
      showMoreButton.removeAttribute('style');
      NmbrOfMoreTags.removeAttribute('style');
      showmore.removeAttribute('style');
    } else {
      showMoreButton.style.display = 'none';
      NmbrOfMoreTags.style.display = 'none';
      showmore.style.display = 'none';
    }

    if (maximumWidth < defaultScroll) {
      tagsContainer.style.maxWidth = `${defaultScroll}px`;
      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        filterBarContainer.style.maxWidth = `${defaultScroll}px`;
      }
    } else {
      tagsContainer.style.maxWidth = `${maximumWidth}px`;
      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        filterBarContainer.style.maxWidth = `${maximumWidth}px`;
      }
    }
    // if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
    //   tagsContainer.style.justifyContent = 'flex-end';
    // }
    calibrateFilterBarSize();
  };

  showMoreButton.addEventListener('click', e => {
    const tagsArray1 = tagsContainer.querySelectorAll('li:not(.hidden)');
    const hiddenTagsArray = tagsContainer.querySelectorAll('li.hidden');
    const containerWidth = tagsContainer.clientWidth;
    const cardlistContainer = document.querySelector('.efl-index-layout--main');
    const resutDiv = document.querySelector('.efl-filter-bar__inner--session');
    const filterBarContainer = document.querySelector(
      '.efl-filter-bar__inner--tags-scroll'
    );
    const showmore = document.querySelector(
      '.efl-filter-bar__inner__show-more'
    );
    let maximumWidth = 32;
    let slidemargin = 0;
    let extraTags = hiddenTagsArray.length;
    const defaultScroll = cardlistContainer.clientWidth - 146 - 165 - 32 - 170;
    let scrollPos;
    let currentTagsWidth = 32;

    e.preventDefault();

    tagsArray1.forEach(tag => {
      slidemargin += tag.clientWidth + 16;
      defaultTagIndex += 1;
    });

    hiddenTagsArray.forEach((tag, index) => {
      if (maximumWidth < defaultScroll) {
        tag.classList.remove('hidden');
        maximumWidth += tag.clientWidth + 16;
        extraTags -= 1;
        scrollPos = tag;
      }
    });

    if (extraTags !== 0 || (defaultScroll < maximumWidth && extraTags === 0)) {
      maximumWidth = maximumWidth - scrollPos.clientWidth - 64;
      extraTags += 1;
      scrollPos.classList.add('hidden');
    }

    if (extraTags > 0) {
      NmbrOfMoreTags.innerHTML = `+ ${extraTags} More`;
      prevTagButton.style.display = 'none';
      showMoreButton.removeAttribute('style');
      NmbrOfMoreTags.removeAttribute('style');
    } else {
      showMoreButton.style.display = 'none';
      NmbrOfMoreTags.style.display = 'none';
      prevTagButton.style.display = 'flex';
    }

    if (maximumWidth < defaultScroll) {
      tagsContainer.style.maxWidth = `${maximumWidth}px`;
      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        filterBarContainer.style.maxWidth = `${maximumWidth}px`;
      }
    } else {
      tagsContainer.style.maxWidth = `${maximumWidth}px`;
      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        filterBarContainer.style.maxWidth = `${maximumWidth}px`;
      }
    }

    tagsContainer.scrollTo({
      top: 0,
      left: slidemargin,
      behavior: 'smooth',
    });
    console.log('defaultTagIndex:' + defaultTagIndex);
  });

  showMoreButton.addEventListener('keydown', e => {
    if (e.keyCode === 13) {
      e.preventDefault();
      showMoreButton.click();
      prevTagButton.focus();
    }
  });

  prevTagButton.addEventListener('click', e => {
    defaultTagIndex = 0;
    e.preventDefault();
    tagsContainer.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth',
    });
    const tagsArray = tagsContainer.querySelectorAll('li');
    tagsArray.forEach((tag, index) => {
      tag.classList.remove('hidden');
    });
    setTimeout(() => {
      tagPagination();
    }, 100);
  });

  prevTagButton.addEventListener('keydown', e => {
    if (e.keyCode === 13) {
      e.preventDefault();
      prevTagButton.click();
      showMoreButton.focus();
    }
  });

  function selectedcardcount() {
    const divselectedcount = document.querySelectorAll('.efl-card');
    const cardselectedCount = [].slice.call(divselectedcount);
    const cardactiveCount = cardselectedCount.filter(function(el) {
      return !el.classList.contains('hidden');
    });

    cardCount.innerText = cardactiveCount.length;
    filterBarType.innerText = filterType;
  }
  function resetClass(cards) {
    cards.forEach(card => {
      if (!card.classList.contains('efl-card--1--full-width')) {
        // eslint-disable-next-line no-param-reassign
        card.className = '';
        card.classList.add('efl-card', 'efl-card--vertical');
        card.classList.remove('minimised-card');
      }
    });
  }
  // select CSS class determined by the number of session cards
  const selectClass = (cards, cardsLength) => {
    cards.forEach((eflCardElement, index) => {
      const eflCard = eflCardElement;

      eflCard.classList.add(`card${index + 1}`);
    });
  };

  const setCardNo = () => {
    const cardlist = document.querySelectorAll('.efl-card-list__inner');

    cardlist.forEach(list => {
      const eflCards = list.querySelectorAll('.efl-card');

      eflCards.forEach((eflCard, index) => {
        eflCard.classList.add(`card${index + 1}`);
      });
    });
  };

  function reRenderLayout() {
    const cardlist = document.querySelectorAll('.efl-card-list__inner');
    cardlist.forEach(list => {
      const eflCards = list.querySelectorAll('.efl-card:not(.hidden)');
      if (!eflCards.length) {
        list.closest('.efl-card-list').classList.add('hidden');
      } else {
        list.closest('.efl-card-list').classList.remove('hidden');
        resetClass(eflCards);
        selectClass(eflCards, eflCards.length);
        //displaySessionCount(eflCards.length)
        list.classList.remove(...list.classList);
        list.classList.add(
          'efl-card-list__inner',
          `efl-card-list__inner--${eflCards.length}`
        );
      }
    });
  }
  function toggleCheckbox({ currentValue, groups }) {
    if (groups.length) {
      allCards.forEach(filtercard => {
        filtercard.classList.add('hidden');
      });
    } else {
      allCards.forEach(filtercard => {
        filtercard.classList.remove('hidden');
      });
    }

    allCards.forEach(filtercard => {
      const currentCardFilterData = JSON.parse(filtercard.dataset.filter);
      let count = 0;

      for (const filterdata in currentCardFilterData) {
        const data = currentCardFilterData[filterdata].split('|');

        if (groups.length === 1) {
          if (currentValue[groups[0]].find(val => data.includes(val))) {
            filtercard.classList.remove('hidden');
            break;
          }
        } else if (groups.length > 1) {
          groups.forEach(group => {
            if (currentValue[group].find(val => data.includes(val))) {
              count += 1;
            }
          });
          if (groups.length === count) {
            filtercard.classList.remove('hidden');
          }
        }
      }
    });

    selectedcardcount();
    // checkFilteredLabel();
    reRenderLayout();
    // Dispatch the event.
    // window.dispatchEvent(event);
  }
  function resetCards(resetValue) {
    const resetcards = document.querySelectorAll('[data-filter]');

    if (resetValue.length === undefined) {
      for (let i = 0; i < resetcards.length; i += 1) {
        resetcards[i].classList.remove('hidden');
      }
    }
    selectedcardcount();
    reRenderLayout();
  }
  function getQueryString(selectedOnly) {
    let queryStr = '';
    linkslevel1.forEach(link => {
      const level2opt = link.querySelectorAll('input[type=checkbox]:checked');

      if (selectedOnly === 'false' || level2opt.length) {
        queryStr += link.getAttribute('data-category');
        queryStr += '=';
        level2opt.forEach((checkbox, index) => {
          if (index) {
            queryStr += `_${checkbox.value}`;
          } else {
            queryStr += `${checkbox.value}`;
          }
        });
        queryStr += '&';
      }
    });
    queryStr = queryStr.slice(0, -1); // to remove last &
    return queryStr;
  }
  const removeFilterTag = e => {
    const { value } = e.target.dataset;
    const checkbox = parentElement.querySelector(
      `input[type=checkbox][value="${value}"]`
    );
    checkbox.click();
    if (window.innerWidth < MOBILE_BREAKPOINT) {
      showMeResut.click();
    }
    e.target.closest('li').remove();
  };
  function updateFilterBar() {
    const selectedValue = [];
    const checkboxes = parentElement.querySelectorAll('input[type=checkbox]');
    const filterBar = document.querySelector('.efl-filter-bar__inner--tags');
    const filterBarContainer = document.querySelector(
      '.efl-filter-bar__inner--tags-scroll'
    );

    filterBar.innerHTML = '';

    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        selectedValue.push(checkboxes[i].value);
        const labelTxt = checkboxes[i].previousElementSibling.innerText;
        const removeFilter = `<div class="close-tag" role="button" tabindex="0" aria-label="clear ${labelTxt} filter" data-value="${
          checkboxes[i].value
        }">+</div>`;
        const filter = `<li data-attr="${
          checkboxes[i].value
        }">${labelTxt}${removeFilter}</li>`;

        filterBar.insertAdjacentHTML('beforeend', filter);
      }
    }

    const filterTags = document.querySelectorAll(
      '.efl-filter-bar__inner--tags li .close-tag'
    );
    if (filterTags.length) {
      filterTags.forEach(tag => {
        tag.addEventListener('click', e => {
          e.preventDefault();
          removeFilterTag(e);
        });

        tag.addEventListener('keydown', e => {
          if (e.keyCode === 13) {
            e.preventDefault();
            tag.click();
          }
        });
      });
    }
    if (!selectedValue.length) {
      filterBarContainer.style.display = 'none';
    } else {
      filterBarContainer.removeAttribute('style');
    }
    tagPagination();
  }
  function hideFilterBar() {
    const filterBar = document.querySelector('.efl-filter-bar__inner--tags');
    const filterBarContainer = document.querySelector(
      '.efl-filter-bar__inner--tags-scroll'
    );
    const showmore = document.querySelector(
      '.efl-filter-bar__inner__show-more'
    );

    filterBar.innerHTML = '';
    filterBar.removeAttribute('style');
    filterBarContainer.style.display = 'none';
    showmore.style.display = 'none';
    prevTagButton.style.display = 'none';
  }
  function applyFilter() {
    const selectedValue = [];
    const selectedGroup = [];
    const checkboxes = parentElement.querySelectorAll('input[type=checkbox]');

    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        const { category } = checkboxes[i].closest('fieldset').dataset;
        if (selectedValue[`${category}`]) {
          selectedValue[`${category}`].push(checkboxes[i].value);
        } else {
          selectedValue[`${category}`] = [];
          selectedGroup.push(category);
          selectedValue[`${category}`].push(checkboxes[i].value);
        }
        //selectedValue.push(checkboxes[i].value);
      }
    }

    toggleCheckbox({
      currentValue: selectedValue,
      groups: selectedGroup,
    });

    const redirectUrl = `${window.location.origin}${window.location.pathname}`;
    const queryStr = getQueryString('true');

    if (queryStr) {
      window.history.pushState({}, '', `${redirectUrl}?${queryStr}`);
    } else {
      window.history.pushState({}, '', `${redirectUrl}`);
    }
  }
  function showMeResults() {
    applyFilter();
  }
  function bindArticleSessionCardData(cardData, modifier) {
    const {
      isVideo,
      itemUrl,
      imageUrl,
      tagName,
      featuredText,
      title,
      description,
      readTime,
      publishedDate,
      isFeatured,
    } = cardData;
    const videoClass = isVideo ? 'efl-card__image--video' : '';
    const modifierClass = modifier ? `efl-card--${modifier}` : '';
    // const dtVal = featuredText === '' ? publishedDate : featuredText;
    const featuredImageLabel = isFeatured ? 'featured' : '';
    const featuredLabel = isFeatured
      ? '<span class="efl-card__image--red">Featured</span>'
      : '';
    return `
      <a href="${itemUrl}" class="efl-card ${modifierClass} article" aria-label="${title}">
        <div class="efl-card__image ${videoClass} ${featuredImageLabel}">
            ${featuredLabel}
            <img src="${imageUrl}" loading="lazy"/>
        </div>
        <div class="efl-card__content">
            <div class="efl-card__inner">
                <div class="efl-card__content--category">${tagName}</div>
                <div class="efl-card__content--title">${title}</div>
                <p class="efl-card__content--description">${description}</p>
                <div class="efl-card__content--date-wrap"><span class="time">${readTime}</span><span class="date">${publishedDate}</span></div>
            </div>
        </div>
    </a>`;
  }

  function getTaxonomies() {
    const checkboxes = parentElement.querySelectorAll(
      'input[type=checkbox]:checked'
    );
    let taxonomies = '';

    checkboxes.forEach((checkbox, index) => {
      if (index) {
        taxonomies += `|${checkbox.value}`;
      } else {
        taxonomies += `${checkbox.value}`;
      }
    });
    return taxonomies;
  }

  async function getSessionsCallback(pageSize, skip) {
    const { filterUrl } = parentElement.dataset;
    let fieldSet;
    let chkField = false;
    const checkboxes = parentElement.querySelectorAll(
      'input[type=checkbox]:checked'
    );

    checkboxes.forEach((checkbox, index) => {
      const currentfield = checkbox
        .closest('fieldset')
        .getAttribute('data-category');
      if (index && fieldSet !== currentfield) {
        chkField = true;
      }
      fieldSet = currentfield;
    });

    if (chkField) {
      defaultOr = false;
    } else {
      defaultOr = true;
    }
    // console.log(`log-> ${defaultOr}`);

    const url = `/Resources/SearchArticles/?taxonomies=${getTaxonomies()}&startingNo=${skip}&pageSize=${pageSize}&filterbyOr=${defaultOr}`;
    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
      },
    });

    return response.json();
  }

  function clearPageData() {
    let pageElement = document.querySelector('.efl-index-layout--main');
    let firstThreeCard = pageElement.querySelector(
      '.efl-card-list:nth-child(1)'
    );
    let threeCardInner = firstThreeCard.querySelector('.efl-card-list__inner');
    let sixCard = pageElement.querySelector('.efl-card-list:nth-child(2)');
    let sixCardInner = sixCard.querySelector('.efl-card-list__inner');
    let fullWidthCard = pageElement.querySelector(
      '.efl-card-list:nth-child(3)'
    );
    let fullWidthCardInner = fullWidthCard.querySelector(
      '.efl-card-list__inner'
    );
    let sixCard2 = pageElement.querySelector('.efl-card-list:nth-child(4)');
    let fullWidthCard2 = pageElement.querySelector(
      '.efl-card-list:nth-child(5)'
    );
    let moreCard = pageElement.querySelector('.article-session-index__scroll');

    threeCardInner.innerHTML = '';
    sixCardInner.innerHTML = '';
    fullWidthCardInner.innerHTML = '';

    if (sixCard2) {
      let sixCardInner2 = sixCard2.querySelector('.efl-card-list__inner');
      sixCardInner2.innerHTML = '';
    }

    if (fullWidthCard2) {
      let fullWidthCardInner2 = fullWidthCard2.querySelector(
        '.efl-card-list__inner'
      );

      fullWidthCardInner2.innerHTML = '';
    }

    if (moreCard) {
      moreCard.innerHTML = '';
      moreCard.classList.add('ajax');
    }
  }

  function renderSessionPage(response) {
    let pageElement = document.querySelector('.efl-index-layout--main');
    let firstThreeCard = pageElement.querySelector(
      '.efl-card-list:nth-child(1)'
    );
    let threeCardInner = firstThreeCard.querySelector('.efl-card-list__inner');
    let sixCard = pageElement.querySelector('.efl-card-list:nth-child(2)');
    let sixCardInner = sixCard.querySelector('.efl-card-list__inner');
    let fullWidthCard = pageElement.querySelector(
      '.efl-card-list:nth-child(3)'
    );
    let fullWidthCardInner = fullWidthCard.querySelector(
      '.efl-card-list__inner'
    );

    if (response && response !== 'null' && response.searchResults.length) {
      response.searchResults.forEach((cardData, index) => {
        /*if (response.searchResults.length === 1) {
          singleVerCard.classList.add('single-card-fullwidth');
        } else {
          singleVerCard.classList.remove('single-card-fullwidth');
        }*/
        if (index === 0) {
          // replace single card data
          const firstCardData = bindArticleSessionCardData(cardData, 'single');

          threeCardInner.insertAdjacentHTML('beforeend', firstCardData);
        } else if (index > 0 && index < 3) {
          // replace vertical card data
          const verticalCardData = bindArticleSessionCardData(
            cardData,
            'horizontal'
          );

          threeCardInner.insertAdjacentHTML('beforeend', verticalCardData);
        } else if (index >= 3 && index < 9) {
          // replace horizontal card data
          const horzCardData = bindArticleSessionCardData(cardData, 'vertical');

          sixCardInner.insertAdjacentHTML('beforeend', horzCardData);
        } else if (index === 9) {
          // replace horizontal card data
          const fullWidthCardData = bindArticleSessionCardData(
            cardData,
            '1--full-width'
          );

          fullWidthCardInner.insertAdjacentHTML('beforeend', fullWidthCardData);
        }
      });
      setCardNo();
    }
  }

  const removeLoading = () => {
    const loading = document.querySelector('.loading');

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

  const showLoading = () => {
    const loading = document.querySelector('.loading');

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

  function renderMoreSession(response) {
    if (response && response !== 'null' && response.searchResults.length) {
      let moreItem = document.createElement('div');
      let fullWidthItem = document.createElement('div');
      let moreCard = document.querySelector('.article-session-index__scroll');
      let fullwidth = false;

      moreItem.classList.add('efl-card-list', 'efl-card-list--6');
      moreItem.innerHTML =
        '<div class="efl-card-list__inner efl-card-list__inner--6 article"></div>';
      fullWidthItem.classList.add(
        'efl-card-list',
        'efl-card-list--1--full-width'
      );
      fullWidthItem.innerHTML =
        '<div class="efl-card-list__inner article"></div>';
      const moreItemInner = moreItem.querySelector('.efl-card-list__inner');
      const fullWidthItemInner = fullWidthItem.querySelector(
        '.efl-card-list__inner'
      );
      response.searchResults.forEach((cardData, index) => {
        if (index < 6) {
          const horzCardData = bindArticleSessionCardData(cardData, 'vertical');

          moreItemInner.insertAdjacentHTML('beforeend', horzCardData);
        }
        if (index === 6) {
          const fullWidthCardData = bindArticleSessionCardData(
            cardData,
            '1--full-width'
          );

          fullWidthItemInner.insertAdjacentHTML('beforeend', fullWidthCardData);
          fullwidth = true;
        }
      });
      moreCard.appendChild(moreItem);
      if (fullwidth) {
        moreCard.appendChild(fullWidthItem);
      }
      setCardNo();
    } else {
      moreData = false;
    }
  }

  function getSessions(defaultLoad, pageSize, skip) {
    try {
      showLoading();
      isAjaxRuning = true;
      if (!skip) {
        moreData = true;
        skipData = pageSize;
        clearPageData();
      }
      getSessionsCallback(pageSize, skip).then(response => {
        removeLoading();
        isAjaxRuning = false;

        if (response && response !== 'null' && response.filterCount) {
          cardCount.innerText = response.filterCount;
          filterBarType.innerText = filterType;
        } else {
          if (defaultLoad === 'true') {
            cardCount.innerText = 0;
            filterBarType.innerText = filterType;
          }
        }

        if (defaultLoad === 'true') {
          if (
            response &&
            response !== 'null' &&
            response.searchResults.length < 10
          ) {
            moreData = false;
          }
          renderSessionPage(response);
        } else {
          if (
            response &&
            response !== 'null' &&
            response.searchResults.length < 7
          ) {
            moreData = false;
          } else if (
            response &&
            response !== 'null' &&
            response.filterCount <= skip + pageSize
          ) {
            moreData = false;
          }
          renderMoreSession(response);
        }
      });
    } catch (e) {
      throw new Error('Uable to retrive the sessions ::', e);
    }
  }

  function applySessionFilter() {
    getSessions('true', 10, 0); // getSessions(defaultLoad, pageSize, skip)
    // checkFilteredLabel();

    // apply filter analytics
    // applyFilterAnalytics(parentElement);

    // showFirstStep();

    const redirectUrl = `${window.location.origin}${window.location.pathname}`;
    const queryStr = getQueryString('true');

    if (queryStr) {
      window.history.pushState({}, '', `${redirectUrl}?${queryStr}`);
    } else {
      window.history.pushState({}, '', `${redirectUrl}`);
      location.href = redirectUrl;
    }
  }

  function resetSessionFilter() {
    const redirectUrl = `${window.location.origin}${window.location.pathname}`;

    // reset filter analytics
    // resetFilterAnalytics();

    window.history.pushState({}, '', `${redirectUrl}`);
    location.href = redirectUrl;
  }
  function resetFilter() {
    const unselectedValue = [];
    const reset = parentElement.querySelectorAll('input[type=checkbox]');

    for (let i = 0; i < reset.length; i++) {
      if (reset[i].checked) {
        reset[i].checked = false;
        reset[i].closest('div').setAttribute('aria-checked', 'false');
      }
    }

    resetCards({
      resetValue: unselectedValue,
    });

    const redirectUrl = `${window.location.origin}${window.location.pathname}`;

    window.history.pushState({}, '', `${redirectUrl}`);

    // reset filter analytics
    // resetFilterAnalytics();
  }

  function applyDefaultPageFilter(isAjax) {
    const params = new Proxy(new URLSearchParams(window.location.search), {
      get: (searchParams, prop) => searchParams.get(prop),
    });

    const selectedValue = [];
    const selectedGroup = [];

    linkslevel1.forEach(link => {
      const queryVar = link.getAttribute('data-category');

      if (params[queryVar]) {
        const checkBoxs = params[queryVar].split('_');

        checkBoxs.forEach(checkbox => {
          if (selectedValue[`${queryVar}`]) {
            selectedValue[`${queryVar}`].push(checkbox);
          } else {
            selectedValue[`${queryVar}`] = [];
            selectedGroup.push(queryVar);
            selectedValue[`${queryVar}`].push(checkbox);
          }

          parentElement.querySelector(
            `input[value='${checkbox}'`
          ).checked = true;
          // console.log(parentElement.querySelector(`#opt-${checkbox}`).checked);
        });
      }
    });

    if (selectedGroup.length) {
      setTimeout(() => {
        if (isAjax === 'false') {
          toggleCheckbox({
            currentValue: selectedValue,
            groups: selectedGroup,
          });
        } else {
          getSessions('true', 10, 0); // getSessions(defaultLoad, pageSize, skip);
        }
      }, 500);
    }
  }

  window.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    const scrollEle = document.querySelector('.article-session-index__scroll');

    if (scrollEle && !scrollEle.classList.contains('ajax')) {
      return;
    } else if (!scrollEle) {
      return;
    }

    if (
      clientHeight + scrollTop >= scrollHeight - 5 &&
      moreData &&
      !isAjaxRuning
    ) {
      getSessions('false', 7, skipData + 1);
      skipData += 7;
    }
  });
  const hideNoDatafilter = parentElement => {
    const allCards = document.querySelectorAll('[data-filter]');
    const allFilters = parentElement.querySelectorAll('input[type=checkbox]');
    const checkboxValue = [];

    allFilters.forEach(checkbox => {
      checkbox.checked = false;
      checkboxValue.push(checkbox.value);
      checkbox.disabled = true;
      checkbox.classList.add('disable-buttons');
      // checkbox.nextElementSibling.tabIndex = '-1';
      checkbox.closest('div').classList.add('hidden');
    });
    window.addEventListener('DOMContentLoaded', () => {
      const cardCount = document.querySelectorAll('.efl-card').length;
      const allData = [];

      // parentElement.querySelector('#showmeresult').innerHTML = cardCount;

      allCards.forEach(filtercard => {
        const currentCardData = JSON.parse(filtercard.dataset.filter);

        for (const filterdata in currentCardData) {
          const splitData = currentCardData[filterdata].split('|');
          splitData.forEach(data => {
            if (!allData.includes(data)) {
              allData.push(data);
            }
          });
        }
      });

      allData.forEach(availData => {
        if (checkboxValue.find(val => val === availData)) {
          parentElement.querySelector(`#opt-${availData}`).disabled = false;
          parentElement
            .querySelector(`#opt-${availData}`)
            .classList.remove('disable-buttons');
          // parentElement.querySelector(`#opt-${availData}`).nextElementSibling.tabIndex = '0';
          parentElement
            .querySelector(`#opt-${availData}`)
            .closest('div')
            .classList.remove('hidden');
        }
      });
    });
  };

  const hideNoDataAjaxfilter = parentElement => {
    const allCards = document.querySelectorAll('[data-filter]');
    const allFilters = parentElement.querySelectorAll('input[type=checkbox]');
    const checkboxValue = [];

    allFilters.forEach(checkbox => {
      checkbox.checked = false;
      checkboxValue.push(checkbox.value);
      checkbox.disabled = true;
      checkbox.classList.add('disable-buttons');
      // checkbox.nextElementSibling.tabIndex = '-1';
      checkbox.closest('div').classList.add('hidden');
    });
    window.addEventListener('DOMContentLoaded', () => {
      const allData = [];

      allCards.forEach(filtercard => {
        const currentCardData = filtercard.dataset.filter;
        const splitData = currentCardData.split('|');

        splitData.forEach(data => {
          if (!allData.includes(data)) {
            allData.push(data);
          }
        });
      });

      allData.forEach(availData => {
        if (checkboxValue.find(val => val === availData)) {
          parentElement.querySelector(
            `input[value='${availData}'`
          ).disabled = false;
          parentElement
            .querySelector(`input[value='${availData}'`)
            .classList.remove('disable-buttons');
          // parentElement.querySelector(`input[value='${availData}'`).nextElementSibling.tabIndex = '0';
          parentElement
            .querySelector(`input[value='${availData}'`)
            .closest('div')
            .classList.remove('hidden');
        }
      });
      // console.log(checkboxValue);
      // console.log(allData);
    });
  };

  // Find the position of the given element
  const findPos = obj => {
    // eslint-disable-next-line no-unused-vars
    let curleft = 0;
    let curtop = 0;

    if (obj.offsetParent) {
      curleft = obj.offsetLeft;
      curtop = obj.offsetTop;

      // eslint-disable-next-line no-param-reassign, no-cond-assign
      while ((obj = obj.offsetParent)) {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
      }
    }
    return curtop;
  };

  checkboxes.forEach((checkbox, index) => {
    checkbox.addEventListener('change', e => {
      const parent = e.target.parentElement;

      if (e.target.checked === true) {
        parent.ariaChecked = true;
      } else {
        parent.ariaChecked = false;
      }

      const filterBarContainer = document.querySelector(
        '.efl-filter-bar--container'
      );

      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        window.scrollTo(0, findPos(filterBarContainer));
      }

      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        if (filterType === 'sessions' || filterType === 'articles') {
          applySessionFilter();
          // updateFilterBar();
        } else {
          applyFilter();
          // updateFilterBar();
        }
      }

      const fixedHeaderElement = document.querySelector('.global-fixed-header');
      const filterbar = document.querySelector('.efl-index-left-filter');

      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        setTimeout(() => {
          if (fixedHeaderElement && filterbar) {
            fixedHeaderElement.style.top = '-114px';
            filterbar.classList.add('sticky');
          }
        }, 300);
      }
    });
  });

  if (filterType === 'sessions' || filterType === 'articles') {
    const trayContainer = document.querySelector('.efl-page-content__tray');

    if (trayContainer) {
      trayContainer.style.display = 'none';
    }

    // reset filter button action
    resetfilter.addEventListener('click', () => {
      resetSessionFilter();
      // updateFilterBar();
    });
    resetfilter.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        e.preventDefault();
        resetSessionFilter();
      }
    });

    showMeResut.addEventListener('click', e => {
      e.preventDefault();
      applySessionFilter();
      updateFilterBar();
      if (toggleFilterButton.getAttribute('aria-expanded') === 'true') {
        toggleFilterButton.click();
      }
    });
    showMeResut.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        e.preventDefault();
        applySessionFilter();
        updateFilterBar();
        if (toggleFilterButton.getAttribute('aria-expanded') === 'true') {
          toggleFilterButton.click();
        }
      }
    });

    hideNoDataAjaxfilter(parentElement);

    window.addEventListener('DOMContentLoaded', () => {
      applyDefaultPageFilter('true');

      if (window.innerWidth < MOBILE_BREAKPOINT) {
        updateFilterBar();
      }
    });
  } else {
    resetfilter.addEventListener('click', e => {
      e.preventDefault();
      resetFilter();
      if (window.innerWidth < MOBILE_BREAKPOINT) {
        if (toggleFilterButton.getAttribute('aria-expanded') === 'true') {
          toggleFilterButton.click();
        }
      }
      // updateFilterBar();
    });
    resetfilter.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        e.preventDefault();
        resetFilter();
        if (window.innerWidth < MOBILE_BREAKPOINT) {
          if (toggleFilterButton.getAttribute('aria-expanded') === 'true') {
            toggleFilterButton.click();
          }
        }
        // updateFilterBar();
      }
    });

    showMeResut.addEventListener('click', e => {
      e.preventDefault();
      applyFilter();
      updateFilterBar();
      if (toggleFilterButton.getAttribute('aria-expanded') === 'true') {
        toggleFilterButton.click();
      }
    });
    showMeResut.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        e.preventDefault();
        applyFilter();
        updateFilterBar();
        if (toggleFilterButton.getAttribute('aria-expanded') === 'true') {
          toggleFilterButton.click();
        }
      }
    });

    hideNoDatafilter(parentElement);

    window.addEventListener('DOMContentLoaded', () => {
      applyDefaultPageFilter('false');
      if (window.innerWidth < MOBILE_BREAKPOINT) {
        updateFilterBar();
      }
    });
  }

  toggleFilterButton.addEventListener('click', () => {
    if (toggleFilterButton.getAttribute('aria-expanded') === 'true') {
      updateFilterBar();
    } else {
      hideFilterBar();
    }
  });

  toggleFilterButton.addEventListener('keydown', e => {
    if (e.keyCode === 13) {
      e.preventDefault();
      toggleFilterButton.click();
    }
  });

  closeFilterButton.addEventListener('click', event => {
    event.preventDefault();
    updateFilterBar();
  });

  closeFilterButton.addEventListener('keydown', e => {
    if (e.keyCode === 13) {
      e.preventDefault();
      closeFilterButton.click();
    }
  });

  window.addEventListener('resize', () => {
    if (defaultWidth !== window.innerWidth) {
      const filterTagsArray = tagsContainer.querySelectorAll('li');
      filterTagsArray.forEach((tag, index) => {
        tag.classList.remove('hidden');
      });
      tagPagination();
      defaultWidth = window.innerWidth;
    }
  });

  if (window.innerWidth >= MOBILE_BREAKPOINT) {
    hideFilterBar();
  }
};