"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var DetailsList_1 = require("office-ui-fabric-react/lib/DetailsList");
var MarqueeSelection_1 = require("office-ui-fabric-react/lib/MarqueeSelection");
var exampleData_1 = require("../../../utilities/exampleData");
require("./DetailsList.DragDrop.Example.scss");
var _draggedItem = null;
var _draggedIndex = -1;
var DetailsListDragDropExample = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsListDragDropExample, _super);
    function DetailsListDragDropExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onRenderItemColumn = _this._onRenderItemColumn.bind(_this);
        _this._selection = new DetailsList_1.Selection();
        _this.state = {
            items: exampleData_1.createListItems(10)
        };
        return _this;
    }
    DetailsListDragDropExample.prototype.render = function () {
        var _a = this.state, items = _a.items, selectionDetails = _a.selectionDetails;
        return (React.createElement("div", { className: "detailsListDragDropExample" },
            React.createElement("div", null, selectionDetails),
            React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: this._selection },
                React.createElement(DetailsList_1.DetailsList, { setKey: "items", items: items, selection: this._selection, selectionPreservedOnEmptyClick: true, onItemInvoked: this._onItemInvoked, onRenderItemColumn: this._onRenderItemColumn, dragDropEvents: this._getDragDropEvents() }))));
    };
    DetailsListDragDropExample.prototype._getDragDropEvents = function () {
        var _this = this;
        return {
            canDrop: function (dropContext, dragContext) {
                return true;
            },
            canDrag: function (item) {
                return true;
            },
            onDragEnter: function (item, event) {
                return 'dragEnter';
            },
            onDragLeave: function (item, event) {
                return;
            },
            onDrop: function (item, event) {
                if (_draggedItem) {
                    _this._insertBeforeItem(item);
                }
            },
            onDragStart: function (item, itemIndex, selectedItems, event) {
                _draggedItem = item;
                _draggedIndex = itemIndex;
            },
            onDragEnd: function (item, event) {
                _draggedItem = null;
                _draggedIndex = -1;
            }
        };
    };
    DetailsListDragDropExample.prototype._onItemInvoked = function (item) {
        alert("Item invoked: " + item.name);
    };
    DetailsListDragDropExample.prototype._onRenderItemColumn = function (item, index, column) {
        if (column.key === 'name') {
            return React.createElement(Link_1.Link, { "data-selection-invoke": true }, item[column.key]);
        }
        return item[column.key];
    };
    DetailsListDragDropExample.prototype._insertBeforeItem = function (item) {
        var draggedItems = this._selection.isIndexSelected(_draggedIndex)
            ? this._selection.getSelection()
            : [_draggedItem];
        var items = this.state.items.filter(function (i) { return draggedItems.indexOf(i) === -1; });
        var insertIndex = items.indexOf(item);
        // if dragging/dropping on itself, index will be 0.
        if (insertIndex === -1) {
            insertIndex = 0;
        }
        items.splice.apply(items, [insertIndex, 0].concat(draggedItems));
        this.setState({ items: items });
    };
    return DetailsListDragDropExample;
}(React.Component));
exports.DetailsListDragDropExample = DetailsListDragDropExample;
//# sourceMappingURL=DetailsList.DragDrop.Example.js.map