/**
 * This class is used for creating a configurator field component.
 *
 * @private
 */
Ext.define('Ext.pivot.plugin.configurator.Column', {
    extend: 'Ext.dataview.ListItem',
 
    requires: [
        'Ext.pivot.plugin.configurator.Field'
    ],
 
    alias: 'widget.pivotconfigfield',
 
    userCls: Ext.baseCSSPrefix + 'pivot-grid-config-column',
    filteredCls: Ext.baseCSSPrefix + 'pivot-grid-config-column-filter',
    ascSortIconCls: Ext.baseCSSPrefix + 'pivot-grid-config-column-btn-sort-asc',
    descSortIconCls: Ext.baseCSSPrefix + 'pivot-grid-config-column-btn-sort-desc',
 
    config: {
        deleteCmp: {
            xtype: 'component',
            cls: [
                Ext.baseCSSPrefix + 'pivot-grid-config-column-btn',
                Ext.baseCSSPrefix + 'pivot-grid-config-column-btn-delete'
            ],
            docked: 'right',
            hidden: true
        },
 
        moveCmp: {
            xtype: 'component',
            cls: [
                Ext.baseCSSPrefix + 'pivot-grid-config-column-btn',
                Ext.baseCSSPrefix + 'pivot-grid-config-column-btn-move'
            ],
            docked: 'left'
        },
 
        sortCmp: {
            xtype: 'component',
            cls: Ext.baseCSSPrefix + 'pivot-grid-config-column-btn',
            docked: 'right',
            hidden: true
        }
    },
 
    applyDeleteCmp: function(cmp, oldCmp) {
        if (cmp && !cmp.isComponent) {
            cmp = Ext.factory(cmp, Ext.Component, oldCmp);
        }
 
        return cmp;
    },
 
    updateDeleteCmp: function(cmp, oldCmp) {
        if (cmp) {
            this.add(cmp);
        }
 
        Ext.destroy(oldCmp);
    },
 
    applyMoveCmp: function(cmp, oldCmp) {
        if (cmp && !cmp.isComponent) {
            cmp = Ext.factory(cmp, Ext.Component, oldCmp);
        }
 
        return cmp;
    },
 
    updateMoveCmp: function(cmp, oldCmp) {
        if (cmp) {
            this.add(cmp);
        }
 
        Ext.destroy(oldCmp);
    },
 
    applySortCmp: function(cmp, oldCmp) {
        if (cmp && !cmp.isComponent) {
            cmp = Ext.factory(cmp, Ext.Component, oldCmp);
        }
 
        return cmp;
    },
 
    updateSortCmp: function(cmp, oldCmp) {
        if (cmp) {
            this.add(cmp);
        }
 
        Ext.destroy(oldCmp);
    },
 
    getField: function() {
        return this.getRecord().get('field');
    },
 
    updateRecord: function(record, oldRecord) {
        var me = this,
            innerElement = me.innerElement,
            settings, field;
 
        this.callParent([record, oldRecord]);
 
        if (!record) {
            return;
        }
 
        if (oldRecord) {
            field = oldRecord.get('field');
 
            if (field) {
                settings = oldRecord.get('field').getSettings();
                me.resetStyle(innerElement, settings.getStyle());
                me.removeCls(settings.getCls());
            }
        }
 
        field = record.get('field');
 
        if (field) {
            settings = record.get('field').getSettings();
 
            // The custom settings style we add to the text component.
            // All button icons are in fact fonts so changing the font style in the list item
            // would affect all buttons not only the text component
            innerElement.setStyle(settings.getStyle());
            // The custom settings cls we add to the entire component
            // With classes you can control better what components to change
            me.addCls(settings.getCls());
 
            me.refreshData();
        }
    },
 
    refreshData: function() {
        var me = this,
            dCmp = me.getDeleteCmp(),
            record = me.getRecord(),
            field = record.get('field'),
            settings = field.getSettings(),
            dataView = me.dataview || me.getDataview(),
            container = dataView.getFieldType ? dataView : dataView.up('pivotconfigcontainer'),
            fieldType = container.getFieldType(),
            isFixed;
 
        if (fieldType !== 'all') {
            isFixed = settings.isFixed(container);
            dCmp.setHidden(isFixed);
        }
 
        record.set('text', field.getFieldText());
 
        me.updateSortCmpCls();
        me.updateFilterCls();
    },
 
    updateFilterCls: function() {
        var me = this,
            dataView = me.dataview || me.getDataview(),
            container = dataView.getFieldType ? dataView : dataView.up('pivotconfigcontainer'),
            fieldType = container.getFieldType();
 
        if (fieldType !== 'all') {
            if (me.getField().getFilter()) {
                me.addCls(me.filteredCls);
            }
            else {
                me.removeCls(me.filteredCls);
            }
        }
    },
 
    updateSortCmpCls: function() {
        var me = this,
            dataView = me.dataview || me.getDataview(),
            container = dataView.getFieldType ? dataView : dataView.up('pivotconfigcontainer'),
            fieldType = container.getFieldType(),
            field = me.getField(),
            sCmp = me.getSortCmp();
 
        if (fieldType === 'leftAxis' || fieldType === 'topAxis') {
            sCmp.show();
            sCmp.setUserCls('');
 
            if (field.getSortable()) {
                if (field.getDirection() === 'ASC') {
                    sCmp.setUserCls(me.ascSortIconCls);
                }
                else {
                    sCmp.setUserCls(me.descSortIconCls);
                }
            }
        }
        else {
            sCmp.hide();
        }
    },
 
    resetStyle: function(cmp, oldStyle) {
        var style = {},
            keys = Ext.Object.getAllKeys(oldStyle),
            len = keys.length,
            i;
 
        for (i = 0; i < len; i++) {
            style[keys[i]] = null;
        }
 
        cmp.setStyle(style);
    },
 
    onApplyFilterSettings: function(win, filter) {
        this.getField().setFilter(filter);
        this.updateFilterCls();
        this.applyChanges();
    },
 
    onRemoveFilter: function() {
        this.getField().setFilter(null);
        this.updateFilterCls();
        this.applyChanges();
    },
 
    /**
     * This is used for firing the 'configchange' event
     *
     */
    applyChanges: function() {
        var dataView = this.dataview || this.getDataView();
 
        if (dataView) {
            dataView.applyChanges();
        }
    }
});