/**
 * 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.form.field.ComboBox',
    xtype: 'calendar-calendar-picker',
 
    cls: Ext.baseCSSPrefix + 'calendar-picker-field',
 
    listConfig: {
        cls: Ext.baseCSSPrefix + 'calendar-picker-list',
        
        getInnerTpl: function(displayField) {
            /* eslint-disable max-len */
            return '<div class="' + Ext.baseCSSPrefix + 'calendar-picker-list-icon" style="background-color: {color};"></div>' +
                   '<div class="' + Ext.baseCSSPrefix + 'calendar-picker-list-text">{' + displayField + '}</div>';
            /* eslint-enable max-len */
        },
 
        prepareData: function(data, index, record) {
            return {
                id: record.id,
                title: record.getTitle(),
                color: record.getBaseColor()
            };
        }
    },
 
    afterRender: function() {
        this.callParent();
        this.updateValue();
    },
 
    updateValue: function() {
        var me = this,
            el, record;
 
        me.callParent();
 
        record = me.valueCollection.first();
 
        if (me.rendered) {
            el = me.iconEl;
            
            if (!el) {
                me.iconEl = el = me.inputWrap.createChild({
                    cls: Ext.baseCSSPrefix + 'calendar-picker-field-icon'
                });
            }
            
            if (record) {
                el.setDisplayed(true);
                el.setStyle('background-color', record.getBaseColor());
            }
            else {
                el.setDisplayed(false);
            }
        }
    }
});