/**
 * The legend base class adapater for modern toolkit.
 */
Ext.define('Ext.chart.legend.LegendBase', {
    extend: 'Ext.dataview.DataView',
    config: {
        /* eslint-disable max-len, no-useless-escape */
        itemTpl: [
            '<span class=\"', Ext.baseCSSPrefix, 'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-item-inactive\' : \'\' ]}\" style=\"background:{mark};\"></span>{name}'
        ],
        /* eslint-enable max-len, no-useless-escape */

        inline: true,

        scrollable: false // for IE11 vertical align
    },

    constructor: function(config) {
        var scroller, onDrag;

        this.callParent([config]);

        scroller = this.getScrollable();
        onDrag = scroller.onDrag;

        scroller.onDrag = function(e) {
            e.stopPropagation();
            onDrag.call(this, e);
        };
    },

    updateDocked: function(docked, oldDocked) {
        var me = this,
            el = me.el;

        me.callParent([docked, oldDocked]);

        switch (docked) {
            case 'top':

            // eslint-disable-next-line no-fallthrough
            case 'bottom':
                el.addCls(me.horizontalCls);
                el.removeCls(me.verticalCls);
                break;

            case 'left':

            // eslint-disable-next-line no-fallthrough
            case 'right':
                el.addCls(me.verticalCls);
                el.removeCls(me.horizontalCls);
                break;
        }
    },

    onChildTap: function(context) {
        this.callParent([ context ]);
        this.toggleItem(context.viewIndex);
    }
});
