Recent Players Squad

import customSelect from '../../behaviours/select/custom-select';

const MOBILE_BREAKPOINT = 800;
const recentPlayerSquadSelect = document.querySelector(
  '[data-behaviour="recent-players-squad-selection"]'
);

if (window.innerWidth >= MOBILE_BREAKPOINT && recentPlayerSquadSelect) {
  const recentPlayerSelectBox = document
    .querySelector('.recent-players-squad')
    .querySelector('.custom-select');

  if (recentPlayerSelectBox) {
    customSelect(recentPlayerSelectBox);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  function getUrlParameters(parameter, staticURL, decode) {
    const currLocation = staticURL.length ? staticURL : window.location.search;

    if (!currLocation) {
      return null;
    }

    const parArr = currLocation.split('?')[1].split('&');
    const returnBool = true;

    for (let i = 0; i < parArr.length; i++) {
      const parr = parArr[i].split('=');

      if (parr[0] === parameter) {
        return decode ? decodeURIComponent(parr[1]) : parr[1];
      }
    }

    if (!returnBool) {
      return false;
    }

    return null;
  }

  function getStringValue(parameter, currLocation) {
    if (!currLocation) {
      return null;
    }

    const parArr = currLocation.split('?')[1].split('&');
    const returnBool = true;

    for (let i = 0; i < parArr.length; i++) {
      const parr = parArr[i].split('=');

      if (parr[0] === parameter) {
        return parr[1];
      }
    }

    if (!returnBool) {
      return false;
    }

    return null;
  }

  const getDropdownIds = getUrlParameters('sqd', '');
  const getSelectBoxID = document.querySelector('#recent-players-squad-select');
  const getCurrentDropdown = document.querySelector('.select-styled');

  if (getDropdownIds) {
    getSelectBoxID.querySelectorAll('option').forEach(option => {
      if (getStringValue('sqd', option.value) === getDropdownIds) {
        option.setAttribute('selected', 'selected');
        getCurrentDropdown.innerText = getDropdownIds;
        getCurrentDropdown.setAttribute('rel', option.value);
      } else {
        option.removeAttribute('selected');
      }
    });

    document.querySelectorAll('.select-options > li').forEach(option => {
      option.removeAttribute('style');
      if (
        getStringValue('sqd', option.getAttribute('rel')) === getDropdownIds
      ) {
        // eslint-disable-next-line no-param-reassign
        option.style.display = 'none';
      }
    });
  }
});

export default parentElement => {
  const ENTER_KEY_CODE = 13;

  // add data-behavior hero-carousel-with-squad-selection for styling settings.

  const heroCarouselElement = document.querySelector(
    '[data-behavior="hero-carousel"]'
  );

  const heroBannerElement = document.querySelector('.banner');

  if (heroCarouselElement) {
    heroCarouselElement.dataset.behavior = 'hero-carousel-with-squad-selection';
  }

  if (heroBannerElement) {
    heroBannerElement.dataset.behavior = 'hero-carousel-with-squad-selection';
  }

  const resizeRecentPlayerBlock = () => {
    const trayWidth = document.querySelector('.page-content__tray').clientWidth;

    document.querySelector(
      '.recent-players-squad'
    ).style.width = `${trayWidth}px`;
  };

  resizeRecentPlayerBlock();

  if (window.innerWidth >= MOBILE_BREAKPOINT) {
    const optionSelect = document.querySelectorAll('.select-options li');
    const optionTimer = setInterval(() => {
      if (optionSelect) {
        parentElement.querySelectorAll('.select-options li').forEach(option => {
          option.addEventListener('click', event => {
            event.stopPropagation();
            // const opt = `?sqd=${event.target.getAttribute('rel')}`;

            // eslint-disable-next-line no-restricted-globals
            location.href = `${location.origin}${event.target.getAttribute(
              'rel'
            )}`;
            // console.log(event.target.getAttribute('rel'));
          });

          option.addEventListener('keydown', event => {
            if (event.keyCode === ENTER_KEY_CODE) {
              event.preventDefault();
              // eslint-disable-next-line no-restricted-globals
              location.href = `${location.origin}${event.target.getAttribute(
                'rel'
              )}`;
            }
          });
        });
        clearInterval(optionTimer);
      }
    }, 500);

    document.addEventListener('click', event => {
      event.stopPropagation();
    });
  } else {
    parentElement
      .querySelector('.custom-select')
      .addEventListener('change', event => {
        event.stopPropagation();
        // const opt = `?sqd=${event.target.value}`;

        // eslint-disable-next-line no-restricted-globals
        location.href = `${location.origin}${event.target.value}`;
        // console.log(`${event.target.value}`);
      });
  }
  window.addEventListener('resize', () => resizeRecentPlayerBlock());
};