/**
 * This plugin can be added to component instances to process a `responsiveConfig`. For
 * example:
 *
 *      Ext.create({
 *          xtype: 'viewport',
 *          layout: 'border',
 *
 *          items: [{
 *              title: 'Some Title',
 *              plugins: 'responsive',
 *
 *              responsiveConfig: {
 *                  'width < 800': {
 *                      region: 'north'
 *                  },
 *
 *                  'width >= 800': {
 *                      region: 'west'
 *                  }
 *              }
 *          }]
 *      });
 *
 * For details see `{@link Ext.mixin.Responsive#responsiveConfig responsiveConfig}`.
 */
Ext.define('Ext.plugin.Responsive', {
    extend: 'Ext.mixin.Responsive',
 
    alias: 'plugin.responsive',
    id: 'responsive',
 
    isPlugin: true,
 
    constructor: function (config) {
        var me = this,
            cmp = config.cmp,
            c = Ext.apply({
                responsiveConfig: cmp.responsiveConfig,
                responsiveFormulas: cmp.responsiveFormulas
            }, config);
 
        delete c.cmp;
 
        me.cmp = cmp;
        //<debug>
        if (!cmp) {
            Ext.raise('Responsive plugin must be constructed by Component');
        }
        //</debug>
 
        me.initConfig(c);
 
        // Push the evaluated responsiveConfig values back on to the component:
        if (me.transformed) {
            cmp.setConfig(me.transformed);
            me.transformed = null;
        }
    },
 
    init: Ext.emptyFn,
 
    privates: {
        transformInstanceConfig: function (config) {
            // Since the responsiveConfigs we manage are for the component and not for us,
            // we set them aside here to be picked up by the constructor.
            var transformed = this.callParent([config]);
 
            // in case we are created from a config w/ptype
            if (transformed.ptype) {
                transformed = Ext.apply({}, transformed);
                delete transformed.ptype;
            }
 
            this.transformed = transformed;
 
            var ret = Ext.apply({}, config);
            delete ret.ptype;
            delete ret.responsiveConfig; // already processed
            delete ret.responsiveFormulas;
 
            return ret;
        },
 
        updateResponsiveState: function () {
            var config = this.getResponsiveState();
            // Push the dynamic stuff back on to our component:
            this.cmp.setConfig(config);
        }
    }
});