Efl Index Page Filter

/*eslint-disable */
const filterOpenAnalytics = parentElement => {
  const btnName = parentElement.querySelector('.efl-index-page-filter__sticky--result').innerText;

  window.dataLayer.push({
    event: 'All event',
    event_name: 'filter_opened',
    link_text: btnName,
  });

  // Remove dataLayer event parameters after every event is fired
  window.dataLayer.push({
    event: 'Removal Tag',
    event_name: 'undefined',
    link_text: 'undefined',
  });
};

const filterCloseAnalytics = parentElement => {
  let optionSelected = '';
  const nextStep = parentElement.querySelector('.next-step[aria-expanded=true]');

  if (nextStep) {
    optionSelected = nextStep.querySelector('.title').innerText;
    // optionSelected = `level 1 Option ${optionSelected} selected`;
  }

  window.dataLayer.push({
    event: 'All event',
    event_name: 'filter_opened',
    link_text: 'Cancel',
    item_list_name: optionSelected,
  });

  // Remove dataLayer event parameters after every event is fired
  window.dataLayer.push({
    event: 'Removal Tag',
    event_name: 'undefined',
    link_text: 'undefined',
    item_list_name: 'undefined',
  });
};

const level1OptionAnalytics = (target) => {
  const optName = target.querySelector('.title').innerText;

  window.dataLayer.push({
    event: 'All event',
    event_name: 'filter_opened',
    link_text: optName,
  });

  // Remove dataLayer event parameters after every event is fired
  window.dataLayer.push({
    event: 'Removal Tag',
    event_name: 'undefined',
    link_text: 'undefined',
  });
};

const level2OptionAnalytics = (event, parentElement) => {
  const { target } = event;
  const opt2 = parentElement.querySelector('.next-step[aria-expanded=true]');
  const optName = target.innerText;

  window.dataLayer.push({
    event: 'All event',
    event_name: 'filter_selected',
    link_text: optName,
    item_list_name: opt2.querySelector('.title').innerText
  });

  // Remove dataLayer event parameters after every event is fired
  window.dataLayer.push({
    event: 'Removal Tag',
    event_name: 'undefined',
    link_text: 'undefined',
    item_list_name: 'undefined'
  });
};

const applyFilterAnalytics = (parentElement) => {
  const opt2 = parentElement.querySelector('.next-step[aria-expanded=true]');

  window.dataLayer.push({
    event: 'All event',
    event_name: 'filter_selected',
    link_text: 'Apply Filters',
    item_list_name: opt2.querySelector('.title').innerText
  });

  // Remove dataLayer event parameters after every event is fired
  window.dataLayer.push({
    event: 'Removal Tag',
    event_name: 'undefined',
    link_text: 'undefined',
    item_list_name: 'undefined'
  });
};

const showResultsAnalytics = (parentElement) => {
  const result = parentElement.querySelector('#showmeresult').innerText;

  window.dataLayer.push({
    event: 'All event',
    event_name: 'filter_selected',
    link_text: `SHOW ME ${result} RESULTS`,
  });

  // Remove dataLayer event parameters after every event is fired
  window.dataLayer.push({
    event: 'Removal Tag',
    event_name: 'undefined',
    link_text: 'undefined',
  });
};

const resetFilterAnalytics = () => {
  window.dataLayer.push({
    event: 'All event',
    event_name: 'filter_selected',
    link_text: `RESET FILTERS`,
  });

  // Remove dataLayer event parameters after every event is fired
  window.dataLayer.push({
    event: 'Removal Tag',
    event_name: 'undefined',
    link_text: 'undefined',
  });
};

