message

/**
 * Message blocks
 * Remove message blocks and optional parent when clicked on the close button.
 */

const MESSAGE = ((w, d, undefined) => {

  "use strict";

  const classNames = {
    wrapper: 'messages',
    block: 'message',
    close: 'message__close',
  };

  const autoClear = true;
  const autoClearAfter = 5000;

  const allowRemove = parentEl => {
    if (!parentEl.children.length) {
      return true;
    } else {
      [...parentEl.children, ...[]].forEach(child => {
        const childStyles = window.getComputedStyle(child);
        if (childStyles.display === 'none') {
          child.parentNode.removeChild(child);
        }
      });
    }

    return !parentEl.children.length;
  };

  const addEvents = () => {
    [...d.querySelectorAll('.' + classNames.block), ...[]].forEach(messageBlock => {
      [...messageBlock.querySelectorAll('.' + classNames.close), ...[]].forEach(closeBtn => {
        closeBtn.addEventListener('click', e => {
          e.preventDefault();

          const parentEl = messageBlock.parentNode;

          if (parentEl && messageBlock) {
            parentEl.removeChild(messageBlock);
          }

          if (parentEl && parentEl.classList.contains(classNames.wrapper) && allowRemove(parentEl)) {
            parentEl.parentNode.removeChild(parentEl);
          }
        });

        if (autoClear) {
          setTimeout(() => { closeBtn.click(); }, autoClearAfter);
        }
      });
    });
  };

  const newMessage = (content, type) => {
    const icons = {
      'success': '<svg xmlns="http://www.w3.org/2000/svg" class="icon-succes" fill="none" viewBox="0 0 35 35" width="35" height="35"><circle cx="17.5" cy="17.5" r="16.7241" stroke="currentColor" stroke-width="1.55172"/><path d="M10.5 17.3276L16.0172 22.5L24.9828 12.5" stroke="currentColor" stroke-width="2.58621"/></svg>',
      'error': '<svg xmlns="http://www.w3.org/2000/svg" class="icon-error" fill="none" viewBox="0 0 41 35" width="41" height="35"><path stroke="currentColor" stroke-width="1.5" d="m21.722 1.625 17.32 30c.675 1.167-.167 2.625-1.515 2.625H2.887c-1.348 0-2.19-1.458-1.516-2.625l17.32-30c.674-1.167 2.358-1.167 3.031 0Z"/><path fill="currentColor" d="m21.174 12.454-.142 10.455h-1.648l-.142-10.454h1.932Zm-.966 14.66a1.23 1.23 0 0 1-.902-.377 1.23 1.23 0 0 1-.377-.902c0-.35.126-.65.377-.902.25-.25.551-.376.902-.376.35 0 .65.125.902.376.25.251.376.552.376.902 0 .232-.059.445-.177.64-.114.194-.268.35-.462.468-.19.114-.402.17-.64.17Z"/></svg>',
    };

    type = Object.keys(icons).includes(type) ? type : Object.keys(icons)[0];

    const contentBlock = document.createElement('div');
    contentBlock.classList.add('message__content');
    contentBlock.innerHTML = content;

    const iconWrapper = document.createElement('div');
    iconWrapper.classList.add('message__icon');
    iconWrapper.classList.add('message__icon--' + type);
    iconWrapper.innerHTML = icons[type];

    const messageWrapper = document.createElement('div');
    messageWrapper.classList.add('message__wrapper');
    messageWrapper.appendChild(iconWrapper);
    messageWrapper.appendChild(contentBlock);

    const close = document.createElement('div');
    close.classList.add(classNames.close);
    close.innerHTML = '<svg class="icon-close" viewBox="0 0 12 14" version="1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M6.066 5.492L2.372.931A1 1 0 1 0 .818 2.19l3.848 4.752L.418 11.34a1 1 0 0 0 1.439 1.39v-.001l4.077-4.222 3.694 4.561a1 1 0 1 0 1.554-1.259L7.334 7.059l4.248-4.399a1 1 0 0 0-1.439-1.39v.001L6.066 5.492z"></path></svg>';

    const block = document.createElement('div');
    block.classList.add(classNames.block);
    block.classList.add(classNames.block + '--' + type);
    block.appendChild(messageWrapper);
    block.appendChild(close);

    const availableWrapper = document.querySelector('.' + classNames.wrapper);

    if (!availableWrapper) {
      const wrapper = document.createElement('div');
      wrapper.classList.add(classNames.wrapper);
      wrapper.appendChild(block);
      document.body.appendChild(wrapper);
    } else {
      availableWrapper.appendChild(block);
    }

    addEvents();
  };

  const init = () => {
    addEvents();
    w.updateMessages = addEvents;
    w.newMessage = newMessage;
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);