"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var GroupFooter_1 = require('./GroupFooter');
var DetailsRow_1 = require('./DetailsRow');
var GroupHeader_1 = require('./GroupHeader');
var List_1 = require('../../List');
var EventGroup_1 = require('../../utilities/eventGroup/EventGroup');
var css_1 = require('../../utilities/css');
require('./DetailsGroup.scss');
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
var DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
var DetailsGroup = (function (_super) {
    __extends(DetailsGroup, _super);
    function DetailsGroup(props) {
        _super.call(this, props);
        this.state = {
            isDropping: false
        };
        this._onRenderCell = this._onRenderCell.bind(this);
        this._getGroupDragDropOptions = this._getGroupDragDropOptions.bind(this);
        this._updateDroppingState = this._updateDroppingState.bind(this);
        this._events = new EventGroup_1.EventGroup(this);
    }
    DetailsGroup.prototype.componentDidMount = function () {
        var dragDropHelper = this.props.dragDropHelper;
        if (dragDropHelper) {
            dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
        }
    };
    DetailsGroup.prototype.componentWillUnmount = function () {
        this._events.dispose();
        var dragDropHelper = this.props.dragDropHelper;
        if (dragDropHelper) {
            dragDropHelper.unsubscribe(this.refs.root, this._dragDropKey);
        }
    };
    DetailsGroup.prototype.render = function () {
        var _this = this;
        var _a = this.props, columns = _a.columns, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, group = _a.group, groupIndex = _a.groupIndex, groupNestingDepth = _a.groupNestingDepth, getGroupItemLimit = _a.getGroupItemLimit, items = _a.items, isSizing = _a.isSizing, headerProps = _a.headerProps, footerProps = _a.footerProps, onRenderMissingItem = _a.onRenderMissingItem, onRowDidMount = _a.onRowDidMount, onRowWillUnmount = _a.onRowWillUnmount, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, canSelectItem = _a.canSelectItem, checkButtonAriaLabel = _a.checkButtonAriaLabel;
        var renderCount = group ? getGroupItemLimit(group) : items.length;
        var isFooterVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll && group.count > renderCount;
        var nestedGroups = null;
        var hasNestedGroups = group && group.children && group.children.length > 0;
        if (hasNestedGroups) {
            nestedGroups = group.children.map(function (subGroup, subGroupIndex) { return ((!subGroup || subGroup.count > 0) ? (React.createElement(DetailsGroup, {ref: 'subGroup_' + subGroupIndex, key: _this._getGroupKey(subGroup, subGroupIndex), items: items, columns: columns, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: groupNestingDepth, getGroupItemLimit: getGroupItemLimit, selectionMode: selectionMode, selection: selection, eventsToRegister: eventsToRegister, onRowDidMount: onRowDidMount, onRowWillUnmount: onRowWillUnmount, dragDropEvents: dragDropEvents, onRenderMissingItem: onRenderMissingItem, dragDropHelper: dragDropHelper, viewport: viewport, headerProps: headerProps, footerProps: footerProps, checkboxVisibility: checkboxVisibility, getRowAriaLabel: getRowAriaLabel, canSelectItem: canSelectItem, checkButtonAriaLabel: checkButtonAriaLabel})) : null); });
        }
        return (React.createElement("div", {ref: 'root', className: css_1.css('ms-DetailsList-group', this._getDroppingClassName())}, group && group.onRenderHeader ?
            group.onRenderHeader(group) :
            React.createElement(GroupHeader_1.GroupHeader, {group: group, groupIndex: groupIndex, groupLevel: group ? group.level : 0, headerProps: headerProps, viewport: viewport, ref: 'header'}), group && group.isCollapsed ?
            null :
            (hasNestedGroups ?
                nestedGroups :
                React.createElement(List_1.List, {items: items, onRenderCell: this._onRenderCell, ref: 'list', renderCount: renderCount, renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD, renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND, selection: selection, startIndex: group ? group.startIndex : 0})), group && group.onRenderFooter ?
            group.onRenderFooter(group) :
            (isFooterVisible &&
                React.createElement(GroupFooter_1.GroupFooter, {group: group, groupIndex: groupIndex, groupLevel: group ? group.level : 0, footerProps: footerProps, ref: 'footer'}))));
    };
    DetailsGroup.prototype.forceListUpdate = function () {
        var group = this.props.group;
        if (this.refs.list) {
            this.refs.list.forceUpdate();
        }
        else if (group && group.children && group.children.length > 0) {
            var subGroupCount = group.children.length;
            for (var i = 0; i < subGroupCount; i++) {
                var subGroup = this.refs['subGroup_' + String(i)];
                if (subGroup) {
                    subGroup.forceListUpdate();
                }
            }
        }
    };
    DetailsGroup.prototype._getGroupKey = function (group, groupIndex) {
        return 'group-' + (group ?
            group.key + '-' + group.count :
            '');
    };
    DetailsGroup.prototype._onRenderCell = function (item, index) {
        var _a = this.props, columns = _a.columns, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, groupNestingDepth = _a.groupNestingDepth, onRenderMissingItem = _a.onRenderMissingItem, onRowDidMount = _a.onRowDidMount, onRowWillUnmount = _a.onRowWillUnmount, onRenderItemColumn = _a.onRenderItemColumn, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, canSelectItem = _a.canSelectItem, checkButtonAriaLabel = _a.checkButtonAriaLabel;
        if (!item) {
            if (onRenderMissingItem) {
                onRenderMissingItem(index);
            }
            return null;
        }
        return (React.createElement(DetailsRow_1.DetailsRow, {item: item, itemIndex: index, columns: columns, selectionMode: selectionMode, selection: selection, onDidMount: onRowDidMount, onWillUnmount: onRowWillUnmount, onRenderItemColumn: onRenderItemColumn, eventsToRegister: eventsToRegister, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, groupNestingDepth: groupNestingDepth, viewport: viewport, checkboxVisibility: checkboxVisibility, getRowAriaLabel: getRowAriaLabel, canSelectItem: canSelectItem, checkButtonAriaLabel: checkButtonAriaLabel}));
    };
    /**
     * collect all the data we need to enable drag/drop for a group
     */
    DetailsGroup.prototype._getGroupDragDropOptions = function () {
        var _a = this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
        this._dragDropKey = 'group-' + (group ? group.key : String(groupIndex));
        var options = {
            key: this._dragDropKey,
            eventMap: eventsToRegister,
            selectionIndex: -1,
            context: { data: group, index: groupIndex, isGroup: true },
            canDrag: function () { return false; },
            canDrop: dragDropEvents.canDrop,
            onDragStart: null,
            updateDropState: this._updateDroppingState
        };
        return options;
    };
    /**
     * update groupIsDropping state based on the input value, which is used to change style during drag and drop
     *
     * @private
     * @param {boolean} newValue (new isDropping state value)
     * @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
     */
    DetailsGroup.prototype._updateDroppingState = function (newIsDropping, event) {
        var isDropping = this.state.isDropping;
        var dragDropEvents = this.props.dragDropEvents;
        if (!isDropping) {
            if (dragDropEvents.onDragLeave) {
                dragDropEvents.onDragLeave(event, null);
            }
        }
        else {
            if (dragDropEvents.onDragEnter) {
                dragDropEvents.onDragEnter(event, null);
            }
        }
        if (isDropping !== newIsDropping) {
            this.setState({ isDropping: newIsDropping });
        }
    };
    /**
     * 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 '';
     *
     */
    DetailsGroup.prototype._getDroppingClassName = function () {
        var isDropping = this.state.isDropping;
        var group = this.props.group;
        var droppingClass = group && isDropping ? DEFAULT_DROPPING_CSS_CLASS : '';
        return droppingClass;
    };
    return DetailsGroup;
}(React.Component));
exports.DetailsGroup = DetailsGroup;

//# sourceMappingURL=DetailsGroup.js.map