const filterEvents = parentElement => {
  const allCards = document.querySelectorAll('[data-filter]');
  const applyfilter = parentElement.querySelector('.apply-filters');
  const resetfilter = parentElement.querySelector('.reset-filter');
  const backfilter = parentElement.querySelector('.back-filter');
  const closefilter = parentElement.querySelector('.close-filter');
  const resultfilter = parentElement.querySelector('.result');
  const noResult = parentElement.querySelector('.no-result');
  const linkslevel1 = parentElement.querySelectorAll('.next-step');
  const allFilters = parentElement.querySelector(
    '.efl-index-page-filter__section'
  );
  const ctaBlock = parentElement.querySelector(
    '.efl-index-page-filter__button-group'
  );
  const cancelBlock = parentElement.querySelector(
    '.efl-index-page-filter__cancel'
  );
  const event = new Event('filterupdate');
  const { filterType } = parentElement.dataset;
  let skipData = 18;
  let moreData = true;
  let isAjaxRuning = false;

  function showNextStep(event, obj) {
    const { target } = event;
    // console.log(typeof(target.getAttribute('aria-expanded')));
    if(obj.getAttribute('aria-expanded') === 'false') {
      obj.setAttribute('aria-expanded', 'true');
      obj.tabIndex = -1;
      ctaBlock.classList.add('active');
      cancelBlock.classList.add('active');
      allFilters.classList.add('active');
      const level2Filter = obj.nextElementSibling.querySelectorAll('input:not(.disable-buttons)');

      level2Filter.forEach((option, index) => {
        option.nextElementSibling.addEventListener('keydown', (e) => {
          if (e.keyCode === 40) {
            if (level2Filter[index + 1]) {
              level2Filter[index + 1].nextElementSibling.focus();
            }
          } else if (e.keyCode === 38) {
            if (level2Filter[index - 1]) {
              level2Filter[index - 1].nextElementSibling.focus();
            }
          } else if (e.keyCode === 13) {
            e.target.click();
          }
        });
      });

      // Level 1 filter options - Ananlytics
      level1OptionAnalytics(obj);
    }
  }

  function showFirstStep() {
    linkslevel1.forEach(link => {
      link.setAttribute('aria-expanded', 'false');
      link.tabIndex = 0;
    });
    ctaBlock.classList.remove('active');
    cancelBlock.classList.remove('active');
    allFilters.classList.remove('active');
  }

  function closeFilter() {
    document
      .querySelector('.efl-index-page-filter__sticky')
      .classList.remove('hide-filter');
    document
      .querySelector('.efl-index-page-filter')
      .classList.remove('add-animation');
    document.body.classList.remove('dark-overlay');

    filterCloseAnalytics(parentElement);
  }

  function resultFilter() {
    document
      .querySelector('.efl-index-page-filter')
      .classList.remove('hide-filter');
    document
      .querySelector('.efl-index-page-filter')
      .classList.remove('add-animation');
    document.body.classList.remove('dark-overlay');

    //show results analytics
    showResultsAnalytics(parentElement);

    window.scroll(0,document.querySelector('.efl-page-content__dynamic-placeholder').offsetTop);
  }

  function showChecked() {
    parentElement.querySelector('.filter-count').innerHTML = parentElement.querySelectorAll(
      'input:checked'
    ).length;
  }

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

    parentElement.querySelector('#showmeresult').innerHTML = cardactiveCount.length;
  }

  function checkFilteredLabel() {
    parentElement.querySelectorAll('.next-step').forEach((level1) => {
      const firstFilterOpt = level1
        .nextElementSibling
        .querySelectorAll('input[type=checkbox]:checked');

      if (firstFilterOpt.length) {
        level1.querySelector('.filterslabel').innerText = firstFilterOpt[0]
          .nextElementSibling.innerText;
        level1.querySelector('.filterslabel').classList.add('active');
        level1.querySelector('.title').classList.add('hidden');
        level1.querySelector('.filterscount').classList.remove('active');
        if (firstFilterOpt.length > 1) {
          level1.querySelector('.filterscount').classList.add('active');
          level1.querySelector('.filterscount span').innerText = firstFilterOpt.length - 1;
        }
      } else {
        level1.querySelector('.filterslabel').classList.remove('active');
        level1.querySelector('.title').classList.remove('hidden');
        level1.querySelector('.filterscount').classList.remove('active');
      }
    });
  }

  function toggleCheckbox({ currentValue }) {
    allCards.forEach(filtercard => {
      const currentCardFilterData = JSON.parse(filtercard.dataset.filter);

      for (const filterdata in currentCardFilterData) {
        const data = currentCardFilterData[filterdata].split('|');
        if (
          currentValue.find(
            val =>
            data.includes(val)
          )
        ) {
          filtercard.classList.remove('hidden');
          break;
        } else {
          if (currentValue.length) {
            filtercard.classList.add('hidden');
          } else {
            filtercard.classList.remove('hidden');
          }
        }
      }
    });

    selectedcardcount();
    checkFilteredLabel();
    reRenderLayout();
    // Dispatch the event.
    window.dispatchEvent(event);
  }

  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}`);
      }
    })
  }

  // const displaySessionCount = (cardsLength) => {
  //   const firstCardList = document.querySelector('.efl-card-list');
  //   const titleContainer = firstCardList.querySelector('.efl-card-list__title');
  //   const howManySessions = firstCardList.createElement('div');

  //   howManySessions.innerHTML = `Showing ${cardsLength} Courses`;
  //   howManySessions.className = "efl-card-list--how-many-sessions";

  //   titleContainer.appendChild(howManySessions);
  // };

  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}`);
    });
    switch (cardsLength) {
      case 1:
        cards[0].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        break;
      case 2:
        cards[0].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        break;
      case 3:
        cards[0].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        break;
      case 4:
        cards[0].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        break;
      case 5:
        cards[0].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        break;
      case 6:
        cards[0].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        cards[1].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        break;
      case 7:
        cards[0].classList.replace('efl-card--vertical', 'efl-card--single');
        break;
      case 8:
        cards[0].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        cards[1].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
        break;
      default:
    }
  };

  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.nextElementSibling.querySelectorAll('input[type=checkbox]:checked');

      if (selectedOnly === 'false' || level2opt.length) {
        queryStr += link.getAttribute('aria-controls').replace('filter-', '');
        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;
  }

  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;
  }

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

    linkslevel1.forEach(link => {
      const queryVar = link.getAttribute('aria-controls').replace('filter-', '');

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

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

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

  function applyFilter() {
    const selectedValue = [];
    const checkboxes = parentElement.querySelectorAll('input[type=checkbox]');

    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        selectedValue.push(checkboxes[i].value);
      }
    }

    showChecked();
    toggleCheckbox({
      currentValue: selectedValue,
    });
    //zebraPattern();

    /*document
      .querySelector('.efl-index-page-filter')
      .classList.remove('hide-filter');
    document
      .querySelector('.efl-index-page-filter')
      .classList.remove('add-animation');
    document.body.classList.remove('dark-overlay');
    window.scroll(0,document.querySelector('.efl-page-content__dynamic-placeholder').offsetTop); */

    // 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}`);
    }

  }

  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;
      }
    }

    showChecked();
    resetCards({
      resetValue: unselectedValue,
    });

    //zebraPattern();

    parentElement.querySelectorAll('.next-step').forEach((level1) => {
      level1.querySelector('.filterslabel').classList.remove('active');
      level1.querySelector('.title').classList.remove('hidden');
      level1.querySelector('.filterscount').classList.remove('active');
    });

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

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

    // reset filter analytics
    resetFilterAnalytics();
  }

  function bindArticleSessionCardData(cardData, modifier) {
    const {isVideo, itemUrl, imageUrl, tagName, featuredText, title, description, readTime, publishedDate} = cardData;
    const videoClass = (isVideo) ? 'article-session-card__image--video': '';
    const modifierClass = (modifier) ? `article-session-card--${modifier}`: '';
    const dtVal = (featuredText === '') ? publishedDate: featuredText;
    return `
      <a href="${itemUrl}" class="article-session-card ${modifierClass}" aria-label="${title}">
        <div class="article-session-card__image ${videoClass}">
            <img src="${imageUrl}" loading="lazy"/>
        </div>
        <div class="article-session-card__content">
            <div class="article-session-card__inner">
                <div class="article-session-card__content--category">${tagName}</div>
                <div class="article-session-card__content--title">${title}</div>
                <p class="article-session-card__content--description">${description}</p>
            </div>
            <div class="article-session-card__content--date-wrap">${readTime}&nbsp;&nbsp;–&nbsp;&nbsp;${dtVal}</div>
        </div>
    </a>`;
  }

  function bindSignpostData(cardData, htmlElement) {
    const {publishedDate, itemUrl, imageUrl, title, readTime} = cardData;
    htmlElement.setAttribute('href', itemUrl);
    htmlElement.querySelector('img').setAttribute('href', imageUrl);
    htmlElement.querySelector('h3').innerText = title;
    htmlElement.querySelector('p').innerHTML = `${publishedDate} <span>|</span> ${readTime}`;
  }

  async function getSessionsCallback(pageSize, skip) {
    const { filterUrl } = parentElement.dataset;
    const url = `/Resources/SearchArticles/?taxonomies=${getTaxonomies()}&startingNo=${skip}&pageSize=${pageSize}`;
    // 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('.article-session-index');
    let singleCard = pageElement.querySelector('.article-session-card-list__single');
    let verticalCard = pageElement.querySelector('.article-session-card-list__vertical');
    let firstHorz = pageElement.querySelector('.article-session-card-list .article-session-card-list__horizontal');
    let signPost1 = pageElement.querySelector('.large-signpost-article:first-of-type');
    let signPost2 = pageElement.querySelector('.large-signpost-article:last-of-type');
    let eightCard = pageElement.querySelector('.article-session-index__eight');
    let eightFirst = eightCard.querySelector('.article-session-card-list__horizontal:first-child');
    let eightLast = eightCard.querySelector('.article-session-card-list__horizontal:last-child');
    let moreCard = pageElement.querySelector('.article-session-index__scroll');

    singleCard.innerHTML = '';
    verticalCard.innerHTML = '';
    firstHorz.innerHTML = '';
    if (eightFirst) {
      eightFirst.innerHTML = '';
    }
    if (eightLast) {
      eightLast.innerHTML = '';
    }
    if (signPost1) {
      signPost1.classList.add('hidden');
    }
    if (signPost2) {
      signPost2.classList.add('hidden');
    }
    if (moreCard) {
      moreCard.innerHTML = '';
      moreCard.classList.add('ajax');
    }
  }

  function renderSessionPage(response) {
    let pageElement = document.querySelector('.article-session-index');
    let singleVerCard = pageElement.querySelector('.article-session-card-list__single-vertical');
    let singleCard = pageElement.querySelector('.article-session-card-list__single');
    let verticalCard = pageElement.querySelector('.article-session-card-list__vertical');
    let firstHorz = pageElement.querySelector('.article-session-card-list .article-session-card-list__horizontal');
    let signPost1 = pageElement.querySelector('.large-signpost-article:first-of-type');
    let signPost2 = pageElement.querySelector('.large-signpost-article:last-of-type');
    let eightCard = pageElement.querySelector('.article-session-index__eight');
    let eightFirst = eightCard.querySelector('.article-session-card-list__horizontal:first-child');
    let eightLast = eightCard.querySelector('.article-session-card-list__horizontal:last-child');

    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
          singleCard.innerHTML = bindArticleSessionCardData(cardData, 'single');
        }
        else if (index > 0 && index < 4) {
          // replace vertical card data
          const verticalCardData = bindArticleSessionCardData(cardData, 'vertical');

          verticalCard.insertAdjacentHTML('beforeend', verticalCardData);
        }
        else if (index >= 4 && index < 8) {
          // replace horizontal card data
          const horzCardData = bindArticleSessionCardData(cardData, 'horizontal');

          firstHorz.insertAdjacentHTML('beforeend', horzCardData);
        }
        else if (index === 8) {
          signPost1.classList.remove('hidden');
          bindSignpostData(cardData, signPost1);
        }
        else if (index >= 9 && index <= 12) {
          const horzCardData = bindArticleSessionCardData(cardData, 'horizontal');

          eightFirst.insertAdjacentHTML('beforeend', horzCardData);
        }
        else if (index >= 13 && index <= 16) {
          const horzCardData = bindArticleSessionCardData(cardData, 'horizontal');

          eightLast.insertAdjacentHTML('beforeend', horzCardData);
        }
        else if (index === 17) {
          signPost2.classList.remove('hidden');
          bindSignpostData(cardData, signPost2);
        }
      });
    }
  }

  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 moreCard = document.querySelector('.article-session-index__scroll');

      moreItem.classList.add('article-session-card-list__horizontal');
      response.searchResults.forEach((cardData, index) => {
        if (index < 4) {
          const horzCardData = bindArticleSessionCardData(cardData, 'horizontal');
          moreItem.insertAdjacentHTML('beforeend', horzCardData);
        }
      });
      moreCard.appendChild(moreItem);
    } 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) {
          parentElement.querySelector('#showmeresult').innerHTML = response.filterCount;
          resultfilter.classList.remove('hidden');
          noResult.classList.add('hidden');
        } else {
          if (defaultLoad === 'true') {
            parentElement.querySelector('#showmeresult').innerHTML = 0;
            resultfilter.classList.add('hidden');
            noResult.classList.remove('hidden');
          }
        }
        if (defaultLoad === 'true') {
          if (response && response!== 'null' &&  response.searchResults.length < 18) {
            moreData = false;
          }
          renderSessionPage(response);
        } else {
          if (response && response!== 'null' &&  response.searchResults.length < 4) {
            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', 18, 0); // getSessions(defaultLoad, pageSize, skip)
    showChecked();
    checkFilteredLabel();


    /*document
      .querySelector('.efl-index-page-filter')
      .classList.remove('hide-filter');
    document
      .querySelector('.efl-index-page-filter')
      .classList.remove('add-animation');
    document.body.classList.remove('dark-overlay');
    window.scroll(0,document.querySelector('.article-session-index').offsetTop);*/

    // 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 reset = parentElement.querySelectorAll('input[type=checkbox]');

    // for (let i = 0; i < reset.length; i++) {
    //   if (reset[i].checked) {
    //     reset[i].checked = false;
    //   }
    // }
    // skipData = 18;
    // moreData = true;
    // getSessions('true', 18, 0); 
    // showChecked();

    // parentElement.querySelectorAll('.next-step').forEach((level1) => {
    //   level1.querySelector('.filterslabel').classList.remove('active');
    //   level1.querySelector('.title').classList.remove('hidden');
    //   level1.querySelector('.filterscount').classList.remove('active');
    // });

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

    // reset filter analytics
    resetFilterAnalytics();

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

  const zebraPattern = () => {
    setTimeout(() => {
      const page = document.querySelectorAll('.efl-card-list:not(.hidden)')

      page.forEach((section, index) => {
        if (index % 2 !== 0) {
          section.classList.add('efl-card-list--section-bg');
        } else {
          section.classList.remove('efl-card-list--section-bg');
        }
      })
    }, 650)
  }

  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', 4, skipData + 1);
      skipData += 4;
    }

  });

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

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

  resultfilter.addEventListener('click', resultFilter);

  resultfilter.addEventListener('keydown', (e) => {
    if (e.keyCode === 13) {
      e.preventDefault();
      resultFilter();
      openFilter.focus();
    }
  });

  linkslevel1.forEach(link => {
    link.addEventListener('click', (e) => {
      showNextStep(e, link);
    });

    link.addEventListener('keydown', (e) => {
      if (e.keyCode === 13) {
        e.preventDefault();
        showNextStep(e, link);
        setTimeout(() => {
          e.target.nextElementSibling.querySelector('label').focus();
        }, 100);
      }
    });
  });


  if (filterType === 'sessions' || filterType === 'articles') {
    applyfilter.addEventListener('click', () => {
      applySessionFilter();
      resultfilter.focus();
    });
    applyfilter.addEventListener('keydown', (e) => {
      if (e.keyCode === 13) {
        e.preventDefault();
        applySessionFilter();
        resultfilter.focus();
      }
    });
    resetfilter.addEventListener('click', () => {
      resetSessionFilter();
      resultfilter.focus();
    });
    resetfilter.addEventListener('keydown', (e) => {
      if (e.keyCode === 13) {
        e.preventDefault();
        resetSessionFilter();
        resultfilter.focus();
      }
    });
    window.addEventListener('DOMContentLoaded', () => {
      applyDefaultPageFilter('true');

      const totalCard = document.querySelectorAll(
        '.article-session-card,.large-signpost-article'
      ).length;
      parentElement.querySelector('#showmeresult').innerHTML = totalCard;
    });
  } else {
    applyfilter.addEventListener('click', (e) => {
      applyFilter();
      resultfilter.focus();
    });
    applyfilter.addEventListener('keydown', (e) => {
      if (e.keyCode === 13) {
        e.preventDefault();
        applyFilter();
        resultfilter.focus();
      }
    });
    resetfilter.addEventListener('click', () => {
      resetFilter();
      resultfilter.focus();
    });
    resetfilter.addEventListener('keydown', (e) => {
      if (e.keyCode === 13) {
        e.preventDefault();
        resetFilter();
        resultfilter.focus();
      }
    });
    window.addEventListener('DOMContentLoaded', () => {
      applyDefaultPageFilter('false');
      //zebraPattern();
    });
  }


};

