/**
 * A core util class to bring Draggable behavior to a Component. This class is specifically designed only for
 * absolutely positioned elements starting from top: 0, left: 0. The initialOffset can then be set via configuration
 * to have the elements in a different position.
 * @deprecated 6.5.0 This class has been replaced by `Ext.drag.Source`.
 */
Ext.define('Ext.util.Draggable', {
    isDraggable: true,
 
    mixins: [
        'Ext.mixin.Observable'
    ],
 
    /**
     * @event dragstart
     * @preventable
     * Fires whenever the component starts to be dragged
     * @param {Ext.util.Draggable} this 
     * @param {Ext.event.Event} e the event object
     * @param {Number} offsetX The current offset value on the x axis
     * @param {Number} offsetY The current offset value on the y axis
     */
 
    /**
     * @event drag
     * Fires whenever the component is dragged
     * @param {Ext.util.Draggable} this 
     * @param {Ext.event.Event} e the event object
     * @param {Number} offsetX The new offset value on the x axis
     * @param {Number} offsetY The new offset value on the y axis
     */
 
    /**
     * @event dragend
     * Fires whenever the component is dragged
     * @param {Ext.util.Draggable} this 
     * @param {Ext.event.Event} e the event object
     * @param {Number} offsetX The current offset value on the x axis
     * @param {Number} offsetY The current offset value on the y axis
     */
 
    config: {
        cls: Ext.baseCSSPrefix + 'draggable',
 
        draggingCls: Ext.baseCSSPrefix + 'dragging',
 
        element: null,
 
        constraint: 'container',
 
        disabled: null,
 
        /**
         * @cfg {String} direction
         * Possible values: 'vertical', 'horizontal', or 'both'
         * @accessor
         */
        direction: 'both',
 
        /**
         * @cfg {Object/Number} initialOffset
         * The initial draggable offset.  When specified as Number,
         * both x and y will be set to that value.
         */
        initialOffset: {
            x: 0,
            y: 0
        },
 
        translatable: {},
 
        /**
         * @cfg {Ext.Component} component
         * The component being dragged.
         */
        component: null
    },
 
    DIRECTION_BOTH: 'both',
 
    DIRECTION_VERTICAL: 'vertical',
 
    DIRECTION_HORIZONTAL: 'horizontal',
 
    defaultConstraint: {
        min: { x: -Infinity, y: -Infinity },
        max: { x: Infinity, y: Infinity }
    },
 
    containerWidth: 0,
 
    containerHeight: 0,
 
    width: 0,
 
    height: 0,
 
    /**
     * Creates new Draggable.
     * @param {Object} config The configuration object for this Draggable.
     */
    constructor: function(config) {
        var element;
 
        this.extraConstraint = {};
 
        this.initialConfig = config;
 
        this.offset = {
            x: 0,
            y: 0
        };
 
        this.elementListeners = {
            dragstart: 'onDragStart',
            drag     : 'onDrag',
            dragend  : 'onDragEnd',
            resize   : 'onElementResize',
            touchstart : 'onPress',
            touchend   : 'onRelease',
            // high priority ensures that these listeners run before user listeners
            // so that draggable state is correct in user handlers
            priority: 2000,
            scope: this
        };
 
        if (config && config.element) {
            element = config.element;
            delete config.element;
 
            this.setElement(element);
        }
 
        return this;
    },
 
    applyElement: function(element) {
        if (!element) {
            return;
        }
 
        return Ext.get(element);
    },
 
    updateElement: function(element) {
        element.on(this.elementListeners);
        element.setTouchAction({
            panX: false,
            panY: false
        });
 
        this.mixins.observable.constructor.call(this, this.initialConfig);
    },
 
    updateInitialOffset: function (initialOffset) {
        if (typeof initialOffset === 'number') {
            initialOffset = {
                x: initialOffset,
                y: initialOffset
            };
        }
        else if (!initialOffset) {
            return;
        }
 
        var offset = this.offset,
            x, y;
 
        offset.x = x = initialOffset.x;
        offset.y = y = initialOffset.y;
 
        this.getTranslatable().translate(x, y);
    },
 
    updateCls: function(cls) {
        this.getElement().addCls(cls);
    },
 
    applyTranslatable: function(translatable, currentInstance) {
        translatable = Ext.factory(translatable, Ext.util.translatable.CssTransform, currentInstance, 'translatable');
        if (translatable) {
            translatable.setElement(this.getElement());
        }
 
        return translatable;
    },
 
    setExtraConstraint: function(constraint) {
        this.extraConstraint = constraint || {};
 
        this.refreshConstraint();
 
        return this;
    },
 
    addExtraConstraint: function(constraint) {
        Ext.merge(this.extraConstraint, constraint);
 
        this.refreshConstraint();
 
        return this;
    },
 
    applyConstraint: function(newConstraint) {
        this.currentConstraint = newConstraint;
 
        if (!newConstraint) {
            newConstraint = this.defaultConstraint;
        }
 
        if (newConstraint === 'container') {
            return Ext.merge(this.getContainerConstraint(), this.extraConstraint);
        }
 
        return Ext.merge({}, this.extraConstraint, newConstraint);
    },
 
    updateConstraint: function() {
        this.refreshOffset();
    },
 
    getContainerConstraint: function() {
        var container = this.getContainer(),
            element = this.getElement(),
            borders;
 
        if (!container || !element.dom) {
            return this.defaultConstraint;
        }
 
        borders = container.getBorders();
        return {
            min: { x: 0, y: 0 },
            max: { x: this.containerWidth - this.width - borders.beforeX - borders.afterX, y: this.containerHeight - this.height - borders.beforeY - borders.afterY }
        };
    },
 
    getContainer: function() {
        var container = this.container;
 
        if (!container) {
            container = this.getElement().getParent();
 
            if (container) {
                this.container = container;
 
                container.on({
                    resize: 'onContainerResize',
                    destroy: 'onContainerDestroy',
                    scope: this,
                    // The resize listener must have a high priority, so that the draggable
                    // instance is refreshed prior to other parties who may be listening
                    // for resize on the same element.  For example, slider listens to
                    // resize on its element and expects that the draggable thumbs have
                    // already had their draggable instances refreshed.
                    priority: 2000
                });
            }
        }
 
        return container;
    },
 
    onElementResize: function(element, info) {
        this.width = info.width;
        this.height = info.height;
        this.refreshContainerSize();
    },
 
    onContainerResize: function(container, info) {
        this.containerWidth = info.contentWidth;
        this.containerHeight = info.contentHeight;
 
        this.refresh();
    },
 
    refreshContainerSize: function() {
        // refreshes container size from dom.  Useful when the draggable element did not
        // have a parentNode at the time the draggable was initialized.  Invoke this
        // as soon as the element is appended to its parent to ensure correct constraining
        var me = this,
            container = me.getContainer();
 
        me.containerWidth = container.getWidth();
        me.containerHeight = container.getHeight();
 
        this.refresh();
 
        return me;
    },
 
    onContainerDestroy: function() {
        delete this.container;
        delete this.containerSizeMonitor;
    },
 
    detachListeners: function() {
        this.getElement().un(this.elementListeners);
    },
 
    isAxisEnabled: function(axis) {
        var direction = this.getDirection();
 
        if (axis === 'x') {
            return (direction === this.DIRECTION_BOTH || direction === this.DIRECTION_HORIZONTAL);
        }
 
        return (direction === this.DIRECTION_BOTH || direction === this.DIRECTION_VERTICAL);
    },
 
    onPress: function(e) {
        this.fireEvent('touchstart', this, e);
    },
 
    onRelease: function(e) {
        this.fireEvent('touchend', this, e);
    },
 
    onDragStart: function(e) {
        var me = this,
            offset = me.offset;
 
        if (me.getDisabled()) {
            return false;
        }
 
        me.fireEventedAction('dragstart', [me, e, offset.x, offset.y], me.initDragStart, me);
    },
 
    initDragStart: function(me, e, offsetX, offsetY) {
        this.dragStartOffset = {
            x: offsetX,
            y: offsetY
        };
 
        this.isDragging = true;
 
        this.getElement().addCls(this.getDraggingCls());
    },
 
    onDrag: function(e) {
        if (!this.isDragging) {
            return;
        }
 
        var startOffset = this.dragStartOffset;
 
        this.fireAction('drag', [this, e, startOffset.x + e.deltaX, startOffset.y + e.deltaY], this.doDrag);
    },
 
    doDrag: function(me, e, offsetX, offsetY) {
        me.setOffset(offsetX, offsetY);
    },
 
    onDragEnd: function(e) {
        if (!this.isDragging) {
            return;
        }
 
        this.onDrag(e);
 
        this.isDragging = false;
 
        this.getElement().removeCls(this.getDraggingCls());
 
        this.fireEvent('dragend', this, e, this.offset.x, this.offset.y);
    },
 
    setOffset: function(x, y, animation) {
        var currentOffset = this.offset,
            constraint = this.getConstraint(),
            minOffset = constraint.min,
            maxOffset = constraint.max,
            min = Math.min,
            max = Math.max;
 
        if (this.isAxisEnabled('x') && typeof x === 'number') {
            x = min(max(x, minOffset.x), maxOffset.x);
        }
        else {
            x = currentOffset.x;
        }
 
        if (this.isAxisEnabled('y') && typeof y === 'number') {
            y = min(max(y, minOffset.y), maxOffset.y);
        }
        else {
            y = currentOffset.y;
        }
 
        currentOffset.x = x;
        currentOffset.y = y;
 
        this.getTranslatable().translate(x, y, animation);
    },
 
    getOffset: function() {
        return this.offset;
    },
 
    refreshConstraint: function() {
        this.setOffset.apply(this, this.getTranslatable().syncPosition());
        this.setConstraint(this.currentConstraint);
    },
 
    refreshOffset: function() {
        var offset = this.offset;
 
        this.setOffset(offset.x, offset.y);
    },
 
    refresh: function() {
        this.refreshConstraint();
        this.getTranslatable().refresh();
        this.refreshOffset();
    },
 
    /**
     * Enable the Draggable.
     * @return {Ext.util.Draggable} This Draggable instance
     */
    enable: function() {
        return this.setDisabled(false);
    },
 
    /**
     * Disable the Draggable.
     * @return {Ext.util.Draggable} This Draggable instance
     */
    disable: function() {
        return this.setDisabled(true);
    },
 
    destroy: function() {
        var me = this,
            translatable = me.getTranslatable();
 
        var element = me.getElement();
        if (element && !element.destroyed) {
            element.removeCls(me.getCls());
        }
        me.setComponent(null);
 
        me.detachListeners();
 
        if (translatable) {
            translatable.destroy();
        }
 
        me.callParent();
    }
});