/**
 * Toast — lightweight notification
 * Usage: window.Toast.success('msg'), Toast.error('msg'), Toast.warning('msg'), Toast.info('msg')
 *        window.Toast.show('msg', { type: 'info', duration: 2500 })
 */
(function() {
    var container = null;
    var counter = 0;

    function ensureContainer() {
        if (container) return;
        container = document.createElement('div');
        container.className = 'ying-toast-container';
        document.body.appendChild(container);
    }

    function remove(el, delay) {
        setTimeout(function() {
            el.classList.remove('ying-toast--visible');
            el.addEventListener('transitionend', function onEnd(e) {
                if (e.propertyName !== 'opacity') return;
                el.removeEventListener('transitionend', onEnd);
                if (el.parentNode) el.parentNode.removeChild(el);
            });
        }, delay);
    }

    window.Toast = {
        show: function(text, options) {
            options = options || {};
            var type = options.type || 'info';
            var duration = options.duration || 2200;

            ensureContainer();

            var el = document.createElement('div');
            el.className = 'ying-toast ying-toast--' + type;
            el.textContent = text;
            el.setAttribute('role', 'status');
            el.setAttribute('aria-live', 'polite');
            container.appendChild(el);

            /* Force layout then animate in */
            void el.offsetWidth;
            el.classList.add('ying-toast--visible');

            remove(el, duration);
        },

        success: function(text, duration) {
            this.show(text, { type: 'success', duration: duration });
        },
        error: function(text, duration) {
            this.show(text, { type: 'error', duration: duration });
        },
        warning: function(text, duration) {
            this.show(text, { type: 'warning', duration: duration });
        },
        info: function(text, duration) {
            this.show(text, { type: 'info', duration: duration });
        }
    };
})();