import * as tslib_1 from "tslib";
import * as React from 'react';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { ContextualMenu, } from 'office-ui-fabric-react/lib/ContextualMenu';
import { CheckboxVisibility, ColumnActionsMode, ConstrainMode, DetailsList, DetailsListLayoutMode as LayoutMode, Selection, SelectionMode, buildColumns } from 'office-ui-fabric-react/lib/DetailsList';
import { createListItems, isGroupable } from '@uifabric/example-app-base';
import './DetailsList.Advanced.Example.scss';
var DEFAULT_ITEM_LIMIT = 5;
var PAGING_SIZE = 10;
var PAGING_DELAY = 5000;
var ITEMS_COUNT = 5000;
var _items;
var DetailsListAdvancedExample = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsListAdvancedExample, _super);
    function DetailsListAdvancedExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onRenderMissingItem = function (index) {
            _this._onDataMiss(index);
            return null;
        };
        _this._onToggleLazyLoad = function () {
            var isLazyLoaded = _this.state.isLazyLoaded;
            isLazyLoaded = !isLazyLoaded;
            _this.setState({
                isLazyLoaded: isLazyLoaded,
                items: isLazyLoaded ? _items.slice(0, PAGING_SIZE).concat(new Array(ITEMS_COUNT - PAGING_SIZE)) : _items
            });
        };
        _this._onToggleResizing = function () {
            var _a = _this.state, items = _a.items, sortedColumnKey = _a.sortedColumnKey, isSortedDescending = _a.isSortedDescending;
            var canResizeColumns = _this.state.canResizeColumns;
            canResizeColumns = !canResizeColumns;
            _this.setState({
                canResizeColumns: canResizeColumns,
                columns: _this._buildColumns(items, canResizeColumns, _this._onColumnClick, sortedColumnKey, isSortedDescending)
            });
        };
        _this._onLayoutChanged = function (ev, menuItem) {
            _this.setState({
                layoutMode: menuItem.data
            });
        };
        _this._onConstrainModeChanged = function (ev, menuItem) {
            _this.setState({
                constrainMode: menuItem.data
            });
        };
        _this._onSelectionChanged = function (ev, menuItem) {
            _this.setState({
                selectionMode: menuItem.data
            });
        };
        _this._onItemLimitChanged = function (value) {
            var newValue = parseInt(value, 10);
            if (isNaN(newValue)) {
                newValue = DEFAULT_ITEM_LIMIT;
            }
            _this.setState({
                groupItemLimit: newValue
            });
        };
        _this._getCommandItems = function () {
            var _a = _this.state, canResizeColumns = _a.canResizeColumns, checkboxVisibility = _a.checkboxVisibility, constrainMode = _a.constrainMode, isHeaderVisible = _a.isHeaderVisible, isLazyLoaded = _a.isLazyLoaded, layoutMode = _a.layoutMode, selectionMode = _a.selectionMode;
            return [
                {
                    key: 'addRow',
                    name: 'Insert row',
                    icon: 'Add',
                    onClick: _this._onAddRow
                },
                {
                    key: 'deleteRow',
                    name: 'Delete row',
                    icon: 'Delete',
                    onClick: _this._onDeleteRow
                },
                {
                    key: 'configure',
                    name: 'Configure',
                    icon: 'Settings',
                    subMenuProps: {
                        items: [
                            {
                                key: 'resizing',
                                name: 'Allow column resizing',
                                canCheck: true,
                                checked: canResizeColumns,
                                onClick: _this._onToggleResizing
                            },
                            {
                                key: 'headerVisible',
                                name: 'Is header visible',
                                canCheck: true,
                                checked: isHeaderVisible,
                                onClick: function () { return _this.setState({ isHeaderVisible: !isHeaderVisible }); }
                            },
                            {
                                key: 'lazyload',
                                name: 'Simulate async loading',
                                canCheck: true,
                                checked: isLazyLoaded,
                                onClick: _this._onToggleLazyLoad
                            },
                            {
                                key: 'dash',
                                name: '-'
                            },
                            {
                                key: 'checkboxVisibility',
                                name: 'Checkbox visibility',
                                subMenuProps: {
                                    items: [
                                        {
                                            key: 'checkboxVisibility.always',
                                            name: 'Always',
                                            canCheck: true,
                                            isChecked: checkboxVisibility === CheckboxVisibility.always,
                                            onClick: function () { return _this.setState({ checkboxVisibility: CheckboxVisibility.always }); }
                                        },
                                        {
                                            key: 'checkboxVisibility.onHover',
                                            name: 'On hover',
                                            canCheck: true,
                                            isChecked: checkboxVisibility === CheckboxVisibility.onHover,
                                            onClick: function () { return _this.setState({ checkboxVisibility: CheckboxVisibility.onHover }); }
                                        },
                                        {
                                            key: 'checkboxVisibility.hidden',
                                            name: 'Hidden',
                                            canCheck: true,
                                            isChecked: checkboxVisibility === CheckboxVisibility.hidden,
                                            onClick: function () { return _this.setState({ checkboxVisibility: CheckboxVisibility.hidden }); }
                                        },
                                    ]
                                }
                            },
                            {
                                key: 'layoutMode',
                                name: 'Layout mode',
                                subMenuProps: {
                                    items: [
                                        {
                                            key: LayoutMode[LayoutMode.fixedColumns],
                                            name: 'Fixed columns',
                                            canCheck: true,
                                            checked: layoutMode === LayoutMode.fixedColumns,
                                            onClick: _this._onLayoutChanged,
                                            data: LayoutMode.fixedColumns
                                        },
                                        {
                                            key: LayoutMode[LayoutMode.justified],
                                            name: 'Justified columns',
                                            canCheck: true,
                                            checked: layoutMode === LayoutMode.justified,
                                            onClick: _this._onLayoutChanged,
                                            data: LayoutMode.justified
                                        }
                                    ]
                                }
                            },
                            {
                                key: 'selectionMode',
                                name: 'Selection mode',
                                subMenuProps: {
                                    items: [
                                        {
                                            key: SelectionMode[SelectionMode.none],
                                            name: 'None',
                                            canCheck: true,
                                            checked: selectionMode === SelectionMode.none,
                                            onClick: _this._onSelectionChanged,
                                            data: SelectionMode.none
                                        },
                                        {
                                            key: SelectionMode[SelectionMode.single],
                                            name: 'Single select',
                                            canCheck: true,
                                            checked: selectionMode === SelectionMode.single,
                                            onClick: _this._onSelectionChanged,
                                            data: SelectionMode.single
                                        },
                                        {
                                            key: SelectionMode[SelectionMode.multiple],
                                            name: 'Multi select',
                                            canCheck: true,
                                            checked: selectionMode === SelectionMode.multiple,
                                            onClick: _this._onSelectionChanged,
                                            data: SelectionMode.multiple
                                        },
                                    ]
                                }
                            },
                            {
                                key: 'constrainMode',
                                name: 'Constrain mode',
                                subMenuProps: {
                                    items: [
                                        {
                                            key: ConstrainMode[ConstrainMode.unconstrained],
                                            name: 'Unconstrained',
                                            canCheck: true,
                                            checked: constrainMode === ConstrainMode.unconstrained,
                                            onClick: _this._onConstrainModeChanged,
                                            data: ConstrainMode.unconstrained
                                        },
                                        {
                                            key: ConstrainMode[ConstrainMode.horizontalConstrained],
                                            name: 'Horizontal constrained',
                                            canCheck: true,
                                            checked: constrainMode === ConstrainMode.horizontalConstrained,
                                            onClick: _this._onConstrainModeChanged,
                                            data: ConstrainMode.horizontalConstrained
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                }
            ];
        };
        _this._onItemInvoked = function (item, index) {
            console.log('Item invoked', item, index);
        };
        _this._onItemContextMenu = function (item, index, ev) {
            if (ev.target.nodeName === 'A') {
                return true;
            }
            console.log('Item context menu invoked', item, index);
            return false;
        };
        _this._onColumnClick = function (ev, column) {
            if (column.columnActionsMode !== ColumnActionsMode.disabled) {
                _this.setState({
                    contextualMenuProps: _this._getContextualMenuProps(ev, column)
                });
            }
        };
        _this._onColumnContextMenu = function (column, ev) {
            if (column.columnActionsMode !== ColumnActionsMode.disabled) {
                _this.setState({
                    contextualMenuProps: _this._getContextualMenuProps(ev, column)
                });
            }
        };
        _this._onContextualMenuDismissed = function () {
            _this.setState({
                contextualMenuProps: undefined
            });
        };
        _this._onSortColumn = function (key, isSortedDescending) {
            var sortedItems = _items.slice(0).sort(function (a, b) { return (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1; });
            _this.setState({
                items: sortedItems,
                groups: undefined,
                columns: _this._buildColumns(sortedItems, true, _this._onColumnClick, key, isSortedDescending, undefined, _this._onColumnContextMenu),
                isSortedDescending: isSortedDescending,
                sortedColumnKey: key
            });
        };
        _this._onGroupByColumn = function (column) {
            var key = column.key, isGrouped = column.isGrouped;
            var _a = _this.state, sortedColumnKey = _a.sortedColumnKey, isSortedDescending = _a.isSortedDescending, groups = _a.groups, items = _a.items, columns = _a.columns;
            if (isGrouped) {
                _this._onSortColumn(sortedColumnKey, !!isSortedDescending);
            }
            else {
                var groupedItems = [];
                var newGroups = null;
                if (groups) {
                    newGroups = groups.concat([]);
                    groupedItems = _this._groupByKey(newGroups, items, key);
                }
                else {
                    groupedItems = _this._groupItems(items, key);
                    newGroups = _this._getGroups(groupedItems, key);
                }
                var newColumns = columns;
                newColumns.filter(function (matchColumn) { return matchColumn.key === key; }).forEach(function (groupedColumn) {
                    groupedColumn.isGrouped = true;
                });
                _this.setState({
                    items: groupedItems,
                    columns: newColumns,
                    groups: newGroups
                });
            }
        };
        _this._onAddRow = function () {
            _this.setState({
                items: createListItems(1).concat(_this.state.items)
            });
        };
        _this._onDeleteRow = function () {
            _this.setState({
                items: _this.state.items.slice(1)
            });
        };
        if (!_items) {
            _items = createListItems(ITEMS_COUNT);
        }
        _this._selection = new Selection();
        _this._selection.setItems(_items, false);
        _this.state = {
            items: _items,
            groups: undefined,
            groupItemLimit: DEFAULT_ITEM_LIMIT,
            layoutMode: LayoutMode.justified,
            constrainMode: ConstrainMode.horizontalConstrained,
            selectionMode: SelectionMode.multiple,
            canResizeColumns: true,
            checkboxVisibility: CheckboxVisibility.onHover,
            columns: _this._buildColumns(_items, true, _this._onColumnClick, '', undefined, undefined, _this._onColumnContextMenu),
            contextualMenuProps: undefined,
            sortedColumnKey: 'name',
            isSortedDescending: false,
            isLazyLoaded: false,
            isHeaderVisible: true
        };
        return _this;
    }
    DetailsListAdvancedExample.prototype.render = function () {
        var _a = this.state, checkboxVisibility = _a.checkboxVisibility, columns = _a.columns, constrainMode = _a.constrainMode, contextualMenuProps = _a.contextualMenuProps, groupItemLimit = _a.groupItemLimit, groups = _a.groups, isHeaderVisible = _a.isHeaderVisible, items = _a.items, layoutMode = _a.layoutMode, selectionMode = _a.selectionMode;
        var isGrouped = groups && groups.length > 0;
        var groupProps = {
            getGroupItemLimit: function (group) {
                if (group) {
                    return group.isShowingAll ? group.count : Math.min(group.count, groupItemLimit);
                }
                else {
                    return items.length;
                }
            },
            footerProps: {
                showAllLinkText: 'Show all'
            }
        };
        return (React.createElement("div", { className: 'ms-DetailsListAdvancedExample' },
            React.createElement(CommandBar, { items: this._getCommandItems() }),
            (isGrouped) ?
                React.createElement(TextField, { label: 'Group Item Limit', onChanged: this._onItemLimitChanged }) :
                (null),
            React.createElement(DetailsList, { setKey: 'items', items: items, groups: groups, columns: columns, checkboxVisibility: checkboxVisibility, layoutMode: layoutMode, isHeaderVisible: isHeaderVisible, selectionMode: selectionMode, constrainMode: constrainMode, groupProps: groupProps, onItemInvoked: this._onItemInvoked, onItemContextMenu: this._onItemContextMenu, ariaLabelForListHeader: 'Column headers. Use menus to perform column operations like sort and filter', ariaLabelForSelectAllCheckbox: 'Toggle selection for all items', ariaLabelForSelectionColumn: 'Toggle selection', onRenderMissingItem: this._onRenderMissingItem }),
            contextualMenuProps && (React.createElement(ContextualMenu, tslib_1.__assign({}, contextualMenuProps)))));
    };
    DetailsListAdvancedExample.prototype._onDataMiss = function (index) {
        var _this = this;
        index = Math.floor(index / PAGING_SIZE) * PAGING_SIZE;
        if (!this._isFetchingItems) {
            this._isFetchingItems = true;
            setTimeout(function () {
                _this._isFetchingItems = false;
                var itemsCopy = [].concat(_this.state.items);
                itemsCopy.splice.apply(itemsCopy, [index, PAGING_SIZE].concat(_items.slice(index, index + PAGING_SIZE)));
                _this.setState({
                    items: itemsCopy
                });
            }, PAGING_DELAY);
        }
    };
    DetailsListAdvancedExample.prototype._getContextualMenuProps = function (ev, column) {
        var _this = this;
        var items = [
            {
                key: 'aToZ',
                name: 'A to Z',
                icon: 'SortUp',
                canCheck: true,
                checked: column.isSorted && !column.isSortedDescending,
                onClick: function () { return _this._onSortColumn(column.key, false); }
            },
            {
                key: 'zToA',
                name: 'Z to A',
                icon: 'SortDown',
                canCheck: true,
                checked: column.isSorted && column.isSortedDescending,
                onClick: function () { return _this._onSortColumn(column.key, true); }
            }
        ];
        if (isGroupable(column.key)) {
            items.push({
                key: 'groupBy',
                name: 'Group By ' + column.name,
                icon: 'GroupedDescending',
                canCheck: true,
                checked: column.isGrouped,
                onClick: function () { return _this._onGroupByColumn(column); }
            });
        }
        return {
            items: items,
            target: ev.currentTarget,
            directionalHint: 4 /* bottomLeftEdge */,
            gapSpace: 10,
            isBeakVisible: true,
            onDismiss: this._onContextualMenuDismissed
        };
    };
    DetailsListAdvancedExample.prototype._groupByKey = function (groups, items, key) {
        var _this = this;
        var groupedItems = [];
        if (groups) {
            groups.forEach(function (group) {
                if (group.children && group.children.length > 0) {
                    var childGroupedItems = _this._groupByKey(group.children, items, key);
                    groupedItems = groupedItems.concat(childGroupedItems);
                }
                else {
                    var itemsInGroup = items.slice(group.startIndex, group.startIndex + group.count);
                    var nextLevelGroupedItems = _this._groupItems(itemsInGroup, key);
                    groupedItems = groupedItems.concat(nextLevelGroupedItems);
                    group.children = _this._getGroups(nextLevelGroupedItems, key, group);
                }
            });
        }
        return groupedItems;
    };
    DetailsListAdvancedExample.prototype._groupItems = function (items, columnKey) {
        return items.slice(0).sort(function (a, b) { return ((a[columnKey] < b[columnKey]) ? -1 : 1); });
    };
    DetailsListAdvancedExample.prototype._getGroups = function (groupedItems, key, parentGroup) {
        var _this = this;
        var separator = '-';
        var groups = groupedItems.reduce(function (current, item, index) {
            var currentGroup = current[current.length - 1];
            if (!currentGroup || (_this._getLeafGroupKey(currentGroup.key, separator) !== item[key])) {
                current.push({
                    key: (parentGroup ? parentGroup.key + separator : '') + item[key],
                    name: key + ': ' + item[key],
                    startIndex: parentGroup ? parentGroup.startIndex + index : index,
                    count: 1,
                    level: parentGroup ? parentGroup.level + 1 : 0
                });
            }
            else {
                currentGroup.count++;
            }
            return current;
        }, []);
        return groups;
    };
    DetailsListAdvancedExample.prototype._getLeafGroupKey = function (key, separator) {
        var leafKey = key;
        if (key.indexOf(separator) !== -1) {
            var arrKeys = key.split(separator);
            leafKey = arrKeys[arrKeys.length - 1];
        }
        return leafKey;
    };
    DetailsListAdvancedExample.prototype._buildColumns = function (items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, onColumnContextMenu) {
        var columns = buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey);
        columns.forEach(function (column) {
            column.onColumnContextMenu = onColumnContextMenu;
            column.ariaLabel = "Operations for " + column.name;
            if (column.key === 'thumbnail') {
                column.iconName = 'Picture';
                column.isIconOnly = true;
            }
            else if (column.key === 'description') {
                column.isMultiline = true;
                column.minWidth = 200;
            }
            else if (column.key === 'name') {
                column.onRender = function (item) { return (React.createElement(Link, { "data-selection-invoke": true }, item.name)); };
            }
            else if (column.key === 'key') {
                column.columnActionsMode = ColumnActionsMode.disabled;
                column.onRender = function (item) { return (React.createElement(Link, { href: '#' }, item.key)); };
                column.minWidth = 90;
                column.maxWidth = 90;
            }
        });
        return columns;
    };
    return DetailsListAdvancedExample;
}(React.Component));
export { DetailsListAdvancedExample };
//# sourceMappingURL=DetailsList.Advanced.Example.js.map