Legends Squad Filter Menu

import Glider from '../../behaviours/carousel/glider/glider';

/*eslint-disable */
const filtersquadEvents = parentElement => {
  const allCards = document.querySelectorAll('[data-filter]');
  const applysquad = parentElement.querySelector('.apply-filters');
  const resetfilter = parentElement.querySelector('.reset-filter');

  function showChecked() {
    document.getElementById('number').innerHTML = document.querySelectorAll(
      'input:checked'
    ).length;
  }

  function selectedcardcount() {
    const divselectedcount = document.querySelectorAll('.legend-player-count');
    const cardselectedCount = [].slice.call(divselectedcount);
    const cardactiveCount = cardselectedCount.filter(function(el) {
      return el.style.display !== 'none';
    });

      document.getElementById('showmeresult').innerHTML = cardactiveCount.length;
    }

    function checkedgetsquadlabel({ getsquadlabel }) {
      const getvaluesquad = getsquadlabel[0];

      if (getsquadlabel.length === 0) {
      document.getElementById('getcheckedsquad').innerText = 'All Squads';
    } else if (getsquadlabel.length === 1) {
      document.getElementById('getcheckedsquad').innerText = getvaluesquad;
      document.querySelector('.filtersquadscount').style.display = 'none';
    } else {
      document.getElementById('getcheckedsquad').innerText = getvaluesquad;
      document.querySelector('.filtersquadscount').style.display = 'block';
      document.getElementById('filtersquadsnumber').innerText =
        getsquadlabel.length - 1;
    }
  }

  function checkedgetgenderlabel({ getgenderlabel }) {
    const getvaluegender = getgenderlabel[0];

    if (getgenderlabel.length === 0) {
      document.getElementById('getcheckedgender').innerText = 'All Genders';
    } else if (getgenderlabel.length === 1) {
      document.getElementById('getcheckedgender').innerText = getvaluegender;
      document.querySelector('.filtergenderscount').style.display = 'none';
    } else {
      document.getElementById('getcheckedgender').innerText = getvaluegender;
      document.querySelector('.filtergenderscount').style.display = 'block';
      document.getElementById('filtergendersnumber').innerText =
        getgenderlabel.length - 1;
    }
  }

  function checkedgetpositionslabel({ getpositionslabel }) {
    const getvaluepositions = getpositionslabel[0];

    if (getpositionslabel.length === 0) {
      document.getElementById('getcheckedpositions').innerText =
        'All Positions';
    } else if (getpositionslabel.length === 1) {
      document.getElementById(
        'getcheckedpositions'
      ).innerText = getvaluepositions;
      document.querySelector('.filterpositionscount').style.display = 'none';
    } else {
      document.getElementById(
        'getcheckedpositions'
      ).innerText = getvaluepositions;
      document.querySelector('.filterpositionscount').style.display = 'block';
      document.getElementById('filterpositionsnumber').innerText =
        getpositionslabel.length - 1;
    }
  }

  function getcheckedfilter() {
    const checkedsquadfilter = document.querySelectorAll('.allsquadsfilter');
    const checkedgenderfilter = document.querySelectorAll('.allgendersfilter');
    const checkedpositionsfilter = document.querySelectorAll(
      '.allpositionsfilter'
    );
    const squadfilteredValue = [];
    const genderfilteredValue = [];
    const positionsfilteredValue = [];

    for (let i = 0; i < checkedsquadfilter.length; i++) {
      if (checkedsquadfilter[i].checked) {
        squadfilteredValue.push(
          checkedsquadfilter[i].nextElementSibling.textContent
        );
      }
    }

    for (let i = 0; i < checkedgenderfilter.length; i++) {
      if (checkedgenderfilter[i].checked) {
        genderfilteredValue.push(
          checkedgenderfilter[i].nextElementSibling.textContent
        );
      }
    }

    for (let i = 0; i < checkedpositionsfilter.length; i++) {
      if (checkedpositionsfilter[i].checked) {
        positionsfilteredValue.push(
          checkedpositionsfilter[i].nextElementSibling.textContent
        );
      }
    }

    checkedgetsquadlabel({
      getsquadlabel: squadfilteredValue,
    });

    checkedgetgenderlabel({
      getgenderlabel: genderfilteredValue,
    });

    checkedgetpositionslabel({
      getpositionslabel: positionsfilteredValue,
    });
  }

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

      for (const filterdata in currentCardFilterData) {
        if (
          currentValue.find(
            val =>
              val === filterdata && currentCardFilterData[filterdata] === true
          )
        ) {
          filtercard.style.removeProperty('display');
          break;
        } else {
          filtercard.style.setProperty('display', 'none');
        }
      }
    });

    selectedcardcount();
    getcheckedfilter();
  }

  function resetCards(resetValue) {
    const resetcards = document.querySelectorAll('[data-filter]');

    if (resetValue.length === undefined) {
      for (let i = 0; i < resetcards.length; i += 1) {
        resetcards[i].style.display = 'flex';
      }
    }

    selectedcardcount();
  }

  applysquad.onclick = function getChecked() {
    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,
    });
  };

  resetfilter.onclick = function getChecked() {
    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,
    });

    document.getElementById('getcheckedsquad').innerText = 'All Squads';
    document.getElementById('getcheckedgender').innerText = 'All Genders';
    document.getElementById('getcheckedpositions').innerText = 'All Positions';
    document.querySelector('.filtersquadscount').style.display = 'none';
    document.querySelector('.filtergenderscount').style.display = 'none';
    document.querySelector('.filterpositionscount').style.display = 'none';
  };
};

