/**
 * Utility class used by Ext.slider.Slider - should never need to be used directly.
 */
Ext.define('Ext.slider.Thumb', {
    extend: 'Ext.Component',
    xtype: 'thumb',
 
    baseCls: Ext.baseCSSPrefix + 'thumb',
 
    isSliderThumb: true,
 
    config: {
        /**
         * @cfg {String} 
         * A CSS class for styling the track fill element.  Assumes {@link #fillTrack} has
         * been set to `true`, otherwise the fill element will be invisible.
         */
        fillCls: null,
 
        /**
         * @cfg {Boolean/String}
         * True to add a "fill" color to the track for this thumb, or a valid CSS color
         * to use for the fill.  When a fill color is used is extends from the left
         * edge of the thumb to the previous thumb, or to the left edge of the track if
         * this thumb is the left-most thumb.
         */
        fillTrack: null,
 
        // private
 
        dragMax: null,
        dragMin: null,
        slider: null
    },
 
    template: [{
        reference: 'iconElement',
        classList: [
            Ext.baseCSSPrefix + 'icon-el',
            Ext.baseCSSPrefix + 'font-icon'
        ]
    }],
 
    /**
     * @cfg draggable
     * @inheritdoc
     */
    draggable: {
        local: true,
        constrain: { },
        listeners: {
            beforedragstart: 'onBeforeDragStart',
            dragstart: 'onDragStart',
            dragmove: 'onDragMove',
            dragend: 'onDragEnd',
            scope: 'this'
        }
    },
 
    touchAction: { panX: false, panY: false },
 
    translatable: {
        // use cssposition instead of csstransform so that themes can use transform
        // scale to style the pressed state of the thumb (material)
        type: 'cssposition',
 
        listeners: {
            animationstart: 'onAnimationStart',
            animationend: 'onAnimationEnd',
            translate: 'onTranslate',
            scope: 'this'
        }
    },
 
    elementWidth: 0,
 
    pressingCls: Ext.baseCSSPrefix + 'pressing',
    fillCls: Ext.baseCSSPrefix + 'fill-el',
    sizerCls: Ext.baseCSSPrefix + 'thumb-sizer',
 
    constructor: function(config) {
        // Since the thumbs are absolutely positioned, the slider component cannot shrink
        // wrap to their height.  The sizer element is a 0-width element that ensures
        // the slider is at least as high as the largest thumb.
        // This has to be created early so the ui updater can access it
        this.sizerElement = Ext.Element.create({
            cls: this.sizerCls
        });
 
        this.callParent([config]);
    },
 
    initialize: function() {
        var me = this,
            fillElement;
 
        me.callParent();
 
        me.el.addClsOnClick(me.pressingCls, me.shouldAddPressingCls, me);
 
        fillElement = me.fillElement = Ext.Element.create({
            cls: me.fillCls
        });
 
        fillElement.setVisibilityMode(1); // VISIBILITY
    },
 
    updateFillTrack: function(fillTrack) {
        var fillElement = this.fillElement;
 
        if (fillTrack === false) {
            fillElement.hide();
        }
        else {
            fillElement.show();
            fillElement.setStyle(
                'background-color',
                (typeof fillTrack === 'string') ? fillTrack : ''
            );
        }
    },
 
    updateFillCls: function(fillCls, oldFillCls) {
        this.fillElement.replaceCls(oldFillCls, fillCls);
    },
 
    shouldAddPressingCls: function() {
        return !this.isDisabled();
    },
 
    initDragConstraints: function() {
        // This template method is called JIT to allow us to setup constraints
        if (this.isDisabled()) {
            return false;
        }
 
        this.getSlider().refreshAllThumbConstraints();
    },
 
    onAnimationStart: function(translatable, x, y) {
        this.getSlider().onThumbAnimationStart(this, x, y);
    },
 
    onAnimationEnd: function(translatable, x, y) {
        if (!this.destroyed) {
            this.getSlider().onThumbAnimationEnd(this, x, y);
        }
    },
 
    onBeforeDragStart: function(source, info, event) {
        var xy;
 
        if (this.isDisabled()) {
            return false;
        }
 
        xy = info.proxy.current;
 
        this.getSlider().onThumbBeforeDragStart(this, event, xy.x, xy.y);
    },
 
    onDragStart: function(source, info, event) {
        var xy = info.proxy.current;
 
        this.getSlider().onThumbDragStart(this, event, xy.x, xy.y);
    },
 
    onDragMove: function(source, info, event) {
        var xy;
 
        if (this.isDisabled()) {
            return false;
        }
 
        xy = info.proxy.current;
 
        this.getSlider().onThumbDragMove(this, event, xy.x, xy.y);
    },
 
    onDragEnd: function(source, info, event) {
        var xy;
 
        if (this.isDisabled()) {
            return false;
        }
 
        xy = info.proxy.current;
 
        this.getSlider().onThumbDragEnd(this, event, xy.x, xy.y);
    },
 
    onTranslate: function(translatable, x, y) {
        if (this.initialized) {
            this.getSlider().syncFill(this, x, y);
        }
    },
 
    onResize: function(width, height) {
        var me = this,
            slider = me.ownerCmp;
 
        me.elementWidth = width;
        me.elementHeight = height;
 
        if (slider && slider.thumbs && slider.thumbs[0] === me) {
            slider.onThumbResize(me, width, height);
        }
    },
 
    getElementWidth: function() {
        return this.elementWidth;
    },
 
    updateUi: function(ui, oldUi) {
        var me = this,
            sizerCls = me.sizerCls,
            sizerElement = me.sizerElement;
 
        if (oldUi) {
            sizerElement.removeCls(oldUi, sizerCls);
        }
 
        if (ui) {
            sizerElement.addCls(ui, sizerCls);
        }
 
        me.callParent([ui, oldUi]);
    },
 
    updateDragMax: function(max) {
        var constraint = this.getDraggable().getConstrain(),
            rangeX = constraint.getX(),
            rangeY = constraint.getY(),
            vertical = this.getSlider().getVertical();
 
        if (vertical) {
            constraint.setY([ rangeY && rangeY[0], max ]);
        }
        else {
            constraint.setX([ rangeX && rangeX[0], max ]);
        }
    },
 
    updateDragMin: function(min) {
        var constraint = this.getDraggable().getConstrain(),
            rangeX = constraint.getX(),
            rangeY = constraint.getY(),
            vertical = this.getSlider().getVertical();
 
        if (vertical) {
            constraint.setY([ min, rangeY && rangeY[1] ]);
        }
        else {
            constraint.setX([ min, rangeX && rangeX[1] ]);
        }
    },
 
    updateVertical: function(vertical) {
        var draggable = this.getDraggable();
 
        draggable.setConstrain({
            vertical: vertical,
            horizontal: !vertical
        });
    },
 
    destroy: function() {
        Ext.destroyMembers(this, 'fillElement', 'sizerElement');
        this.callParent();
    }
});