/**
 * @private
 */
Ext.define('Ext.pivot.plugin.configurator.DropZone', {
    extend: 'Ext.drag.Target',
 
    groups: 'pivotfields',
 
    leftIndicatorCls: Ext.baseCSSPrefix + 'pivot-grid-left-indicator',
    rightIndicatorCls: Ext.baseCSSPrefix + 'pivot-grid-right-indicator',
    listItemSelector: '.' + Ext.baseCSSPrefix + 'listitem',
    listSelector: '.' + Ext.baseCSSPrefix + 'list',
 
    constructor: function(panel) {
        var list = panel.getList();
 
        this.panel = panel;
        this.list = list;
 
        this.callParent([{
            element: list.getScrollable().getElement()
        }]);
    },
 
    getLeftIndicator: function() {
        if (!this.leftIndicator) {
            this.self.prototype.leftIndicator = Ext.getBody().createChild({
                cls: this.leftIndicatorCls,
                html: " "
            });
            this.self.prototype.indicatorWidth = this.leftIndicator.dom.offsetWidth;
            this.self.prototype.indicatorOffset = Math.round(this.indicatorWidth / 2);
        }
 
        return this.leftIndicator;
    },
 
    getRightIndicator: function() {
        if (!this.rightIndicator) {
            this.self.prototype.rightIndicator = Ext.getBody().createChild({
                cls: this.rightIndicatorCls,
                html: " "
            });
        }
 
        return this.rightIndicator;
    },
 
    accepts: function(info) {
        var data = info.data,
            record = data.record,
            source = data.sourceList,
            target = this.panel,
            panel = target.up('pivotconfigpanel');
 
        if (!record) {
            return true;
        }
 
        if (!source.isXType('pivotconfigcontainer')) {
            source = source.up('pivotconfigcontainer');
        }
 
        return record.get('field').getSettings().isAllowed(target) &&
               panel.isAllowed(source, target, data.record);
    },
 
    onDragMove: function(info) {
        if (info.valid) {
            this.positionIndicator(info);
        }
        else {
            this.hideIndicators();
        }
    },
 
    onDragLeave: function(info) {
        this.hideIndicators();
    },
 
    onDrop: function(info) {
        var data = info.data,
            source = data.sourceList,
            target = this.panel,
            panel = target.up('pivotconfigpanel');
 
        this.hideIndicators();
 
        if (!panel) {
            return;
        }
 
        if (!source.isXType('pivotconfigcontainer')) {
            source = source.up('pivotconfigcontainer');
        }
 
        panel.dragDropField(source, target, data.record, data.position);
    },
 
    positionIndicator: function(info) {
        var me = this,
            pos = -1,
            leftIndicator = me.getLeftIndicator(),
            rightIndicator = me.getRightIndicator(),
            indWidth = me.indicatorWidth,
            indOffset = me.indicatorOffset,
            el, item, leftXY, rightXY, minX, maxX, minY, maxY,
            leftAnchor, rightAnchor;
 
        el = me.getCursorElement(info, me.listItemSelector);
 
        if (el) {
            item = el.component;
            leftAnchor = 'tl';
            rightAnchor = 'tr';
            pos = item.$dataIndex;
        }
        else {
            leftAnchor = 'bl';
            rightAnchor = 'br';
            pos = me.list.getViewItems().length;
            item = me.list.getItemAt(pos - 1);
 
            if (item) {
                el = item.element;
            }
            else {
                el = me.getCursorElement(info, me.listSelector);
            }
 
        }
 
        leftXY = leftIndicator.getAlignToXY(el, leftAnchor);
        rightXY = rightIndicator.getAlignToXY(el, rightAnchor);
 
        leftXY[0] -= 1;
        rightXY[0] -= indWidth;
 
        if (leftAnchor === 'tl') {
            leftXY[1] -= indWidth;
            rightXY[1] -= indWidth;
        }
 
        minX = minY = - indOffset;
 
        minX += el.getX();
        maxX = minX + el.getWidth();
        minY += el.getY();
        maxY = minY + el.getHeight();
 
        leftXY[0] = Ext.Number.constrain(leftXY[0], minX, maxX);
        rightXY[0] = Ext.Number.constrain(rightXY[0], minX, maxX);
        leftXY[1] = Ext.Number.constrain(leftXY[1], minY, maxY);
        rightXY[1] = Ext.Number.constrain(rightXY[1], minY, maxY);
 
        leftIndicator.show();
        rightIndicator.show();
        leftIndicator.setXY(leftXY);
        rightIndicator.setXY(rightXY);
 
        info.setData('position', pos);
    },
 
    hideIndicators: function() {
        this.getLeftIndicator().hide();
        this.getRightIndicator().hide();
    },
 
    /**
     * Find the element that matches the cursor position and selector.
     *
     * @param info
     * @param {String} selector The simple selector to test. See {@link Ext.dom.Query}
     * for information about simple selectors.
     * @param {Number/String/HTMLElement/Ext.dom.Element} [limit]
     * The max depth to search as a number or an element that causes the upward
     * traversal to stop and is **not** considered for inclusion as the result.
     * (defaults to 50 || document.documentElement)
     * @param {Boolean} [returnDom=false] True to return the DOM node instead of Ext.dom.Element
     * @return {Ext.dom.Element/HTMLElement} The matching DOM node (or HTMLElement if
     * _returnDom_ is _true_).  Or null if no match was found.
     */
    getCursorElement: function(info, selector, limit, returnDom) {
        var pos = info.cursor.current,
            elPoint = Ext.drag.Manager.elementFromPoint(pos.x, pos.y);
 
        return Ext.fly(elPoint).up(selector, limit, returnDom);
    }
});