const filtersectionEvents = parentElement => {
  const allsquad = parentElement.querySelector('#all-squads');
  const allgender = parentElement.querySelector('#all-genders');
  const allposition = parentElement.querySelector('#all-positions');
  const backfilter = parentElement.querySelector('.back-filter');
  const applyfilter = parentElement.querySelector('.apply-filters');
  const closefilter = parentElement.querySelector('.close-filter');
  const resultfilter = parentElement.querySelector('.result');

  function showAllSquad() {
    document.getElementById('all-squads-filter').style.display = 'block';
    document.getElementById('all-genders-filter').style.display = 'none';
    document.getElementById('all-positions-filter').style.display = 'none';
    document.getElementById('all-genders').style.display = 'none';
    document.getElementById('all-positions').style.display = 'none';
    document.querySelector('.back-filter').style.display = 'flex';
    document.querySelector('.close-filter').style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--results'
    ).style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--apply-filter'
    ).style.display = 'block';
    document.querySelector('.filter-squads').classList.add('active-line');
    document.querySelector('.filter-squads').classList.remove('squads-line');
    document.querySelector('.squads-list').classList.remove('squads-next');
  }

  function showAllGender() {
    document.getElementById('all-squads-filter').style.display = 'none';
    document.getElementById('all-genders-filter').style.display = 'block';
    document.getElementById('all-positions-filter').style.display = 'none';
    document.getElementById('all-squads').style.display = 'none';
    document.getElementById('all-positions').style.display = 'none';
    document.querySelector('.back-filter').style.display = 'flex';
    document.querySelector('.close-filter').style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--results'
    ).style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--apply-filter'
    ).style.display = 'block';
    document.querySelector('.filter-genders').classList.add('active-line');
    document.querySelector('.filter-genders').classList.remove('genders-line');
    document.querySelector('.genders-list').classList.remove('genders-next');
  }

  function showAllPositions() {
    document.getElementById('all-squads-filter').style.display = 'none';
    document.getElementById('all-genders-filter').style.display = 'none';
    document.getElementById('all-positions-filter').style.display = 'block';
    document.getElementById('all-squads').style.display = 'none';
    document.getElementById('all-genders').style.display = 'none';
    document.querySelector('.back-filter').style.display = 'flex';
    document.querySelector('.close-filter').style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--results'
    ).style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--apply-filter'
    ).style.display = 'block';
    document.querySelector('.filter-positions').classList.add('active-line');
    document
      .querySelector('.filter-positions')
      .classList.remove('positions-line');
    document
      .querySelector('.positions-list')
      .classList.remove('positions-next');
  }

  function closeAllSquad() {
    document.getElementById('all-squads-filter').style.display = 'none';
    document.getElementById('all-genders-filter').style.display = 'none';
    document.getElementById('all-positions-filter').style.display = 'none';
    document.getElementById('all-squads').style.display = 'block';
    document.getElementById('all-genders').style.display = 'block';
    document.getElementById('all-positions').style.display = 'block';
    document.querySelector('.back-filter').style.display = 'none';
    document.querySelector('.close-filter').style.display = 'flex';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--results'
    ).style.display = 'flex';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--apply-filter'
    ).style.display = 'none';
    document.querySelector('.filter-squads').classList.add('squads-line');
    document.querySelector('.filter-genders').classList.add('genders-line');
    document.querySelector('.filter-positions').classList.add('positions-line');
    document.querySelector('.filter-squads').classList.remove('active-line');
    document.querySelector('.filter-genders').classList.remove('active-line');
    document.querySelector('.filter-positions').classList.remove('active-line');
    document.querySelector('.squads-list').classList.add('squads-next');
    document.querySelector('.genders-list').classList.add('genders-next');
    document.querySelector('.positions-list').classList.add('positions-next');
  }

  function applyFilter() {
    document
      .querySelector('.legends-squad-filter')
      .classList.remove('hide-filter');
    document
      .querySelector('.legends-squad-filter-menu')
      .classList.remove('add-animation');
    document.body.classList.remove('dark-overlay');
  }

  function closeFilter() {
    document
      .querySelector('.legends-squad-filter')
      .classList.remove('hide-filter');
    document
      .querySelector('.legends-squad-filter-menu')
      .classList.remove('add-animation');
    document.body.classList.remove('dark-overlay');
  }

  function resultFilter() {
    document
      .querySelector('.legends-squad-filter')
      .classList.remove('hide-filter');
    document
      .querySelector('.legends-squad-filter-menu')
      .classList.remove('add-animation');
    document.body.classList.remove('dark-overlay');
  }

  allsquad.addEventListener('click', showAllSquad);
  allgender.addEventListener('click', showAllGender);
  allposition.addEventListener('click', showAllPositions);
  backfilter.addEventListener('click', closeAllSquad);
  applyfilter.addEventListener('click', applyFilter);
  closefilter.addEventListener('click', closeFilter);
  resultfilter.addEventListener('click', resultFilter);
};

