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 __());
};
define(["require", "exports", 'react', './Check', './GroupSpacer', '../../Spinner', '../../FocusZone', '../../utilities/css', './GroupHeader.scss'], function (require, exports, React, Check_1, GroupSpacer_1, Spinner_1, FocusZone_1, css_1) {
    "use strict";
    var GroupHeader = (function (_super) {
        __extends(GroupHeader, _super);
        function GroupHeader(props) {
            _super.call(this, props);
            this._onToggleCollapse = this._onToggleCollapse.bind(this);
            this._onToggleSelectGroup = this._onToggleSelectGroup.bind(this);
            this._onHeaderClick = this._onHeaderClick.bind(this);
            this.state = {
                isCollapsed: this.props.group && this.props.group.isCollapsed,
                isLoadingVisible: false
            };
        }
        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, headerProps = _a.headerProps, viewport = _a.viewport;
            var _b = this.state, isCollapsed = _b.isCollapsed, isLoadingVisible = _b.isLoadingVisible;
            var showCheckBox = true;
            var isSelected = group && group.isSelected;
            var loadingText = headerProps && headerProps.loadingText;
            return group && (React.createElement("div", {className: css_1.css('ms-GroupHeader', {
                'is-selected': isSelected
            }), style: { minWidth: viewport.width }, onClick: this._onHeaderClick, "data-is-focusable": true}, React.createElement(FocusZone_1.FocusZone, {direction: FocusZone_1.FocusZoneDirection.horizontal}, showCheckBox && (React.createElement("button", {className: 'ms-GroupHeader-check', "data-selection-toggle": true, onClick: this._onToggleSelectGroup}, React.createElement(Check_1.Check, {isChecked: isSelected}))), GroupSpacer_1.GroupSpacer({ count: groupLevel }), React.createElement("button", {className: 'ms-GroupHeader-expand', onClick: this._onToggleCollapse}, React.createElement("i", {className: css_1.css('ms-Icon ms-Icon--chevronDown', {
                'is-collapsed': isCollapsed
            })})), React.createElement("div", {className: 'ms-GroupHeader-title ms-font-xl'}, React.createElement("span", null, group.name, " "), React.createElement("span", null, "(", group.count, ")")), React.createElement("div", {className: css_1.css('ms-GroupHeader-loading', { 'is-loading': isLoadingVisible })}, React.createElement(Spinner_1.Spinner, {label: loadingText})))));
        };
        GroupHeader.prototype._onToggleCollapse = function (ev) {
            var _a = this.props, group = _a.group, headerProps = _a.headerProps;
            var isCollapsed = this.state.isCollapsed;
            var onToggleCollapse = headerProps && headerProps.onToggleCollapse;
            var isGroupLoading = headerProps && headerProps.isGroupLoading;
            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._onToggleSelectGroup = function (ev) {
            var _a = this.props, group = _a.group, headerProps = _a.headerProps;
            var onToggleSelectGroup = headerProps && headerProps.onToggleSelectGroup;
            if (onToggleSelectGroup) {
                onToggleSelectGroup(group);
            }
            ev.preventDefault();
            ev.stopPropagation();
        };
        GroupHeader.prototype._onHeaderClick = function () {
            var _a = this.props, group = _a.group, headerProps = _a.headerProps;
            if (headerProps) {
                var onGroupHeaderClick = headerProps.onGroupHeaderClick, onToggleSelectGroup = headerProps.onToggleSelectGroup;
                if (onGroupHeaderClick) {
                    onGroupHeaderClick(group);
                }
                else if (onToggleSelectGroup) {
                    onToggleSelectGroup(group);
                }
            }
        };
        return GroupHeader;
    }(React.Component));
    exports.GroupHeader = GroupHeader;
});
