/**
 * A header for {@link Ext.calendar.view.Days} to display the
 * active dates.
 */
Ext.define('Ext.calendar.header.Days', {
    extend: 'Ext.calendar.header.Base',
    xtype: 'calendar-daysheader',

    /**
     * @cfg format
     * @inheritdoc
     */
    format: 'D m/d',

    /**
     * @cfg compactOptions
     * @inheritdoc
     */
    compactOptions: {
        format: 'd'
    },

    getElementConfig: function() {
        var result = this.callParent();

        result.cls = this.$tableCls;
        delete result.reference;

        return {
            cls: Ext.baseCSSPrefix + 'calendar-header',
            reference: 'element',
            children: [result]
        };
    },

    privates: {
        headerScrollOffsetName: 'padding-right',
        $gutterCls: Ext.baseCSSPrefix + 'calendar-header-gutter',

        createCells: function() {
            var me = this,
                row = me.row,
                cells = me.callParent();

            row.insertFirst({
                tag: 'td',
                cls: me.$headerCls + ' ' + me.$gutterCls
            }, true);

            row.append({
                tag: 'td',
                style: 'display: none;'
            }, true);

            return cells;
        },

        setOverflowWidth: function(width) {
            this.element.setStyle(this.headerScrollOffsetName, width + 'px');
        }
    }
});