const disablefilter = () => {
  const disableCards = document.querySelectorAll('[data-filter]');
  const selecteachsquadfilters = document.querySelectorAll(
    '#all-squads-filter input'
  );
  const firstelementsquad = selecteachsquadfilters[0];
  const selecteachgenderfilters = document.querySelectorAll(
    '#all-genders-filter input'
  );
  const firstelementgender = selecteachgenderfilters[0];
  const selecteachpositionfilters = document.querySelectorAll(
    '#all-positions-filter input'
  );
  const firstelementposition = selecteachpositionfilters[0];

  selecteachsquadfilters.forEach(selecteachsquadfilter => {
    selecteachsquadfilter.addEventListener('click', function() {
      const firstfiltersquad = [].slice.call(selecteachsquadfilters, 1);

      if (selecteachsquadfilter.id === firstelementsquad.id) {
        for (let i = 0; i < firstfiltersquad.length; i++) {
          firstfiltersquad[i].checked = false;
        }
      } else {
        firstelementsquad.checked = false;
      }
    });
  });

  selecteachgenderfilters.forEach(selecteachgenderfilter => {
    selecteachgenderfilter.addEventListener('click', function() {
      const firstfiltergender = [].slice.call(selecteachgenderfilters, 1);

      if (selecteachgenderfilter.id === firstelementgender.id) {
        for (let i = 0; i < firstfiltergender.length; i++) {
          firstfiltergender[i].checked = false;
        }
      } else {
        firstelementgender.checked = false;
      }
    });
  });

  selecteachpositionfilters.forEach(selecteachpositionfilter => {
    selecteachpositionfilter.addEventListener('click', function() {
      const firstfilterposition = [].slice.call(selecteachpositionfilters, 1);

      if (selecteachpositionfilter.id === firstelementposition.id) {
        for (let i = 0; i < firstfilterposition.length; i++) {
          firstfilterposition[i].checked = false;
        }
      } else {
        firstelementposition.checked = false;
      }
    });
  });

  window.onload = function() {
    const cardCount = document.querySelectorAll('.legend-player-count').length;

    document.getElementById('showmeresult').innerHTML = cardCount;

    const filteroptions = document.querySelectorAll('input[type=checkbox]');

    for (let i = 0; i < filteroptions.length; i++) {
      filteroptions[i].disabled = true;
      filteroptions[i].classList.add('disable-buttons');
    }

    disableCards.forEach(filtercard => {
      const currentCardDisableData = JSON.parse(filtercard.dataset.filter);

      Object.keys(currentCardDisableData).forEach(filterdata => {
        if (currentCardDisableData[filterdata] === true) {
          document.querySelector(`#${filterdata}`).disabled = false;
          document
            .querySelector(`#${filterdata}`)
            .classList.remove('disable-buttons');
        }
      });
    });
  };
};
const getLegendsCarouselElement = legendsElement => {
  if (!legendsElement) {
    return false;
  }
  const carouselId = legendsElement.getAttribute('data-legends-attr');
  const carouselElement = document.querySelector(
    `[data-carousel-attr=carousel-${carouselId}]`
  );
  return carouselElement;
};
const setUpLegendsGlider = ({ curouselElement }) => {
  const navElement = getLegendsCarouselElement(curouselElement);
  const curoselObj = curouselElement;
  if (!navElement) {
    return false;
  }
  const prevButton = navElement.querySelector('.tabbed-carousel__prev');
  const nextButton = navElement.querySelector('.tabbed-carousel__next');
  const pagination = navElement.querySelector('.tabbed-carousel__pagination');
  const defaultSettings = {
    slidesToShow: 1,
    slidesToScroll: 1,
    scrollLock: true,
    draggable: true,
    arrows: {
      prev: prevButton,
      next: nextButton,
    },
    dots: pagination,
    responsive: [
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 900,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };
  // When our tabs are changed we destroy the current carousel and create a new one.
  // However, we want to be able to reuse the arrows for the new carousel, but glider
  // does not properly detach events when a carousel is destroyed. To get around this we are
  // listening for the destroy event, removing the current arrows (with events attached) and
  // replacing them with new ones so that, when a new carousel is created it has the correct
  // events attached.
  curouselElement.addEventListener('glider-destroy', () => {
    const arrowContainer = navElement.querySelector(
      '.tabbed-carousel__arrows-wrap'
    );
    [prevButton, nextButton].forEach(button => {
      const clone = button.cloneNode(true);
      arrowContainer.appendChild(clone);
      button.remove();
    });
  });
  // added condtion to hide pagination when only one page available
  if (curoselObj.children.length < 2) {
    // eslint-disable-next-line no-param-reassign
    navElement.querySelector('.carousel-nav-block').style.display = 'none';
  } else {
    // eslint-disable-next-line no-param-reassign
    navElement.querySelector('.carousel-nav-block').style.display = 'block';
  }
  return new Glider(curouselElement, {
    ...defaultSettings,
  });
};
const dynamicCarousel = () => {
  const allLegendsGroup = document.querySelectorAll('[data-legends-attr]');
  allLegendsGroup.forEach(group => {
    let divs = group.querySelectorAll('.legends-player-profile');
    let newDivs = Array.from(divs);
    let curouselDiv = '';
    for (let i = 0; i < newDivs.length; i += 4) {
      // console.log(i);
      if (i + 4 <= newDivs.length && newDivs.length >= 4) {
        curouselDiv += `<div class="new">${newDivs[i].outerHTML}`;
        curouselDiv += newDivs[i + 1].outerHTML;
        curouselDiv += newDivs[i + 2].outerHTML;
        curouselDiv += newDivs[i + 3].outerHTML;
        curouselDiv += `</div>`;
        if (newDivs.length > 4) {
          curouselDiv += `<div class="new">`;
        }
      } else if (newDivs.length <= 4) {
        curouselDiv += `<div class="new">${newDivs[i].outerHTML}`;
        if (newDivs[i + 1]) {
          curouselDiv += newDivs[i + 1].outerHTML;
        }
        if (newDivs[i + 2]) {
          curouselDiv += newDivs[i + 2].outerHTML;
        }
        curouselDiv += `</div>`;
      } else {
        if (newDivs[i - 3] && i + 3 < newDivs.length) {
          curouselDiv += newDivs[i - 3].outerHTML;
        }
        if (newDivs[i - 2] && i + 2 < newDivs.length) {
          curouselDiv += newDivs[i - 2].outerHTML;
        }
        curouselDiv += `${newDivs[newDivs.length - 1].outerHTML}</div>`;
      }
    }
    group.innerHTML = curouselDiv;
  });

  const allCarouselElements = document.querySelectorAll('[data-legends-attr]');
  const allCarousel = [];
  allCarouselElements.forEach(curouselElement => {
    let carouselId = curouselElement.getAttribute('data-legends-attr');
    allCarousel[carouselId] = setUpLegendsGlider({ curouselElement });
    allCarousel[carouselId].updateControls();
  });
};

export default parentElement => {
  filtersquadEvents(parentElement);
  filtersectionEvents(parentElement);
  disablefilter(parentElement);
  // window.addEventListener('resize', () => resizeRecentPlayerBlock());
  if (window.innerWidth < 820) {
    dynamicCarousel();
  } else {
    const allCarouselElements = document.querySelectorAll(
      '[data-carousel-attr]'
    );
    allCarouselElements.forEach(navElement => {
      navElement.querySelector('.carousel-nav-block').style.display = 'none';
    });
  }
  document.addEventListener('click', (e) => {
    if(!(e.target.closest('.legends-squad-filter-menu') ||  e.target.closest('.legends-squad-filter'))) {
      document
        .querySelector('.legends-squad-filter')
        .classList.remove('hide-filter');
      document
        .querySelector('.legends-squad-filter-menu')
        .classList.remove('add-animation');
      document.body.classList.remove('dark-overlay');
    }
  });
};