var Wick = Wick || {};
Wick.SnackBar = {
    messages: [],
    overlaySelector: '.snack-bar-notification-modal',
    types: {
        SUCCESS: 'success',
        ERROR: 'error',
        WARNING: 'warning'
    },
};

Wick.SnackBar = {
    ...Wick.SnackBar,
    defaultMessagesState: {
        [Wick.SnackBar.types.SUCCESS]: {
            icon: 'fa-check-circle',
            className: 'snack-bar-notification-success',
            withCloseButton: true,
            autoClose: false,
            delayBeforeClose: 3000,
        },
        [Wick.SnackBar.types.ERROR]: {
            icon: 'fa-times-circle',
            className: 'snack-bar-notification-error',
            withCloseButton: true,
            autoClose: false,
            delayBeforeClose: 3000,
        },
        [Wick.SnackBar.types.WARNING]: {
            icon: 'fa-exclamation-circle',
            className: 'snack-bar-notification-warning',
            withCloseButton: true,
            autoClose: false,
            delayBeforeClose: 3000,
        },
    },

    init() {
        Wick.SnackBar.createNotificationWrapper();
        Wick.SnackBar.defineOverlayListener();
    },

    createNotificationWrapper(overlayClassName = 'snack-bar-notification-modal') {
        Wick.SnackBar.overlaySelector = `.${overlayClassName}`;
        if ($(Wick.SnackBar.overlaySelector).length) {
            console.warn('Snack bar already initialized');
            return;
        }
        const wrapper = $("<div>", { class: overlayClassName });
        $(document.body).append(wrapper);
    },

    defineOverlayListener() {
        $(Wick.SnackBar.overlaySelector)
            .on('click', Wick.SnackBar.hideOverlayByOutsideClick);
    },

    getDefaultOptionsForMessageType(type) {
        return Wick.SnackBar.defaultMessagesState[type];
    },

    show(messageOptions) {
        const id = Date.now();
        const defaultMessageOptions = Wick.SnackBar.getDefaultOptionsForMessageType(messageOptions.type);
        const templateArgs = {
            ...defaultMessageOptions,
            ...messageOptions,
            id,
        };

        const template = Wick.SnackBar.createMessageTemplate(templateArgs);
        Wick.SnackBar.messages.push(templateArgs);
        $(Wick.SnackBar.overlaySelector).append(template);
        Wick.SnackBar.showOverlay();
        template.addClass('animateTop');
    },

    addCloseBtn(template) {
        const closeBtn = $(`
            <span class="icon notification__close">
                <span class="far fa-times"></span>
            </span>
        `)
        closeBtn.on('click', function (e) {
            e.stopPropagation();
            const message = $(this).closest('.snack-bar-notification-wrapper');

            message.addClass('animateBottom');

            message.on('animationend', () => {
                message.remove();
                if (!Wick.SnackBar.hasChildren(Wick.SnackBar.overlaySelector)) {
                    Wick.SnackBar.hideOverlay();
                }
            });
        })
        template.find('.snack-bar-notification-popup').append(closeBtn);
    },

    showOverlay() {
        $(Wick.SnackBar.overlaySelector).fadeIn();
    },

    hideOverlay() {
        $(Wick.SnackBar.overlaySelector).fadeOut();
    },

    getTemplate(text = '', icon, className){
        return $(`
        <div class="snack-bar-notification-wrapper">
          <div class="snack-bar-notification-wrapper-inner">
              <div class="snack-bar-notification-popup ${className}">
                  <span class="icon notification__icon">
                      <span class="fas ${icon}"></span>
                  </span>
                  <span class="snack-bar-notification_text">${text}</span>
                </div>
          </div>
        </div>
      `);
    },

    addTemplateId(template, id) {
        template.attr('data-message-id', id)
    },

    hasChildren(selector) {
        return $(selector).children().length >= 1;
    },

    hideOverlayByOutsideClick() {
        const notificationWrap = $('.snack-bar-notification-wrapper');
        notificationWrap.addClass('animateBottom');
        notificationWrap.on('animationstart', () => {
            notificationWrap.remove();
            Wick.SnackBar.hideOverlay();
        });
    },

    createMessageTemplate({ text, icon, className, withCloseButton, id, delayBeforeClose, autoClose }) {
        const templateWithText = Wick.SnackBar.getTemplate(text, icon, className);
        Wick.SnackBar.addTemplateId(templateWithText, id)
        if (withCloseButton) {
            Wick.SnackBar.addCloseBtn(templateWithText);
        }
        if (autoClose) {
            setTimeout(function () {
                templateWithText.addClass('animateBottom');
                templateWithText.on('animationend', () => {
                    templateWithText.remove();
                    if (!Wick.SnackBar.hasChildren('.snack-bar-notification-modal')) {
                        Wick.SnackBar.hideOverlay();
                    }
                });
            }, delayBeforeClose);
        }

        return templateWithText;
    },
};
