Efl Global Notifications Tray: Default

import { Rive, Fit, Layout } from '@rive-app/canvas';
import { notificationAnimation } from '../efl-global-notifications/efl-global-notifications';

export default parentElement => {
  const notificationIcon = document.querySelector(
    '.global-site-navigation__level1.site-notification > a'
  );
  const MOBILE_BREAKPOINT = 820;
  const body = document.querySelector('body');
  const hamburger = document.querySelector('[aria-controls="main-nav"]');
  const closeBtns = parentElement.querySelectorAll(
    '.efl-global-notifications-tray__close'
  );
  const moreLink = parentElement.querySelector(
    '.efl-global-notifications-tray__wrapper--morelink'
  );
  const notifications = parentElement.querySelectorAll(
    '.efl-global-notifications'
  );
  const noNotificationIcon = parentElement.querySelector(
    '#no-notification-rive'
  );
  const noNotification = parentElement.querySelector(
    '.efl-global-notifications-tray__no-notification'
  );
  const newNotification = parentElement.querySelector(
    '.efl-global-notifications-tray__new-notification'
  );
  const notificationcloseBtn = parentElement.querySelectorAll(
    '.efl-global-notifications__close'
  );
  const totalActiveNotification = parentElement.querySelectorAll(
    '.efl-global-notifications:not(.hidden)'
  );
  const notifyBell = document.querySelector(
    '.global-site-navigation__level1.site-notification'
  );
  const shadow1 = parentElement.querySelector(
    '.efl-global-notifications-tray__shadow1'
  );
  const shadow2 = parentElement.querySelector(
    '.efl-global-notifications-tray__shadow2'
  );

  const loadFirstNotification = () => {
    const notHiddenNotification = parentElement.querySelectorAll(
      '.efl-global-notifications:not(.hidden)'
    );
    const hiddenNotification = parentElement.querySelectorAll(
      '.efl-global-notifications.hidden'
    );
    const firstNotification = notHiddenNotification[0];
    const moreNotifications = notHiddenNotification.length;

    if (moreLink) {
      moreLink.innerHTML = `${moreNotifications - 1} more notifications`;
    }

    if (hiddenNotification) {
      hiddenNotification.forEach(element => {
        element.classList.remove('firstNotification');
      });
    }
    if (firstNotification) {
      firstNotification.classList.add('firstNotification');
    }

    const priorityThree = parentElement.querySelector(
      '.efl-global-notifications.priority-3.firstNotification'
    );

    setTimeout(() => {
      if (priorityThree && window.innerWidth > MOBILE_BREAKPOINT) {
        parentElement.style.maxHeight = '355px'; // eslint-disable-line no-param-reassign
      } else {
        parentElement.style.maxHeight = ''; // eslint-disable-line no-param-reassign
      }
    }, 300);
  };

  const loadNoNotification = () => {
    const total = parentElement.querySelectorAll(
      '.efl-global-notifications:not(.hidden)'
    );

    if (!total.length) {
      const lyout = new Layout({
        fit: Fit.Cover,
      });

      const riveAnimation = new Rive({
        src: '/assets/example-content/quiz_notification.riv',
        canvas: noNotificationIcon,
        layout: lyout,
        onLoad: () => {
          riveAnimation.resizeDrawingSurfaceToCanvas();
        },
      });

      riveAnimation.play('Active');
    } else {
      const firstNotification = notifications[0];
      const { iconType } = firstNotification.dataset;
      const riveCanvas = document.createElement('canvas');
      const riveDiv = firstNotification.querySelector(
        '.efl-global-notifications__wrapper--icon'
      );

      riveDiv.innerHTML = '';

      riveCanvas.width = '60';
      riveCanvas.height = '60';
      riveCanvas.id = `rive-notification-0`;
      riveCanvas.className = `rive-${iconType}`;
      riveDiv.appendChild(riveCanvas);

      notificationAnimation(parentElement, iconType, riveCanvas);
    }
  };

  const NotificationMarkAsRead = () => {
    let eflGlobalNotifications = [];

    totalActiveNotification.forEach(item => {
      const { notificationId } = item.dataset;
      const notificationDetail = `{"id": "${notificationId}","read": true,"close": false}`;

      if (localStorage.getItem('eflGlobalNotifications')) {
        eflGlobalNotifications = JSON.parse(
          localStorage.getItem('eflGlobalNotifications')
        );
        const idExist = eflGlobalNotifications.find(
          val => val.id === notificationId
        );

        if (!idExist) {
          eflGlobalNotifications[eflGlobalNotifications.length] = JSON.parse(
            notificationDetail
          );
          localStorage.setItem(
            'eflGlobalNotifications',
            JSON.stringify(eflGlobalNotifications)
          );
        }

        if (idExist) {
          item.classList.add('read');
        }
      } else {
        localStorage.setItem(
          'eflGlobalNotifications',
          `[${notificationDetail}]`
        );
      }
    });
    if (notifyBell) {
      notifyBell.classList.remove('new');
    }
  };

  const isNewNotification = () => {
    const eflGlobalNotifications = localStorage.getItem(
      'eflGlobalNotifications'
    );

    if (eflGlobalNotifications) {
      const notificationJson = JSON.parse(
        localStorage.getItem('eflGlobalNotifications')
      );
      let count = 0;
      let moreNotify = totalActiveNotification.length;

      totalActiveNotification.forEach(item => {
        const { notificationId } = item.dataset;

        notificationJson.forEach(val => {
          if (val.id === `${notificationId}`) {
            count += 1;
          }
          if (val.id === `${notificationId}` && val.close === true) {
            item.classList.add('hidden');
            moreNotify -= 1;
          }
          if (val.id === `${notificationId}` && val.read === true) {
            item.classList.add('read');

            if (item.classList.contains('priority-3')) {
              const profileLinks = item.querySelectorAll('.status');

              profileLinks.forEach(link => {
                if (!link.querySelector('a')) {
                  link.classList.add('completed');
                } else {
                  link.classList.remove('completed');
                }
              });
            }
          }
        });
      });

      if (totalActiveNotification.length > count && notifyBell) {
        notifyBell.classList.add('new');
      } else if (totalActiveNotification.length === count && notifyBell) {
        notifyBell.classList.remove('new');
      }

      if (moreLink) {
        moreLink.innerHTML = `${moreNotify - 1} more notifications`;
      }

      if (moreNotify === 0) {
        noNotification.classList.remove('hidden');
        newNotification.classList.add('hidden');
      } else {
        noNotification.classList.add('hidden');
        newNotification.classList.remove('hidden');
      }
    } else if (!totalActiveNotification.length && notifyBell) {
      notifyBell.classList.remove('new');
      noNotification.classList.remove('hidden');
      newNotification.classList.add('hidden');
    }
  };

  if (notificationIcon) {
    notificationIcon.addEventListener('click', e => {
      e.preventDefault();
      isNewNotification();

      if (window.innerWidth < MOBILE_BREAKPOINT) {
        body.classList.remove('navigation-open');
        body.classList.remove('navigation-open--main');
        const mobileNavigation = document.querySelector(
          '.global-site-navigation'
        );
        const bottomLink = document.querySelector(
          '.global-site-navigation__bottom-link'
        );

        if (hamburger) {
          hamburger.setAttribute('aria-expanded', 'false');
        }
        setTimeout(() => {
          mobileNavigation.classList.add('mobile-navigation-closed');
          if (bottomLink) {
            bottomLink.classList.add('hidden');
          }
        }, 300);
        setTimeout(() => {
          parentElement.classList.add('sliding');
          parentElement.classList.add('active');
          loadNoNotification();
          loadFirstNotification();
        }, 301);
        setTimeout(() => {
          parentElement.classList.remove('sliding');
        }, 600);
      } else {
        parentElement.classList.add('sliding');
        parentElement.classList.add('active');
        loadNoNotification();
        loadFirstNotification();
        setTimeout(() => {
          parentElement.classList.remove('sliding');
        }, 300);
      }

      const totalNotifications = parentElement.querySelectorAll(
        '.efl-global-notifications:not(.hidden)'
      );

      if (totalNotifications.length === 1) {
        const activeNotification = parentElement.querySelector(
          '.efl-global-notifications:not(.hidden)'
        );

        NotificationMarkAsRead();

        if (moreLink) {
          moreLink.classList.add('hidden');
        }
        shadow1.classList.add('hidden');
        shadow2.classList.add('hidden');

        closeBtns[0].classList.add('hidden');
        notificationcloseBtn.forEach(btn => {
          btn.style.display = 'flex'; // eslint-disable-line no-param-reassign
          btn.style.top = '0'; // eslint-disable-line no-param-reassign
          activeNotification.querySelector(
            '.efl-global-notifications__wrapper'
          ).style.marginBottom = '16px'; // eslint-disable-line no-param-reassign
        });
      }
    });
    if (moreLink) {
      moreLink.classList.remove('hidden');
    }
  }

  closeBtns.forEach(btn => {
    btn.addEventListener('click', e => {
      e.preventDefault();
      parentElement.classList.add('sliding');

      if (window.innerWidth < MOBILE_BREAKPOINT) {
        const notificationDescription = parentElement.querySelectorAll(
          '.efl-global-notifications__section p'
        );

        notificationDescription.forEach(currentEle => {
          if (currentEle.innerHTML.length > 60) {
            const description = currentEle.innerHTML.substring(0, 70);

            currentEle.innerHTML = description; // eslint-disable-line no-param-reassign
            const readMoreSpan = document.createElement('span');

            currentEle.appendChild(readMoreSpan);
            readMoreSpan.className = 'read-more';
            readMoreSpan.innerHTML = 'Read More';
            currentEle.style.overflow = ''; // eslint-disable-line no-param-reassign
            currentEle.style.display = ''; // eslint-disable-line no-param-reassign

            const readMorebtn = parentElement.querySelectorAll('.read-more');

            readMorebtn.forEach(cta => {
              cta.addEventListener('click', event => {
                event.preventDefault();
                const getDescription = event.target.closest(
                  '.efl-global-notifications__section p'
                );
                const dataCopyValue = getDescription.getAttribute('data-copy');

                getDescription.style.overflow = 'unset'; // eslint-disable-line no-param-reassign
                getDescription.style.display = 'block'; // eslint-disable-line no-param-reassign
                getDescription.innerHTML = dataCopyValue; // eslint-disable-line no-param-reassign
              });
            });
          }
        });
      }

      setTimeout(() => {
        parentElement.classList.remove('sliding');
        parentElement.classList.remove('active');
        parentElement.setAttribute('aria-expanded', 'false');
        if (moreLink) {
          moreLink.classList.remove('hidden');
        }
      }, 300);
    });
  });

  if (notificationcloseBtn) {
    notificationcloseBtn.forEach(btn => {
      btn.addEventListener('click', e => {
        e.preventDefault();

        const notificationJson = JSON.parse(
          localStorage.getItem('eflGlobalNotifications')
        );
        const { notificationId } = btn.closest(
          '.efl-global-notifications'
        ).dataset;

        notificationJson.forEach((val, index) => {
          if (val.id === `${notificationId}`) {
            notificationJson[index] = JSON.parse(`{
              "id": "${notificationId}",
              "read": true,
              "close": true
            }`);
          }
        });

        localStorage.setItem(
          'eflGlobalNotifications',
          JSON.stringify(notificationJson)
        );

        const total = parentElement.querySelectorAll(
          '.efl-global-notifications:not(.hidden)'
        ).length;

        if (!total) {
          noNotification.classList.remove('hidden');
          newNotification.classList.add('hidden');

          loadNoNotification();
        }
      });
    });
  }

  if (moreLink) {
    moreLink.addEventListener('click', e => {
      e.preventDefault();
      const imageWidth = '60';
      const imageHeight = '60';

      notifications.forEach((element, index) => {
        const riveCanvas = document.createElement('canvas');
        const riveDiv = element.querySelector(
          '.efl-global-notifications__wrapper--icon'
        );
        const { iconType } = element.dataset;

        riveDiv.innerHTML = '';

        riveCanvas.width = imageWidth;
        riveCanvas.height = imageHeight;
        riveCanvas.id = `rive-notification-${index}`;
        riveCanvas.className = `rive-${iconType}`;
        riveDiv.appendChild(riveCanvas);

        notificationAnimation(element, iconType, riveCanvas);
      });
      parentElement.setAttribute('aria-expanded', 'true');
      moreLink.classList.add('hidden');

      NotificationMarkAsRead();
    });
  }

  document.addEventListener('click', e => {
    if (
      !e.target.closest(
        '.global-site-navigation__level1.site-notification > a'
      ) &&
      !e.target.closest('.efl-global-notifications-tray')
    ) {
      if (parentElement && window.innerWidth > MOBILE_BREAKPOINT) {
        parentElement.classList.add('sliding');
        setTimeout(() => {
          parentElement.classList.remove('sliding');
          parentElement.classList.remove('active');
          parentElement.setAttribute('aria-expanded', 'false');
          if (moreLink) {
            moreLink.classList.remove('hidden');
          }
        }, 300);
      }
    }
  });

  if (window.innerWidth > MOBILE_BREAKPOINT) {
    window.addEventListener('scroll', () => {
      const globalNotification = document.querySelector('.global-fixed-header');
      const topGap = '-114px';

      if (globalNotification.style.top === topGap) {
        parentElement.style.top = '22px'; // eslint-disable-line no-param-reassign
      } else {
        parentElement.style.top = ''; // eslint-disable-line no-param-reassign
      }
    });
  }

  isNewNotification();
};