/**
 * A calendar picker component.  Similar to {@link Ext.calendar.List}, the items in the
 * picker will display the title for each source calendar along with a color swatch
 * representing the default color the that calendar's events.
 *
 * The {@link #cfg-store} will be the same {@link Ext.calendar.store.Calendars store}
 * instance used by your target {@link Ext.calendar.view.Base calendar}.
 */
Ext.define('Ext.calendar.form.CalendarPicker', {
    extend: 'Ext.field.Select',
    xtype: 'calendar-calendar-picker',
 
    cls: Ext.baseCSSPrefix + 'calendar-picker-field',
 
    floatedPicker: {
        userCls: Ext.baseCSSPrefix + 'calendar-picker-list',
        itemTpl: '<div class="' + Ext.baseCSSPrefix + 'calendar-picker-list-icon" style="background-color: {color};"></div>' +
                 '<span class="' + Ext.baseCSSPrefix + 'calendar-picker-list-text ' + Ext.baseCSSPrefix + 'list-label">{title:htmlEncode}</span>'
    },
 
    edgePicker: {
        userCls: Ext.baseCSSPrefix + 'calendar-picker-list'
    },
 
    applyPicker: function(picker, oldPicker) {
        var me = this,
            dv;
 
        picker = me.callParent([picker, oldPicker]);
        if (picker) {
            if (me.pickerType === 'floated') {
                dv = picker;
            } else {
                dv = picker.items.first();
            }
            dv.prepareData = me.prepareData;
        }
        return picker;
    },
 
    createEdgePicker: function() {
        var picker = this.callParent();
 
        picker.slots[0].itemTpl =
            '<div class="' + Ext.baseCSSPrefix + 'picker-item {cls}">' +
                '<div class="' + Ext.baseCSSPrefix + 'calendar-picker-list-icon" style="background-color: {color};"></div>' +
                '<span class="' + Ext.baseCSSPrefix + 'list-label">{title:htmlEncode}</span>' +
            '</div>';
 
        return picker;
    },
 
    prepareData: function(data, index, record) {
        return {
            id: record.id,
            title: record.getTitle(),
            color: record.getBaseColor()
        };
    },
 
    updateValue: function(value, oldValue) {
        var me = this,
            iconEl = me.iconEl,
            record;
 
        me.callParent([value, oldValue]);
 
        if (!iconEl) {
            me.iconEl = iconEl = me.bodyElement.createChild({
                cls: Ext.baseCSSPrefix + 'calendar-picker-field-icon'
            });
        }
 
        record = me.getSelection();
        if (record) {
            iconEl.setDisplayed(true);
            iconEl.setStyle('background-color', record.getBaseColor());
        } else {
            iconEl.setDisplayed(false);
        }
    },
 
    privates: {
        queryTabletPicker: function(picker) {
            return picker.down('calendar-list');
        }
    }
});