/**
 * A DataItem is a container for records inside of {@link Ext.dataview.DataView} with useComponents: true.
 * It ties together {@link Ext.data.Model records} to its contained Components. Consider the following example:
 *
 *      @example phone portrait preview
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! MODEL
 *
 *     Ext.define('TestModel', {
 *         extend: 'Ext.data.Model',
 *         config: {
 *             fields: [{
 *                 name: 'val1'
 *             }, {
 *                 name: 'val2'
 *             }]
 *         }
 *     });
 *
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! STORE
 *
 *     Ext.define('TestStore', {
 *         extend: 'Ext.data.Store',
 *         config: {
 *             data: [{
 *                 val1: 'A Button',
 *                 val2: 'with text'
 *             }, {
 *                 val1: 'The Button',
 *                 val2: 'more text'
 *             }, {
 *                 val1: 'My Button',
 *                 val2: 'My Text'
 *             }],
 *             model: 'TestModel',
 *             storeId: 'TestStore'
 *         }
 *     });
 *
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DATA ITEM
 *
 *     Ext.define('MyDataItem', {
 *         extend: 'Ext.dataview.component.DataItem',
 *         alias: 'widget.mydataitem',
 *         config: {
 *             padding: 10,
 *             layout: {
 *                 type: 'hbox'
 *             },
 *             defaults: {
 *                 margin: 5
 *             },
 *             items: [{
 *                 xtype: 'button',
 *                 text: 'Val1'
 *             }, {
 *                 xtype: 'component',
 *                 flex: 1,
 *                 html: 'val2',
 *                 itemId: 'textCmp'
 *             }]
 *         },
 *         updateRecord: function(record) {
 *             var me = this;
 *
 *             me.down('button').setText(record.get('val1'));
 *             me.down('#textCmp').setHtml(record.get('val2'));
 *
 *             me.callParent(arguments);
 *         }
 *     });
 *
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DATA VIEW
 *
 *     Ext.define('MyDataView', {
 *         extend: 'Ext.dataview.DataView',
 *         config: {
 *             defaultType: 'mydataitem',
 *             useComponents: true
 *         }
 *     });
 *
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! RUN
 *
 *     Ext.create('MyDataView', {
 *         fullscreen: true,
 *         store: Ext.create('TestStore')
 *     });
 *
 * Another way to accomplish this is via a {@link #dataMap dataMap} configuration.
 *
 * For example, lets say you have a `text` configuration which, when applied, gets turned into an instance of an
 * Ext.Component. We want to update the {@link #html} of a sub-component when the 'text' field of the record gets
 * changed.
 *
 * As you can see below, it is simply a matter of setting the key of the object to be the getter of the config
 * (getText), and then give that property a value of an object, which then has 'setHtml' (the html setter) as the key,
 * and 'text' (the field name) as the value. You can continue this for a as many sub-components as you wish.
 *
 *     dataMap: {
 *         // When the record is updated, get the text configuration, and
 *         // call setHtml with the 'text' field of the record.
 *         getText: {
 *             setHtml: 'text'
 *         },
 *
 *         // When the record is updated, get the userName configuration, and
 *         // call setHtml with the 'from_user' field of the record.
 *         getUserName: {
 *             setHtml: 'from_user'
 *         },
 *
 *         // When the record is updated, get the avatar configuration, and
 *         // call `setSrc` with the 'profile_image_url' field of the record.
 *         getAvatar: {
 *             setSrc: 'profile_image_url'
 *         }
 *     }
 */
Ext.define('Ext.dataview.component.DataItem', {
    extend: 'Ext.Container',
    xtype : 'dataitem',
 
    config: {
        defaultType: 'component',
 
        /**
         * @cfg {Ext.data.Model} record The model instance of this DataItem. It is controlled by the Component DataView.
         * @accessor
         */
        record: null,
 
        /**
         * @cfg {String} itemCls
         * An additional CSS class to apply to items within the DataView.
         * @accessor
         */
        itemCls: null,
 
        /**
         * @cfg dataMap
         * The dataMap allows you to map {@link #record} fields to specific configurations in this component.
         *
         * For example, lets say you have a `text` configuration which, when applied, gets turned into an instance of an Ext.Component.
         * We want to update the {@link #html} of this component when the 'text' field of the record gets changed.
         * For example:
         *
         *      dataMap: {
         *          getText: {
         *              setHtml: 'text'
         *          }
         *      }
         *
         * In this example, it is simply a matter of setting the key of the object to be the getter of the config (`getText`), and then give that
         * property a value of an object, which then has `setHtml` (the html setter) as the key, and `text` (the field name) as the value.
         */
        dataMap: {},
 
        /**
         * @private
         * @cfg dataview
         */
        dataview: null,
 
        width: '100%',
 
        items: [{
            xtype: 'component'
        }]
    },
 
    classCls: Ext.baseCSSPrefix + 'dataitem',
 
    updateBaseCls: function(newBaseCls, oldBaseCls) {
        var me = this;
 
        me.callParent(arguments);
    },
 
    updateItemCls: function(newCls, oldCls) {
        if (oldCls) {
            this.removeCls(oldCls);
        }
        if (newCls) {
            this.addCls(newCls);
        }
    },
 
    doMapData: function(dataMap, data, item) {
        var componentName, component, setterMap, setterName;
 
        for (componentName in dataMap) {
            setterMap = dataMap[componentName];
            component = this[componentName]();
            if (component) {
                for (setterName in setterMap) {
                    if (data && component[setterName] && data[setterMap[setterName]] !== undefined && data[setterMap[setterName]] !== null) {
                        component[setterName](data[setterMap[setterName]]);
                    }
                }
            }
        }
 
        if (item) {
            // Bypassing setter because sometimes we pass the same object (different properties)
            item.updateData(data);
        }
    },
 
    /**
     * Updates this container's child items, passing through the `dataMap`.
     * @param {Ext.data.Model} newRecord 
     * @private
     */
    updateRecord: function(newRecord) {
        if (!newRecord) {
            return;
        }
        this._record = newRecord;
 
        var me = this,
            dataview = me.dataview || this.getDataview(),
            data = dataview.prepareData(newRecord.getData(true), dataview.getStore().indexOf(newRecord), newRecord),
            items = me.getItems(),
            item = items.first(),
            dataMap = me.getDataMap();
 
        if (!item) {
            return;
        }
        if (dataMap) {
            this.doMapData(dataMap, data, item);
        }
 
        /**
         * @event updatedata
         * Fires whenever the data of the DataItem is updated.
         * @param {Ext.dataview.component.DataItem} this The DataItem instance.
         * @param {Object} newData The new data.
         */
        me.fireEvent('updatedata', me, data);
    }
});