const disablefilter = (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';
  });
  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';
      }
    });
    // console.log(allData);
  });
};

const disableSessionfilter = (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';
  });
  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';
      }
    });
    // console.log(allData);
  });
};

export default parentElement => {
  const openFilter = parentElement.querySelector(
    '.efl-index-page-filter__sticky--content'
  );
  const closeFilter = document.querySelector('.close-filter');
  const stickyFilter = parentElement.querySelector('.efl-index-page-filter__sticky');
  const { filterType } = parentElement.dataset;

  const updateCheckboxLabel = () => {
    const checkboxes = parentElement.querySelectorAll('input[type=checkbox]');

    checkboxes.forEach(checkboxElement => {
      const checkbox = checkboxElement;
      if (checkbox.parentElement.classList.contains('filter-buttons')) {
        const checkboxContainer = checkbox.parentElement;
        checkbox.addEventListener('change', () => {
          if (checkbox.checked) {
            checkboxContainer.ariaChecked = true;
          } else {
            checkboxContainer.ariaChecked = false;
          }
        })
      }
    })
  }

  updateCheckboxLabel();

  const scrollFuncup = () => {
    if (
      window.scrollY + document.querySelector('.efl-index-page-filter__sticky').offsetTop > document.querySelector('.footer-section').offsetTop
    ) {
      stickyFilter.classList.add('hide-filter');
    } else {
      stickyFilter.classList.remove('hide-filter');
    }
  };

  const showFilterPanel = () => {
    const linkslevel1 = parentElement.querySelectorAll('.next-step');
    const allFilters = parentElement.querySelector(
      '.efl-index-page-filter__section'
    );
    const ctaBlock = parentElement.querySelector(
      '.efl-index-page-filter__button-group'
    );
    const cancelBlock = parentElement.querySelector(
      '.efl-index-page-filter__cancel'
    );

    stickyFilter.classList.add('hide-filter');
    document
      .querySelector('.efl-index-page-filter')
      .classList.add('add-animation');
    document.body.classList.add('dark-overlay');
    document.querySelector('.back-filter').classList.remove('active');

    linkslevel1.forEach(link => {
      link.setAttribute('aria-expanded', 'false');
      link.tabIndex = 0;
    });
    ctaBlock.classList.remove('active');
    cancelBlock.classList.remove('active');
    allFilters.classList.remove('active');

    filterOpenAnalytics(parentElement);
    setTimeout(() => {
      parentElement.querySelector('.close-filter').focus();
    },350);
  };

  /* const hideFilterPanel = () => {
    document
      .querySelector('.efl-index-page-filter')
      .classList.remove('add-animation');
    stickyFilter.classList.remove('hide-filter');
    document.body.classList.remove('dark-overlay');

    filterCloseAnalytics(parentElement);
  }; */

  document.addEventListener('click', (e) => {
    if(!(e.target.closest('.efl-index-page-filter__sticky') ||  e.target.closest('.efl-index-page-filter'))) {
      const filterpop = document.querySelector('.efl-index-page-filter');

      if (filterpop.classList.contains('add-animation')) {
        filterCloseAnalytics(parentElement);
      }
      document
        .querySelector('.efl-index-page-filter__sticky')
        .classList.remove('hide-filter');
      document
        .querySelector('.efl-index-page-filter')
        .classList.remove('add-animation');
      document.body.classList.remove('dark-overlay');
    }
  });


  openFilter.addEventListener('click', showFilterPanel);

  openFilter.addEventListener('keydown', (e) => {
    if (e.keyCode === 13) {
      e.preventDefault();
      showFilterPanel();
      setTimeout(() => {
        parentElement.querySelector('.close-filter').focus();
      },350);
    }
  });

  // closeFilter.addEventListener('click', hideFilterPanel);
  window.addEventListener('scroll', scrollFuncup);

  filterEvents(parentElement);
  // filtersectionEvents(parentElement);
  if (filterType === 'sessions' || filterType === 'articles') {
    // console.log('session');
    disableSessionfilter(parentElement);
  } else {
    disablefilter(parentElement);
  }

  window.addEventListener('DOMContentLoaded', () => {
    const filterOpts = parentElement.querySelectorAll('.filter-buttons > input:not(.disable-buttons)');

    filterOpts.forEach(filterOpt => {
      filterOpt.nextElementSibling.addEventListener('click', event => {
        level2OptionAnalytics(event, parentElement);
      });
    });
    scrollFuncup();
  });
};