/**
 * Plugin for displaying a progressbar inside of a paging toolbar
 * instead of plain text.
 */
Ext.define('Ext.ux.ProgressBarPager', {
    alias: 'plugin.ux-progressbarpager',
 
    requires: [
        'Ext.ProgressBar'
    ],
 
    /**
     * @cfg {Number} width
     * <p>The default progress bar width.  Default is 225.</p>
    */
    width: 225,
 
    /**
     * @cfg {String} defaultText
    * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
     */
    defaultText: 'Loading...',
 
    /**
     * @cfg {Object} defaultAnimCfg
     * <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
     */
    defaultAnimCfg: {
        duration: 1000,
        easing: 'bounceOut'
    },
 
    /**
     * Creates new ProgressBarPager.
     * @param {Object} config Configuration options
     */
    constructor: function(config) {
        if (config) {
            Ext.apply(this, config);
        }
    },
 
    init: function(parent) {
        var displayItem;
 
        if (parent.displayInfo) {
            this.parent = parent;
 
            displayItem = parent.child("#displayItem");
 
            if (displayItem) {
                parent.remove(displayItem, true);
            }
 
            this.progressBar = Ext.create('Ext.ProgressBar', {
                text: this.defaultText,
                width: this.width,
                animate: this.defaultAnimCfg,
                style: {
                    cursor: 'pointer'
                },
                listeners: {
                    el: {
                        scope: this,
                        click: this.handleProgressBarClick
                    }
                }
            });
 
            parent.displayItem = this.progressBar;
 
            parent.add(parent.displayItem);
            Ext.apply(parent, this.parentOverrides);
        }
    },
 
    /**
     * This method handles the click for the progress bar
     * @private
     */
    handleProgressBarClick: function(e) {
        var parent = this.parent,
            displayItem = parent.displayItem,
            box = this.progressBar.getBox(),
            xy = e.getXY(),
            position = xy[0] - box.x,
            store = parent.store,
            pageSize = parent.pageSize || store.pageSize,
            pages = Math.ceil(store.getTotalCount() / pageSize),
            newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
 
        store.loadPage(newPage);
    },
 
    /**
     * @private
     */
    parentOverrides: {
        /**
         * This method updates the information via the progress bar.
         * @private
         */
        updateInfo: function() {
            if (this.displayItem) {
                // eslint-disable-next-line vars-on-top
                var count = this.store.getCount(),
                    pageData = this.getPageData(),
                    message = count === 0
                        ? this.emptyMsg
                        : Ext.String.format(
                            this.displayMsg,
                            pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
                        ),
                    percentage = pageData.pageCount > 0
                        ? (pageData.currentPage / pageData.pageCount)
                        : 0;
 
                this.displayItem.updateProgress(
                    percentage, message, this.animate || this.defaultAnimConfig
                );
            }
        }
    }
});