/**
 * @private
 */
Ext.define('Ext.view.DragZone', {
    extend: 'Ext.dd.DragZone',

    containerScroll: false,

    constructor: function(config) {
        var me = this,
            view, ownerCt, el;

        Ext.apply(me, config);

        // Create a ddGroup unless one has been configured.
        // User configuration of ddGroups allows users to specify which
        // DD instances can interact with each other. Using one
        // based on the id of the View would isolate it and mean it can only
        // interact with a DropZone on the same View also using a generated ID.
        if (!me.ddGroup) {
            me.ddGroup = 'view-dd-zone-' + me.view.id;
        }

        // Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
        // So a View's DragZone cannot use the View's main element because the DropZone
        // must use that because the DropZone may need to scroll on hover at a scrolling boundary,
        // and it is the View's main element which handles scrolling.
        // We use the View's parent element to drag from. Ideally, we would use the internal
        // structure, but that is transient; DataViews recreate the internal structure dynamically
        // as data changes.
        // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
        view = me.view;

        // This is for https://www.w3.org/TR/pointerevents/ platforms.
        // On these platforms, the pointerdown event (single touchstart) is reserved for
        // initiating a scroll gesture. Setting the items draggable defeats that and
        // enables the touchstart event to trigger a drag.
        //
        // Two finger dragging will still scroll on these platforms.
        view.setItemsDraggable(true);

        ownerCt = view.ownerCt;

        // We don't just grab the parent el, since the parent el may be
        // some el injected by the layout
        if (ownerCt) {
            el = ownerCt.getTargetEl().dom;
        }
        else {
            el = view.el.dom.parentNode;
        }

        me.callParent([el]);

        me.ddel = document.createElement('div');
        me.ddel.className = Ext.baseCSSPrefix + 'grid-dd-wrap';
    },

    init: function(id, sGroup, config) {
        var me = this,
            eventSpec = {
                itemmousedown: me.onItemMouseDown,
                scope: me
            };

        // If there may be ambiguity with touch/swipe to scroll and a drag gesture
        // trigger drag start on longpress and a *real* mousedown.
        if (Ext.supports.Touch) {
            eventSpec.itemlongpress = me.onItemLongPress;

            // Longpress fires contextmenu in some touch platforms, so if we are using longpress
            // inhibit the contextmenu on this element
            eventSpec.contextmenu = {
                element: 'el',
                fn: me.onViewContextMenu
            };
        }

        me.initTarget(id, sGroup, config);
        me.view.mon(me.view, eventSpec);
    },

    onValidDrop: function(target, e, id) {
        this.callParent([target, e, id]);

        // focus the view that the node was dropped onto so that keynav will be enabled.
        if (!target.el.contains(Ext.Element.getActiveElement())) {
            target.el.focus();
        }
    },

    onViewContextMenu: function(e) {
        if (e.pointerType !== 'mouse') {
            e.preventDefault();
        }
    },

    onItemMouseDown: function(view, record, item, index, e) {
        // Ignore touchstart.
        // For touch events, we use longpress.
        if (e.pointerType === 'mouse') {
            this.onTriggerGesture(view, record, item, index, e);
        }
    },

    onItemLongPress: function(view, record, item, index, e) {
        // Ignore long mousedowns.
        // The initial mousedown started the drag.
        // For touch events, we use longpress.
        if (e.pointerType !== 'mouse') {
            this.onTriggerGesture(view, record, item, index, e);
        }
    },

    onTriggerGesture: function(view, record, item, index, e) {
        var navModel;

        // Only respond to longpress for touch dragging.
        // Reject drag start if mousedown is on the actionable cell of a grid view
        if ((e.pointerType === 'touch' && e.type !== 'longpress') ||
            (e.position && e.position.isEqual(e.view.actionPosition))) {
            return;
        }

        if (!this.isPreventDrag(e, record, item, index)) {
            navModel = view.getNavigationModel();

            // Since handleMouseDown prevents the default behavior of the event, which
            // is to focus the view, we focus the view now.  This ensures that the view
            // remains focused if the drag is cancelled, or if no drag occurs.
            //
            // A Table event will have a position property which is a CellContext
            if (e.position) {
                navModel.setPosition(e.position);
            }
            // Otherwise, just use the item index
            else {
                navModel.setPosition(index);
            }

            this.handleMouseDown(e);
        }
    },

    /**
     * @protected
     * Template method called upon mousedown. May be overridden in subclasses, or configured
     * into an instance.
     *
     * Return `true` to prevent drag start.
     * @param {Ext.event.Event} e The mousedown event.
     * @param {Ext.data.Model} record The record mousedowned upon.
     * @param {HTMLElement} item The grid row mousedowned upon.
     * @param {Number} index The row number mousedowned upon.
     */
    isPreventDrag: function(e, record, item, index) {
        return !!e.isInputFieldEvent;
    },

    getDragData: function(e) {
        var view = this.view,
            item = e.getTarget(view.getItemSelector());

        if (item) {
            return {
                copy: view.copy || (view.allowCopy && e.ctrlKey),
                event: e,
                view: view,
                ddel: this.ddel,
                item: item,
                records: view.getSelectionModel().getSelection(),
                fromPosition: Ext.fly(item).getXY()
            };
        }
    },

    onInitDrag: function(x, y) {
        var me = this,
            data = me.dragData,
            view = data.view,
            selectionModel = view.getSelectionModel(),
            record = view.getRecord(data.item);

        // Update the selection to match what would have been selected if the user had
        // done a full click on the target node rather than starting a drag from it
        if (!selectionModel.isSelected(record)) {
            selectionModel.selectWithEvent(record, me.DDMInstance.mousedownEvent);
        }

        data.records = selectionModel.getSelection();

        Ext.fly(me.ddel).setHtml(me.getDragText());
        me.proxy.update(me.ddel);
        me.onStartDrag(x, y);

        return true;
    },

    getDragText: function() {
        var count = this.dragData.records.length;

        return Ext.String.format(this.dragText, count, count === 1 ? '' : 's');
    },

    getRepairXY: function(e, data) {
        return data ? data.fromPosition : false;
    }
});