"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var index_1 = require("../../utilities/selection/index");
var Check_1 = require("../../Check");
var Icon_1 = require("../../Icon");
var GroupSpacer_1 = require("./GroupSpacer");
var Spinner_1 = require("../../Spinner");
var FocusZone_1 = require("../../FocusZone");
var stylesImport = require("./GroupHeader.scss");
var styles = stylesImport;
var GroupHeader = (function (_super) {
    tslib_1.__extends(GroupHeader, _super);
    function GroupHeader(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isCollapsed: (_this.props.group && _this.props.group.isCollapsed),
            isLoadingVisible: false
        };
        return _this;
    }
    GroupHeader.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.group) {
            var newCollapsed = newProps.group.isCollapsed;
            var isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading;
            var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(newProps.group);
            this.setState({
                isCollapsed: newCollapsed,
                isLoadingVisible: newLoadingVisible
            });
        }
    };
    GroupHeader.prototype.render = function () {
        var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, isSelected = _a.isSelected, selected = _a.selected, isCollapsedGroupSelectVisible = _a.isCollapsedGroupSelectVisible;
        var _b = this.state, isCollapsed = _b.isCollapsed, isLoadingVisible = _b.isLoadingVisible;
        if (isCollapsedGroupSelectVisible === undefined) {
            isCollapsedGroupSelectVisible = true;
        }
        var canSelectGroup = selectionMode === index_1.SelectionMode.multiple;
        var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
        var currentlySelected = isSelected || selected;
        if (!group) {
            return null;
        }
        return (React.createElement("div", { className: Utilities_1.css('ms-GroupHeader', styles.root, (_c = {},
                _c['is-selected ' + styles.rootIsSelected] = currentlySelected,
                _c)), style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, "aria-label": group.ariaLabel || group.name, "data-is-focusable": true },
            React.createElement(FocusZone_1.FocusZone, { className: styles.groupHeaderContainer, direction: FocusZone_1.FocusZoneDirection.horizontal },
                isSelectionCheckVisible ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-check', styles.check), "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick },
                    React.createElement(Check_1.Check, { checked: currentlySelected }))) : (selectionMode !== index_1.SelectionMode.none ? GroupSpacer_1.GroupSpacer({ count: 1 }) : null),
                GroupSpacer_1.GroupSpacer({ count: groupLevel }),
                React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-dropIcon', styles.dropIcon) },
                    React.createElement(Icon_1.Icon, { iconName: 'Tag' })),
                React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-expand', styles.expand), onClick: this._onToggleCollapse },
                    React.createElement(Icon_1.Icon, { className: Utilities_1.css(isCollapsed && ('is-collapsed ' + styles.expandIsCollapsed)), iconName: 'ChevronDown' })),
                React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-title', styles.title) },
                    React.createElement("span", null, group.name),
                    React.createElement("span", { className: styles.headerCount },
                        "(",
                        group.count,
                        group.hasMoreData && '+',
                        ")")),
                React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-loading', styles.loading, isLoadingVisible && ('is-loading ' + styles.loadingIsVisible)) },
                    React.createElement(Spinner_1.Spinner, { label: loadingText })))));
        var _c;
    };
    GroupHeader.prototype._onToggleCollapse = function (ev) {
        var _a = this.props, group = _a.group, onToggleCollapse = _a.onToggleCollapse, isGroupLoading = _a.isGroupLoading;
        var isCollapsed = this.state.isCollapsed;
        var newCollapsed = !isCollapsed;
        var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group);
        this.setState({
            isCollapsed: newCollapsed,
            isLoadingVisible: newLoadingVisible
        });
        if (onToggleCollapse) {
            onToggleCollapse(group);
        }
        ev.stopPropagation();
        ev.preventDefault();
    };
    GroupHeader.prototype._onToggleSelectGroupClick = function (ev) {
        var _a = this.props, onToggleSelectGroup = _a.onToggleSelectGroup, group = _a.group;
        if (onToggleSelectGroup) {
            onToggleSelectGroup(group);
        }
        ev.preventDefault();
        ev.stopPropagation();
    };
    GroupHeader.prototype._onHeaderClick = function () {
        var _a = this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick, onToggleSelectGroup = _a.onToggleSelectGroup;
        if (onGroupHeaderClick) {
            onGroupHeaderClick(group);
        }
        else if (onToggleSelectGroup) {
            onToggleSelectGroup(group);
        }
    };
    return GroupHeader;
}(Utilities_1.BaseComponent));
tslib_1.__decorate([
    Utilities_1.autobind
], GroupHeader.prototype, "_onToggleCollapse", null);
tslib_1.__decorate([
    Utilities_1.autobind
], GroupHeader.prototype, "_onToggleSelectGroupClick", null);
tslib_1.__decorate([
    Utilities_1.autobind
], GroupHeader.prototype, "_onHeaderClick", null);
exports.GroupHeader = GroupHeader;

//# sourceMappingURL=GroupHeader.js.map
