Full Width Tag Cloud: Efl Grey

/* eslint-disable no-param-reassign */
export default parentElement => {
  const rolloverCategories = parentElement.querySelectorAll(
    '.full-width-tag-cloud__rollover > *'
  );
  const tags = parentElement.querySelectorAll(
    '.full-width-tag-cloud__inner > *'
  );
  const instruction = parentElement.querySelector(
    '.full-width-tag-cloud__instruction'
  );

  // set default tag color
  tags.forEach(tag => {
    tag.style.borderColor = tag.dataset.color;
  });

  // global varibale to track state of active category
  let highlightedCategory = null;
  let focused = false;

  const resetActiveTags = () => {
    tags.forEach(tag => {
      tag.style.color = null;
      tag.style.backgroundColor = null;
      tag.style.opacity = null;
      // tag.ariaSelected = false;
    });
  };

  // set the active highlighted category
  const highlightActiveTags = category => {
    const categoryVal = category.dataset.value;
    const categoryColor = category.dataset.color;

    tags.forEach(tag => {
      const tagType = tag.dataset.type;

      if (tagType === categoryVal) {
        tag.style.backgroundColor = categoryColor;
        tag.style.color = '#FFF';
        // tag.ariaSelected = true;
      } else {
        tag.style.opacity = 0.2;
      }
    });
  };

  rolloverCategories.forEach(categoryElement => {
    const categoryColor = categoryElement.dataset.color;
    const indicator = categoryElement.querySelector('span');

    indicator.style.backgroundColor = categoryColor;

    // Mobile Event Listener
    const handleMouseLeave = () => {
      resetActiveTags();
      categoryElement.removeEventListener('mouseleave', handleMouseLeave, true);
    };

    const handleMouseOver = () => {
      highlightActiveTags(categoryElement);

      categoryElement.addEventListener('mouseleave', handleMouseLeave, true);
    };
    // Desktop Event listener

    const handleClick = e => {
      e.preventDefault();
      // toggle the active state;
      if (highlightedCategory === e.target.dataset) {
        highlightedCategory = 'null';
        resetActiveTags();
      } else {
        highlightedCategory = e.target.dataset;
        resetActiveTags();
        highlightActiveTags(e.target);
      }
    };

    const handleClickOff = e => {
      if (!e.target.closest('.full-width-tag-cloud__rollover')) {
        highlightedCategory = 'null';
        resetActiveTags();
      }
    };

    const responsiveChanges = () => {
      // Execute different event listener based on dimensions
      if (window.innerWidth > 820) {
        instruction.textContent = instruction.dataset.copy;
        categoryElement.addEventListener('mouseover', handleMouseOver, true);
        categoryElement.removeEventListener('click', handleClick, true);
        document.removeEventListener('click', handleClickOff, true);
      } else {
        instruction.textContent = instruction.dataset.copyMobile;
        categoryElement.addEventListener('click', handleClick, true);
        document.addEventListener('click', handleClickOff, true);
        categoryElement.removeEventListener('mouseover', handleMouseOver, true);
        categoryElement.removeEventListener(
          'mouseleave',
          handleMouseLeave,
          true
        );
      }
    };

    // Keyboard Event Listeners

    const handleBlur = () => {
      resetActiveTags();
      categoryElement.removeEventListener('blur', handleBlur, true);
      responsiveChanges();
      focused = false;
    };

    const handleFocus = () => {
      highlightActiveTags(categoryElement);
      categoryElement.addEventListener('blur', handleBlur, true);
      focused = true;
    };

    categoryElement.addEventListener('blur', handleBlur, true);
    categoryElement.addEventListener('focus', handleFocus, true);

    parentElement.addEventListener('mouseover', event => {
      const { target } = event;

      tags.forEach(tag => {
        if (tag === target && !focused) {
          tag.style.backgroundColor = tag.dataset.color;
          tag.style.color = '#fff';
          // tag.ariaSelected = true;
        }
      });
    });

    parentElement.addEventListener('mouseout', event => {
      const { target } = event;

      tags.forEach(tag => {
        if (tag === target && !focused) {
          tag.style.backgroundColor = null;
          tag.style.color = null;
          tag.style.borderColor = tag.dataset.color;
          // tag.ariaSelected = false;
        }
      });
    });

    responsiveChanges();

    // Calibration for resize, rotating screen
    window.addEventListener('resize', () => {
      // reset the tags state when resizing
      responsiveChanges();
    });
  });
};