/**
 * A 'Toast' is a simple modal message that is displayed on the screen and then automatically closed by a timeout or by a user tapping
 * outside of the toast itself. Think about it like a text only alert box that will self destruct. **A Toast should not be instantiated manually**
 * but creating by calling 'Ext.toast(message, timeout)'. This will create one reusable toast container and content will be swapped out as
 * toast messages are queued or displayed.
 *
 * # Simple Toast
 *
 *      @example miniphone
 *      Ext.toast('Hello Sencha!'); // Toast will close in 1000 milliseconds (default)
 *
 * # Toast with Timeout
 *
 *      @example miniphone
 *      Ext.toast('Hello Sencha!', 5000); // Toast will close in 5000 milliseconds
 *
 * # Toast with config
 *
 *      @example miniphone
 *      Ext.toast({message: 'Hello Sencha!', timeout: 2000}); // Toast will close in 2000 milliseconds
 *
 * # Multiple Toasts queued
 *
 *      @example miniphone
 *      Ext.toast('Hello Sencha!');
 *      Ext.toast('Hello Sencha Again!');
 *      Ext.toast('Hello Sencha One More Time!');
 */
Ext.define('Ext.Toast', {
    extend: 'Ext.Sheet',
    requires: [
        'Ext.util.InputBlocker'
    ],
 
    config: {
        /**
         * @cfg
         * @inheritdoc
         */
        ui: 'dark',
 
        /**
         * @cfg
         * @inheritdoc
         */
        baseCls: Ext.baseCSSPrefix + 'toast',
 
        /**
         * @cfg
         * @inheritdoc
         */
        showAnimation: {
            type: 'popIn',
            duration: 250,
            easing: 'ease-out'
        },
 
        /**
         * @cfg
         * @inheritdoc
         */
        hideAnimation: {
            type: 'popOut',
            duration: 250,
            easing: 'ease-out'
        },
 
        /**
         * Override the default `zIndex` so it is normally always above positioned components.
         */
        zIndex: 999,
 
        /**
         * @cfg {String} message
         * The message to be displayed in the {@link Ext.Toast}.
         * @accessor
         */
        message: '',
 
        /**
         * @cfg {Number} timeout
         * The amount of time in milliseconds to wait before destroying the toast automatically
         */
        timeout: 1000,
 
        /**
         * @cfg{Boolean/Object} animation
         * The animation that should be used between toast messages when they are queued up
         */
        messageAnimation: true,
 
        /**
         * @cfg
         * @inheritdoc
         */
        hideOnMaskTap: true,
 
        /**
         * @hide
         */
        modal: false,
 
        /**
         * @cfg
         * @inheritdoc
         */
        layout: {
            type: 'vbox',
            pack: 'center'
        }
    },
 
    initialize: function() {
        this.callParent(arguments);
        Ext.getDoc().on({
            scope: this,
            tap: 'onDocumentTap',
            capture: true
        });
    },
 
    /**
     * @private
     */
    applyMessage: function (value) {
        var config = {
            html: value,
            cls: this.getBaseCls() + '-text'
        };
 
        return Ext.factory(config, Ext.Component, this._message);
    },
 
    /**
     * @private
     */
    updateMessage: function (newMessage) {
        if (newMessage) {
            this.add(newMessage);
        }
    },
 
    /**
     * @private
     */
    startTimer: function () {
        var timeout = this.getTimeout();
        if (this._timeoutID) {
            clearTimeout(this._timeoutID);
        }
 
        if (!Ext.isEmpty(timeout)) {
            this._timeoutID = setTimeout(Ext.bind(this.onTimeout, this), timeout);
        } else {
            this.onTimeout();
        }
    },
 
    stopTimer: function () {
        clearTimeout(this._timeoutID);
        this._timeoutID = null;
    },
 
    /**
     * @method
     * @private
     */
    next: Ext.emptyFn,
 
    getIsAnimating: function () {
        var messageContainer = this.getMessage();
        return (messageContainer && Ext.Animator.hasRunningAnimations(messageContainer)) || Ext.Animator.hasRunningAnimations(this);
    },
 
    /**
     * @private
     */
    show: function (config) {
        var me = this,
            message = config.message,
            timeout = config.timeout,
            messageContainer = me.getMessage(),
            msgAnimation = me.getMessageAnimation();
 
        // If the toast has already been rendered and is visible on the screen
        if (me.isRendered() && me.isHidden() === false) {
            messageContainer.onAfter({
                // After the hide is complete
                hiddenchange: function () {
                    me.setMessage(message);
                    me.setTimeout(timeout);
                    messageContainer.onAfter({
                        scope: me,
                        // After the show is complete
                        hiddenchange: function () {
                            me.startTimer();
                        },
                        single: true
                    });
                    messageContainer.show(msgAnimation);
                },
                scope: me,
                single: true
            });
 
            messageContainer.hide(msgAnimation);
        } else {
            Ext.util.InputBlocker.blockInputs();
 
            //if it has not been added to a container, add it to the Viewport.
            if (!me.getParent() && Ext.Viewport) {
                Ext.Viewport.add(me);
            }
 
            me.setMessage(message);
            me.setTimeout(timeout);
            me.startTimer();
            me.callParent(arguments);
        }
    },
 
    onDocumentTap: function() {
        this.hide();
    },
 
    /**
     * @private
     */
    hide: function (animation) {
        var isAnimating = this.getIsAnimating();
 
        // If the message is animating cancel this hide
        if (isAnimating) {
            return;
        }
 
        var isEmpty = this.next();
        this.stopTimer();
        if (isEmpty) {
            this.callParent(arguments);
        }
    },
 
    /**
     * @private
     */
    onTimeout: function () {
        if (this._timeoutID !== null) {
            this.hide();
        }
    }
}, function (Toast) {
    var _queue = [];
 
    function getInstance() {
        if (!Ext.Toast._instance) {
            Ext.Toast._instance = Ext.create('Ext.Toast');
        }
        return Ext.Toast._instance;
    }
 
    Toast.prototype.next = function () {
        var config = _queue.shift();
 
        if (config) {
            this.show(config);
        }
 
        return !config;
    };
 
    Ext.toast = function (message, timeout) {
        var toast = getInstance(),
            config = message;
 
        if (Ext.isString(message)) {
            config = {
                message: message,
                timeout: timeout
            };
        }
 
        //<debug>
        if (!config) {
            throw new Error("Toast requires a message");
        }
        //</debug>
 
        if (config.timeout === undefined) {
            config.timeout = Ext.Toast.prototype.config.timeout;
        }
 
        _queue.push(config);
 
        if (!toast.isRendered() || toast.isHidden()) {
            toast.next();
        }
 
        return toast;
    }
});