define(["require", "exports", "tslib", "react", "../../Utilities", "../../utilities/selection/index", "./GroupHeader", "./GroupShowAll", "./GroupFooter", "../../List"], function (require, exports, tslib_1, React, Utilities_1, index_1, GroupHeader_1, GroupShowAll_1, GroupFooter_1, List_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
    var GroupedListSection = /** @class */ (function (_super) {
        tslib_1.__extends(GroupedListSection, _super);
        function GroupedListSection(props) {
            var _this = _super.call(this, props) || this;
            _this._root = React.createRef();
            _this._list = React.createRef();
            _this._onRenderGroupHeader = function (props) {
                return React.createElement(GroupHeader_1.GroupHeader, tslib_1.__assign({}, props));
            };
            _this._onRenderGroupShowAll = function (props) {
                return React.createElement(GroupShowAll_1.GroupShowAll, tslib_1.__assign({}, props));
            };
            _this._onRenderGroupFooter = function (props) {
                return React.createElement(GroupFooter_1.GroupFooter, tslib_1.__assign({}, props));
            };
            _this._renderSubGroup = function (subGroup, subGroupIndex) {
                var _a = _this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, getGroupItemLimit = _a.getGroupItemLimit, groupNestingDepth = _a.groupNestingDepth, groupProps = _a.groupProps, items = _a.items, headerProps = _a.headerProps, showAllProps = _a.showAllProps, footerProps = _a.footerProps, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, onRenderGroupHeader = _a.onRenderGroupHeader, onRenderGroupShowAll = _a.onRenderGroupShowAll, onRenderGroupFooter = _a.onRenderGroupFooter, onShouldVirtualize = _a.onShouldVirtualize, group = _a.group, compact = _a.compact;
                var nestingDepth = subGroup.level ? subGroup.level + 1 : groupNestingDepth;
                return !subGroup || subGroup.count > 0 || (groupProps && groupProps.showEmptyGroups) ? (React.createElement(GroupedListSection, { ref: 'subGroup_' + subGroupIndex, key: _this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: nestingDepth, groupProps: groupProps, headerProps: headerProps, items: items, listProps: listProps, onRenderCell: onRenderCell, selection: selection, selectionMode: selectionMode, showAllProps: showAllProps, viewport: viewport, onRenderGroupHeader: onRenderGroupHeader, onRenderGroupShowAll: onRenderGroupShowAll, onRenderGroupFooter: onRenderGroupFooter, onShouldVirtualize: onShouldVirtualize, groups: group.children, compact: compact })) : null;
            };
            /**
             * collect all the data we need to enable drag/drop for a group
             */
            _this._getGroupDragDropOptions = function () {
                var _a = _this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
                var options = {
                    eventMap: eventsToRegister,
                    selectionIndex: -1,
                    context: { data: group, index: groupIndex, isGroup: true },
                    canDrag: function () { return false; },
                    canDrop: dragDropEvents.canDrop,
                    updateDropState: _this._updateDroppingState
                };
                return options;
            };
            /**
             * update groupIsDropping state based on the input value, which is used to change style during drag and drop
             *
             * @param newValue - new isDropping state value
             * @param event - the event trigger dropping state change which can be dragenter, dragleave etc
             */
            _this._updateDroppingState = function (newIsDropping, event) {
                var isDropping = _this.state.isDropping;
                var dragDropEvents = _this.props.dragDropEvents;
                if (!isDropping) {
                    if (dragDropEvents && dragDropEvents.onDragLeave) {
                        dragDropEvents.onDragLeave(event, undefined);
                    }
                }
                else {
                    if (dragDropEvents && dragDropEvents.onDragEnter) {
                        dragDropEvents.onDragEnter(event, undefined);
                    }
                }
                if (isDropping !== newIsDropping) {
                    _this.setState({ isDropping: newIsDropping });
                }
            };
            var selection = props.selection, group = props.group;
            Utilities_1.initializeComponentRef(_this);
            _this._id = Utilities_1.getId('GroupedListSection');
            _this.state = {
                isDropping: false,
                isSelected: selection && group ? selection.isRangeSelected(group.startIndex, group.count) : false
            };
            _this._events = new Utilities_1.EventGroup(_this);
            return _this;
        }
        GroupedListSection.prototype.componentDidMount = function () {
            var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection;
            if (dragDropHelper && this._root.current) {
                this._dragDropSubscription = dragDropHelper.subscribe(this._root.current, this._events, this._getGroupDragDropOptions());
            }
            if (selection) {
                this._events.on(selection, index_1.SELECTION_CHANGE, this._onSelectionChange);
            }
        };
        GroupedListSection.prototype.componentWillUnmount = function () {
            this._events.dispose();
            if (this._dragDropSubscription) {
                this._dragDropSubscription.dispose();
            }
        };
        GroupedListSection.prototype.componentDidUpdate = function (previousProps) {
            if (this.props.group !== previousProps.group ||
                this.props.groupIndex !== previousProps.groupIndex ||
                this.props.dragDropHelper !== previousProps.dragDropHelper) {
                if (this._dragDropSubscription) {
                    this._dragDropSubscription.dispose();
                    delete this._dragDropSubscription;
                }
                if (this.props.dragDropHelper && this._root.current) {
                    this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getGroupDragDropOptions());
                }
            }
        };
        GroupedListSection.prototype.render = function () {
            var _a = this.props, getGroupItemLimit = _a.getGroupItemLimit, group = _a.group, groupIndex = _a.groupIndex, headerProps = _a.headerProps, showAllProps = _a.showAllProps, footerProps = _a.footerProps, viewport = _a.viewport, selectionMode = _a.selectionMode, _b = _a.onRenderGroupHeader, onRenderGroupHeader = _b === void 0 ? this._onRenderGroupHeader : _b, _c = _a.onRenderGroupShowAll, onRenderGroupShowAll = _c === void 0 ? this._onRenderGroupShowAll : _c, _d = _a.onRenderGroupFooter, onRenderGroupFooter = _d === void 0 ? this._onRenderGroupFooter : _d, onShouldVirtualize = _a.onShouldVirtualize, groupedListClassNames = _a.groupedListClassNames, groups = _a.groups, compact = _a.compact, _e = _a.listProps, listProps = _e === void 0 ? {} : _e;
            var isSelected = this.state.isSelected;
            var renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
            var isShowAllVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll && (group.count > renderCount || group.hasMoreData);
            var hasNestedGroups = group && group.children && group.children.length > 0;
            var version = listProps.version;
            var dividerProps = {
                group: group,
                groupIndex: groupIndex,
                groupLevel: group ? group.level : 0,
                isSelected: isSelected,
                selected: isSelected,
                viewport: viewport,
                selectionMode: selectionMode,
                groups: groups,
                compact: compact
            };
            var ariaControlsProps = {
                groupedListId: this._id
            };
            var groupHeaderProps = tslib_1.__assign({}, headerProps, dividerProps, ariaControlsProps);
            var groupShowAllProps = tslib_1.__assign({}, showAllProps, dividerProps);
            var groupFooterProps = tslib_1.__assign({}, footerProps, dividerProps);
            return (React.createElement("div", { ref: this._root, className: Utilities_1.css(groupedListClassNames && groupedListClassNames.group, this._getDroppingClassName()), role: "presentation" },
                onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader),
                group && group.isCollapsed ? null : hasNestedGroups ? (React.createElement(List_1.List, { role: "presentation", ref: this._list, items: group.children, onRenderCell: this._renderSubGroup, getItemCountForPage: this._returnOne, onShouldVirtualize: onShouldVirtualize, version: version, id: this._id })) : (this._onRenderGroup(renderCount)),
                group && group.isCollapsed ? null : isShowAllVisible && onRenderGroupShowAll(groupShowAllProps, this._onRenderGroupShowAll),
                onRenderGroupFooter(groupFooterProps, this._onRenderGroupFooter)));
        };
        GroupedListSection.prototype.forceUpdate = function () {
            _super.prototype.forceUpdate.call(this);
            this.forceListUpdate();
        };
        GroupedListSection.prototype.forceListUpdate = function () {
            var group = this.props.group;
            if (this._list.current) {
                this._list.current.forceUpdate();
                if (group && group.children && group.children.length > 0) {
                    var subGroupCount = group.children.length;
                    for (var i = 0; i < subGroupCount; i++) {
                        var subGroup = this._list.current.refs['subGroup_' + String(i)];
                        if (subGroup) {
                            subGroup.forceListUpdate();
                        }
                    }
                }
            }
            else {
                var subGroup = this.refs['subGroup_' + String(0)];
                if (subGroup) {
                    subGroup.forceListUpdate();
                }
            }
        };
        GroupedListSection.prototype._onSelectionChange = function () {
            var _a = this.props, group = _a.group, selection = _a.selection;
            var isSelected = selection.isRangeSelected(group.startIndex, group.count);
            if (isSelected !== this.state.isSelected) {
                this.setState({ isSelected: isSelected });
            }
        };
        GroupedListSection.prototype._onRenderGroupCell = function (onRenderCell, groupNestingDepth) {
            return function (item, itemIndex) {
                return onRenderCell(groupNestingDepth, item, itemIndex);
            };
        };
        GroupedListSection.prototype._onRenderGroup = function (renderCount) {
            var _a = this.props, group = _a.group, items = _a.items, onRenderCell = _a.onRenderCell, listProps = _a.listProps, groupNestingDepth = _a.groupNestingDepth, onShouldVirtualize = _a.onShouldVirtualize;
            var count = group && !group.isShowingAll ? group.count : items.length;
            var startIndex = group ? group.startIndex : 0;
            return (React.createElement(List_1.List, tslib_1.__assign({ role: "grid", items: items, onRenderCell: this._onRenderGroupCell(onRenderCell, groupNestingDepth), ref: this._list, renderCount: Math.min(count, renderCount), startIndex: startIndex, onShouldVirtualize: onShouldVirtualize, id: this._id }, listProps)));
        };
        GroupedListSection.prototype._returnOne = function () {
            return 1;
        };
        GroupedListSection.prototype._getGroupKey = function (group, index) {
            return 'group-' + (group && group.key ? group.key : String(group.level) + String(index));
        };
        /**
         * get the correct css class to reflect the dropping state for a given group
         *
         * If the group is the current drop target, return the default dropping class name
         * Otherwise, return '';
         *
         */
        GroupedListSection.prototype._getDroppingClassName = function () {
            var isDropping = this.state.isDropping;
            var _a = this.props, group = _a.group, groupedListClassNames = _a.groupedListClassNames;
            isDropping = !!(group && isDropping);
            return Utilities_1.css(isDropping && DEFAULT_DROPPING_CSS_CLASS, isDropping && groupedListClassNames && groupedListClassNames.groupIsDropping);
        };
        return GroupedListSection;
    }(React.Component));
    exports.GroupedListSection = GroupedListSection;
});
//# sourceMappingURL=GroupedListSection.js.map