import * as tslib_1 from "tslib";
import * as React from 'react';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { DetailsList, Selection } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { buildColumns } from 'office-ui-fabric-react/lib/DetailsList';
import './DetailsList.DragDrop.Example.scss';
import { createListItems } from 'office-ui-fabric-react/lib/utilities/exampleData';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
var _draggedItem = null;
var _draggedIndex = -1;
var _items;
var _columns;
var DetailsListDragDropExample = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsListDragDropExample, _super);
    function DetailsListDragDropExample(props) {
        var _this = _super.call(this, props) || this;
        _this._handleColumnReorder = function (draggedIndex, targetIndex) {
            var draggedItems = _this.state.columns[draggedIndex];
            var newColumns = _this.state.columns.slice();
            // insert before the dropped item
            newColumns.splice(draggedIndex, 1);
            newColumns.splice(targetIndex, 0, draggedItems);
            _this.setState({ columns: newColumns });
        };
        _this._onChangeStartCountText = function (text) {
            _this.setState({ frozenColumnCountFromStart: text });
        };
        _this._onChangeEndCountText = function (text) {
            _this.setState({ frozenColumnCountFromEnd: text });
        };
        _this._onChangeColumnReorderEnabled = function (checked) {
            _this.setState({ isColumnReorderEnabled: checked });
        };
        _this._onRenderItemColumn = _this._onRenderItemColumn.bind(_this);
        _this._handleColumnReorder = _this._handleColumnReorder.bind(_this);
        _this._getColumnReorderOptions = _this._getColumnReorderOptions.bind(_this);
        _this._onChangeColumnReorderEnabled = _this._onChangeColumnReorderEnabled.bind(_this);
        _this._onChangeStartCountText = _this._onChangeStartCountText.bind(_this);
        _this._onChangeEndCountText = _this._onChangeEndCountText.bind(_this);
        _this._selection = new Selection();
        _items = _items || createListItems(10, 0);
        _columns = buildColumns(_items, true);
        _this.state = {
            items: createListItems(10),
            columns: _columns,
            isColumnReorderEnabled: false,
            frozenColumnCountFromStart: '1',
            frozenColumnCountFromEnd: '0'
        };
        return _this;
    }
    DetailsListDragDropExample.prototype.render = function () {
        var _a = this.state, items = _a.items, selectionDetails = _a.selectionDetails, columns = _a.columns, isColumnReorderEnabled = _a.isColumnReorderEnabled, frozenColumnCountFromStart = _a.frozenColumnCountFromStart, frozenColumnCountFromEnd = _a.frozenColumnCountFromEnd;
        return (React.createElement("div", { className: 'detailsListDragDropExample' },
            React.createElement(Toggle, { label: 'Enable Column Reorder', checked: isColumnReorderEnabled, onChanged: this._onChangeColumnReorderEnabled, onText: 'Enabled', offText: 'Disabled' }),
            React.createElement(TextField, { label: 'Number of Left frozen columns:', onGetErrorMessage: this._validateNumber, value: frozenColumnCountFromStart, onChanged: this._onChangeStartCountText }),
            React.createElement(TextField, { label: 'Number of Right frozen columns:', onGetErrorMessage: this._validateNumber, value: frozenColumnCountFromEnd, onChanged: this._onChangeEndCountText }),
            React.createElement("div", null, selectionDetails),
            React.createElement(MarqueeSelection, { selection: this._selection },
                React.createElement(DetailsList, { setKey: 'items', items: items, columns: columns, selection: this._selection, selectionPreservedOnEmptyClick: true, onItemInvoked: this._onItemInvoked, onRenderItemColumn: this._onRenderItemColumn, dragDropEvents: this._getDragDropEvents(), columnReorderOptions: this.state.isColumnReorderEnabled ? this._getColumnReorderOptions() : undefined }))));
    };
    DetailsListDragDropExample.prototype._getColumnReorderOptions = function () {
        return {
            frozenColumnCountFromStart: !isNaN(Number(this.state.frozenColumnCountFromStart))
                ? parseInt(this.state.frozenColumnCountFromStart, 10)
                : undefined,
            frozenColumnCountFromEnd: !isNaN(Number(this.state.frozenColumnCountFromEnd))
                ? parseInt(this.state.frozenColumnCountFromEnd, 10)
                : undefined,
            handleColumnReorder: this._handleColumnReorder
        };
    };
    DetailsListDragDropExample.prototype._validateNumber = function (value) {
        return isNaN(Number(value)) ? "The value should be a number, actual is " + value + "." : '';
    };
    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, { "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));
export { DetailsListDragDropExample };
//# sourceMappingURL=DetailsList.DragDrop.Example.js.map