define(["require", "exports", "tslib", "react", "react-dom", "../../Utilities", "./DetailsList.types", "../../FocusZone", "../../Icon", "../../Layer", "../GroupedList/GroupSpacer", "../../GroupedList", "./DetailsRowCheck", "./DetailsRowCheck.scss", "../../utilities/selection/interfaces", "./DetailsHeader.scss", "./../../utilities/dragdrop/DragDropHelper", "./../../components/DetailsList/DetailsColumn"], function (require, exports, tslib_1, React, react_dom_1, Utilities_1, DetailsList_types_1, FocusZone_1, Icon_1, Layer_1, GroupSpacer_1, GroupedList_1, DetailsRowCheck_1, checkStylesModule, interfaces_1, stylesImport, DragDropHelper_1, DetailsColumn_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var checkStyles = checkStylesModule;
    var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
    var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
    var NO_COLUMNS = [];
    var SelectAllVisibility;
    (function (SelectAllVisibility) {
        SelectAllVisibility[SelectAllVisibility["none"] = 0] = "none";
        SelectAllVisibility[SelectAllVisibility["hidden"] = 1] = "hidden";
        SelectAllVisibility[SelectAllVisibility["visible"] = 2] = "visible";
    })(SelectAllVisibility = exports.SelectAllVisibility || (exports.SelectAllVisibility = {}));
    var DetailsHeader = /** @class */ (function (_super) {
        tslib_1.__extends(DetailsHeader, _super);
        function DetailsHeader(props) {
            var _this = _super.call(this, props) || this;
            _this._rootComponent = Utilities_1.createRef();
            _this._draggedColumnIndex = -1;
            _this._dropHintDetails = {};
            _this._renderColumnSizer = function (_a) {
                var columnIndex = _a.columnIndex;
                var _b = _this.props.columns, columns = _b === void 0 ? NO_COLUMNS : _b;
                var column = columns[columnIndex];
                var columnResizeDetails = _this.state.columnResizeDetails;
                return column.isResizable ? (React.createElement("div", { key: column.key + "_sizer", "aria-hidden": true, role: 'button', "data-is-focusable": false, onClick: stopPropagation, "data-sizer-index": columnIndex, onBlur: _this._onSizerBlur, className: Utilities_1.css('ms-DetailsHeader-cellSizer', styles.cellSizer, columnIndex < columns.length - 1 ? styles.cellSizerStart : styles.cellSizerEnd, (_c = {},
                        _c['is-resizing ' + styles.cellIsResizing] = columnResizeDetails && columnResizeDetails.columnIndex === columnIndex,
                        _c)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) })) : null;
                var _c;
            };
            _this._onRenderColumnHeaderTooltip = function (tooltipHostProps, defaultRender) {
                return React.createElement("span", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);
            };
            /**
             * Called when the select all toggle is clicked.
             */
            _this._onSelectAllClicked = function () {
                var selection = _this.props.selection;
                selection.toggleAllSelected();
            };
            _this._onRootMouseDown = function (ev) {
                var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
                var columnIndex = Number(columnIndexAttr);
                var columns = _this.props.columns;
                if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
                    // Ignore anything except the primary button.
                    return;
                }
                _this.setState({
                    columnResizeDetails: {
                        columnIndex: columnIndex,
                        columnMinWidth: columns[columnIndex].calculatedWidth,
                        originX: ev.clientX
                    }
                });
                ev.preventDefault();
                ev.stopPropagation();
            };
            _this._onRootMouseMove = function (ev) {
                var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
                if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
                    _this.setState({ isSizing: true });
                }
            };
            _this._onRootRef = function (focusZone) {
                if (focusZone) {
                    // Need to resolve the actual DOM node, not the component. The element itself will be used for drag/drop and focusing.
                    _this._rootElement = react_dom_1.findDOMNode(focusZone);
                }
                else {
                    _this._rootElement = undefined;
                }
            };
            _this._onRootKeyDown = function (ev) {
                var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
                var _b = _this.props, columns = _b.columns, onColumnResized = _b.onColumnResized;
                var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
                if (!columnIndexAttr || isSizing) {
                    return;
                }
                var columnIndex = Number(columnIndexAttr);
                if (!columnResizeDetails) {
                    if (ev.which === 13 /* enter */) {
                        _this.setState({
                            columnResizeDetails: {
                                columnIndex: columnIndex,
                                columnMinWidth: columns[columnIndex].calculatedWidth
                            }
                        });
                        ev.preventDefault();
                        ev.stopPropagation();
                    }
                }
                else {
                    var increment = void 0;
                    if (ev.which === 13 /* enter */) {
                        _this.setState({
                            columnResizeDetails: undefined
                        });
                        ev.preventDefault();
                        ev.stopPropagation();
                    }
                    else if (ev.which === 37 /* left */) {
                        increment = Utilities_1.getRTL() ? 1 : -1;
                    }
                    else if (ev.which === 39 /* right */) {
                        increment = Utilities_1.getRTL() ? -1 : 1;
                    }
                    if (increment) {
                        if (!ev.shiftKey) {
                            increment *= 10;
                        }
                        _this.setState({
                            columnResizeDetails: tslib_1.__assign({}, columnResizeDetails, { columnMinWidth: columnResizeDetails.columnMinWidth + increment })
                        });
                        if (onColumnResized) {
                            onColumnResized(columns[columnIndex], columnResizeDetails.columnMinWidth + increment, columnIndex);
                        }
                        ev.preventDefault();
                        ev.stopPropagation();
                    }
                }
            };
            /**
             * mouse move event handler in the header
             * it will set isSizing state to true when user clicked on the sizer and move the mouse.
             *
             * @private
             * @param {React.MouseEvent} ev (mouse move event)
             */
            _this._onSizerMouseMove = function (ev) {
                var 
                // use buttons property here since ev.button in some edge case is not upding well during the move.
                // but firefox doesn't support it, so we set the default value when it is not defined.
                buttons = ev.buttons;
                var _a = _this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, columns = _a.columns;
                var columnResizeDetails = _this.state.columnResizeDetails;
                if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
                    // cancel mouse down event and return early when the primary button is not pressed
                    _this._onSizerMouseUp(ev);
                    return;
                }
                if (ev.clientX !== columnResizeDetails.originX) {
                    if (onColumnIsSizingChanged) {
                        onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);
                    }
                }
                if (onColumnResized) {
                    var movement = ev.clientX - columnResizeDetails.originX;
                    if (Utilities_1.getRTL()) {
                        movement = -movement;
                    }
                    onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement, columnResizeDetails.columnIndex);
                }
            };
            _this._onSizerBlur = function (ev) {
                var columnResizeDetails = _this.state.columnResizeDetails;
                if (columnResizeDetails) {
                    _this.setState({
                        columnResizeDetails: undefined,
                        isSizing: false
                    });
                }
            };
            /**
             * mouse up event handler in the header
             * clear the resize related state.
             * This is to ensure we can catch double click event
             *
             * @private
             * @param {React.MouseEvent} ev (mouse up event)
             */
            _this._onSizerMouseUp = function (ev) {
                var _a = _this.props, columns = _a.columns, onColumnIsSizingChanged = _a.onColumnIsSizingChanged;
                var columnResizeDetails = _this.state.columnResizeDetails;
                _this.setState({
                    columnResizeDetails: undefined,
                    isSizing: false
                });
                if (onColumnIsSizingChanged) {
                    onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false);
                }
            };
            _this._columnReorderProps =
                props.columnReorderProps ||
                    (props.columnReorderOptions && getLegacyColumnReorderProps(props.columnReorderOptions));
            _this.state = {
                columnResizeDetails: undefined,
                groupNestingDepth: _this.props.groupNestingDepth,
                isAllCollapsed: _this.props.isAllCollapsed
            };
            _this._onToggleCollapseAll = _this._onToggleCollapseAll.bind(_this);
            _this._onSelectAllClicked = _this._onSelectAllClicked.bind(_this);
            _this._setDraggedItemIndex = _this._setDraggedItemIndex.bind(_this);
            _this._updateDragInfo = _this._updateDragInfo.bind(_this);
            _this._onDragOver = _this._onDragOver.bind(_this);
            _this._onDrop = _this._onDrop.bind(_this);
            _this._getHeaderDragDropOptions = _this._getHeaderDragDropOptions.bind(_this);
            _this._updateDroppingState = _this._updateDroppingState.bind(_this);
            _this._getDropHintPositions = _this._getDropHintPositions.bind(_this);
            _this._computeDropHintToBeShown = _this._computeDropHintToBeShown.bind(_this);
            _this._resetDropHints = _this._resetDropHints.bind(_this);
            _this._isValidCurrentDropHintIndex = _this._isValidCurrentDropHintIndex.bind(_this);
            _this._onRootRef = _this._onRootRef.bind(_this);
            _this._isEventOnHeader = _this._isEventOnHeader.bind(_this);
            _this._onDropIndexInfo = {
                sourceIndex: Number.MIN_SAFE_INTEGER,
                targetIndex: Number.MIN_SAFE_INTEGER
            };
            _this._id = Utilities_1.getId('header');
            _this._currentDropHintIndex = Number.MIN_SAFE_INTEGER;
            return _this;
        }
        DetailsHeader.prototype.componentDidMount = function () {
            var selection = this.props.selection;
            var columnReorderProps = this._columnReorderProps;
            this._events.on(selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged);
            // We need to use native on this to avoid MarqueeSelection from handling the event before us.
            this._events.on(this._rootElement, 'mousedown', this._onRootMouseDown);
            this._events.on(this._rootElement, 'keydown', this._onRootKeyDown);
            if (columnReorderProps && this._dragDropHelper) {
                this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement, this._events, this._getHeaderDragDropOptions());
            }
        };
        DetailsHeader.prototype.componentDidUpdate = function (prevProps) {
            this._columnReorderProps =
                this.props.columnReorderProps ||
                    (this.props.columnReorderOptions && getLegacyColumnReorderProps(this.props.columnReorderOptions));
            var columnReorderProps = this._columnReorderProps;
            if (!columnReorderProps) {
                if (this._subscriptionObject) {
                    this._subscriptionObject.dispose();
                    delete this._subscriptionObject;
                }
            }
            else if (!this._subscriptionObject && this._dragDropHelper) {
                this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement, this._events, this._getHeaderDragDropOptions());
            }
            if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {
                if (prevProps.columns[this._onDropIndexInfo.sourceIndex].key ===
                    this.props.columns[this._onDropIndexInfo.targetIndex].key) {
                    this._onDropIndexInfo = {
                        sourceIndex: Number.MIN_SAFE_INTEGER,
                        targetIndex: Number.MIN_SAFE_INTEGER
                    };
                }
            }
        };
        DetailsHeader.prototype.componentWillReceiveProps = function (newProps) {
            var groupNestingDepth = this.state.groupNestingDepth;
            if (newProps.groupNestingDepth !== groupNestingDepth) {
                this.setState({ groupNestingDepth: newProps.groupNestingDepth });
            }
        };
        DetailsHeader.prototype.componentWillUnmount = function () {
            if (this._subscriptionObject) {
                this._subscriptionObject.dispose();
                delete this._subscriptionObject;
            }
        };
        DetailsHeader.prototype.render = function () {
            var _this = this;
            var _a = this.props, columns = _a.columns, ariaLabel = _a.ariaLabel, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility, ariaLabelForSelectionColumn = _a.ariaLabelForSelectionColumn, onColumnClick = _a.onColumnClick, onColumnContextMenu = _a.onColumnContextMenu;
            var columnReorderProps = this._columnReorderProps;
            var _b = this.state, isAllSelected = _b.isAllSelected, columnResizeDetails = _b.columnResizeDetails, isSizing = _b.isSizing, groupNestingDepth = _b.groupNestingDepth, isAllCollapsed = _b.isAllCollapsed;
            var showCheckbox = selectAllVisibility !== SelectAllVisibility.none;
            var _c = this.props.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _c === void 0 ? this._onRenderColumnHeaderTooltip : _c;
            if (!this._dragDropHelper && columnReorderProps) {
                this._dragDropHelper = new DragDropHelper_1.DragDropHelper({
                    selection: {
                        getSelection: function () {
                            return;
                        }
                    },
                    minimumPixelsForDrag: this.props.minimumPixelsForDrag
                });
            }
            var frozenColumnCountFromStart = columnReorderProps && columnReorderProps.frozenColumnCountFromStart
                ? columnReorderProps.frozenColumnCountFromStart
                : 0;
            var frozenColumnCountFromEnd = columnReorderProps && columnReorderProps.frozenColumnCountFromEnd
                ? columnReorderProps.frozenColumnCountFromEnd
                : 0;
            return (React.createElement(FocusZone_1.FocusZone, { role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsHeader', styles.root, isAllSelected && 'is-allSelected ' + styles.rootIsAllSelected, selectAllVisibility === SelectAllVisibility.hidden && 'is-selectAllHidden ' + styles.rootIsSelectAllHidden, !!columnResizeDetails && isSizing && 'is-resizingColumn'), componentRef: this._rootComponent, ref: this._onRootRef, onMouseMove: this._onRootMouseMove, "data-automationid": 'DetailsHeader', direction: FocusZone_1.FocusZoneDirection.horizontal },
                showCheckbox
                    ? [
                        React.createElement("div", { key: '__checkbox', className: Utilities_1.css('ms-DetailsHeader-cell', 'ms-DetailsHeader-cellIsCheck', styles.cell, styles.cellIsCheck, checkStyles.owner, isAllSelected && checkStyles.isSelected), "aria-labelledby": this._id + "-check", onClick: this._onSelectAllClicked, "aria-colindex": 1, role: 'columnheader' }, onRenderColumnHeaderTooltip({
                            hostClassName: Utilities_1.css(styles.checkTooltip),
                            id: this._id + "-checkTooltip",
                            setAriaDescribedBy: false,
                            content: ariaLabelForSelectAllCheckbox,
                            children: (React.createElement(DetailsRowCheck_1.DetailsRowCheck, { id: this._id + "-check", "aria-label": ariaLabelForSelectionColumn, "aria-describedby": this._id + "-checkTooltip", "data-is-focusable": true, isHeader: true, selected: isAllSelected, anySelected: false, canSelect: true }))
                        }, this._onRenderColumnHeaderTooltip)),
                        ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (React.createElement("label", { key: '__checkboxLabel', id: this._id + "-checkTooltip", className: styles.accessibleLabel }, ariaLabelForSelectAllCheckbox)) : null
                    ]
                    : null,
                groupNestingDepth > 0 && this.props.collapseAllVisibility === GroupedList_1.CollapseAllVisibility.visible ? (React.createElement("div", { className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell), onClick: this._onToggleCollapseAll, "data-is-focusable": true, role: 'columnheader' },
                    React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-collapseButton', styles.collapseButton, isAllCollapsed && 'is-collapsed ' + styles.collapseButtonIsCollapsed), iconName: 'ChevronDown' }))) : null,
                GroupSpacer_1.GroupSpacer({ count: groupNestingDepth - 1, role: 'gridcell' }),
                columns.map(function (column, columnIndex) {
                    var _isDraggable = columnReorderProps
                        ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd
                        : false;
                    return [
                        columnReorderProps &&
                            (_isDraggable || columnIndex === columns.length - frozenColumnCountFromEnd) &&
                            _this._renderDropHint(columnIndex),
                        React.createElement(DetailsColumn_1.DetailsColumn, { column: column, key: column.key, columnIndex: (showCheckbox ? 1 : 0) + columnIndex, parentId: _this._id, isDraggable: _isDraggable, updateDragInfo: _this._updateDragInfo, dragDropHelper: _this._dragDropHelper, onColumnClick: onColumnClick, onColumnContextMenu: onColumnContextMenu, isDropped: _this._onDropIndexInfo.targetIndex === columnIndex }),
                        _this._renderColumnDivider(columnIndex)
                    ];
                }),
                columnReorderProps && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length),
                isSizing && (React.createElement(Layer_1.Layer, null,
                    React.createElement("div", { className: Utilities_1.css(isSizing && styles.sizingOverlay), onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp })))));
        };
        /** Set focus to the active thing in the focus area. */
        DetailsHeader.prototype.focus = function () {
            return Boolean(this._rootComponent.current && this._rootComponent.current.focus());
        };
        DetailsHeader.prototype._getHeaderDragDropOptions = function () {
            var options = {
                selectionIndex: 1,
                context: { data: this, index: 0 },
                canDrag: function () { return false; },
                canDrop: function () { return true; },
                onDragStart: function () { return undefined; },
                updateDropState: this._updateDroppingState,
                onDrop: this._onDrop,
                onDragEnd: function () { return undefined; },
                onDragOver: this._onDragOver
            };
            return options;
        };
        DetailsHeader.prototype._updateDroppingState = function (newValue, event) {
            if (this._draggedColumnIndex >= 0 && event.type !== 'drop') {
                if (!newValue) {
                    this._resetDropHints();
                }
            }
        };
        DetailsHeader.prototype._isValidCurrentDropHintIndex = function () {
            return this._currentDropHintIndex >= 0;
        };
        DetailsHeader.prototype._onDragOver = function (item, event) {
            if (this._draggedColumnIndex >= 0) {
                event.stopPropagation();
                this._computeDropHintToBeShown(event.clientX);
            }
        };
        DetailsHeader.prototype._onDrop = function (item, event) {
            var draggedColumnIndex = this._draggedColumnIndex;
            var columnReorderProps = this._columnReorderProps;
            // Target index will not get changed if draggeditem is after target item.
            if (this._draggedColumnIndex >= 0 && event) {
                var targetIndex = draggedColumnIndex > this._currentDropHintIndex
                    ? this._currentDropHintIndex
                    : this._currentDropHintIndex - 1;
                var isValidDrop = false;
                event.stopPropagation();
                if (this._isValidCurrentDropHintIndex()) {
                    isValidDrop = true;
                    this._onDropIndexInfo.sourceIndex = draggedColumnIndex;
                    this._onDropIndexInfo.targetIndex = targetIndex;
                }
                this._resetDropHints();
                this._dropHintDetails = {};
                this._draggedColumnIndex = -1;
                if (isValidDrop) {
                    if (columnReorderProps && columnReorderProps.onColumnDrop) {
                        var dragDropDetails = {
                            draggedIndex: draggedColumnIndex,
                            targetIndex: targetIndex
                        };
                        columnReorderProps.onColumnDrop(dragDropDetails);
                    }
                    else if (columnReorderProps && columnReorderProps.handleColumnReorder) {
                        columnReorderProps.handleColumnReorder(draggedColumnIndex, targetIndex);
                    }
                }
            }
        };
        DetailsHeader.prototype._setDraggedItemIndex = function (itemIndex) {
            if (itemIndex >= 0) {
                // Column index is set based on the checkbox
                this._draggedColumnIndex = this.props.selectionMode !== interfaces_1.SelectionMode.none ? itemIndex - 1 : itemIndex - 0;
                this._getDropHintPositions();
            }
            else {
                this._resetDropHints();
                this._draggedColumnIndex = -1;
                this._dropHintDetails = {};
            }
        };
        DetailsHeader.prototype._updateDragInfo = function (props, event) {
            var columnReorderProps = this._columnReorderProps;
            var itemIndex = props.itemIndex;
            if (itemIndex >= 0) {
                // Column index is set based on the checkbox
                this._draggedColumnIndex = this.props.selectionMode !== interfaces_1.SelectionMode.none ? itemIndex - 1 : itemIndex - 0;
                this._getDropHintPositions();
                if (columnReorderProps && columnReorderProps.onColumnDragStart) {
                    columnReorderProps.onColumnDragStart(true);
                }
            }
            else if (event && this._draggedColumnIndex >= 0) {
                this._resetDropHints();
                this._draggedColumnIndex = -1;
                this._dropHintDetails = {};
                if (columnReorderProps && columnReorderProps.onColumnDragEnd) {
                    var columnDragEndLocation = this._isEventOnHeader(event);
                    columnReorderProps.onColumnDragEnd({ dropLocation: columnDragEndLocation }, event);
                }
            }
        };
        DetailsHeader.prototype._resetDropHints = function () {
            if (this._currentDropHintIndex >= 0) {
                this._updateDropHintElement(this._dropHintDetails[this._currentDropHintIndex].dropHintElementRef, 'none');
                this._currentDropHintIndex = Number.MIN_SAFE_INTEGER;
            }
        };
        DetailsHeader.prototype._updateDropHintElement = function (element, displayProperty) {
            element.childNodes[1].style.display = displayProperty;
            element.childNodes[0].style.display = displayProperty;
        };
        DetailsHeader.prototype._getDropHintPositions = function () {
            var columns = this.props.columns;
            var columnReorderProps = this._columnReorderProps;
            var prevX = 0;
            var prevMid = 0;
            var prevRef;
            var frozenColumnCountFromStart = columnReorderProps && columnReorderProps.frozenColumnCountFromStart
                ? columnReorderProps.frozenColumnCountFromStart
                : 0;
            var frozenColumnCountFromEnd = columnReorderProps && columnReorderProps.frozenColumnCountFromEnd
                ? columnReorderProps.frozenColumnCountFromEnd
                : 0;
            for (var i = frozenColumnCountFromStart; i < columns.length - frozenColumnCountFromEnd + 1; i++) {
                if (this._rootElement) {
                    var dropHintElement = this._rootElement.querySelectorAll('#columnDropHint_' + i)[0];
                    if (dropHintElement) {
                        if (i === frozenColumnCountFromStart) {
                            prevX = dropHintElement.offsetLeft;
                            prevMid = dropHintElement.offsetLeft;
                            prevRef = dropHintElement;
                        }
                        else {
                            var newMid = (dropHintElement.offsetLeft + prevX) / 2;
                            this._dropHintDetails[i - 1] = {
                                originX: prevX,
                                startX: prevMid,
                                endX: newMid,
                                dropHintElementRef: prevRef
                            };
                            prevMid = newMid;
                            prevRef = dropHintElement;
                            prevX = dropHintElement.offsetLeft;
                            if (i === columns.length - frozenColumnCountFromEnd) {
                                this._dropHintDetails[i] = {
                                    originX: prevX,
                                    startX: prevMid,
                                    endX: dropHintElement.offsetLeft,
                                    dropHintElementRef: prevRef
                                };
                            }
                        }
                    }
                }
            }
        };
        /**
         * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible
         *
         */
        DetailsHeader.prototype._computeDropHintToBeShown = function (clientX) {
            if (this._rootElement) {
                var clientRect = this._rootElement.getBoundingClientRect();
                var headerOriginX = clientRect.left;
                var eventXRelativePosition = clientX - headerOriginX;
                var currentDropHintIndex = this._currentDropHintIndex;
                if (this._isValidCurrentDropHintIndex()) {
                    if (eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex].startX &&
                        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex].endX) {
                        return;
                    }
                }
                var columns = this.props.columns;
                var columnReorderProps = this._columnReorderProps;
                var frozenColumnCountFromStart = columnReorderProps && columnReorderProps.frozenColumnCountFromStart
                    ? columnReorderProps.frozenColumnCountFromStart
                    : 0;
                var frozenColumnCountFromEnd = columnReorderProps && columnReorderProps.frozenColumnCountFromEnd
                    ? columnReorderProps.frozenColumnCountFromEnd
                    : 0;
                var currentIndex = frozenColumnCountFromStart;
                var lastValidColumn = columns.length - frozenColumnCountFromEnd;
                var indexToUpdate = -1;
                if (eventXRelativePosition <= this._dropHintDetails[currentIndex].endX) {
                    indexToUpdate = currentIndex;
                }
                else if (eventXRelativePosition >= this._dropHintDetails[lastValidColumn].startX) {
                    indexToUpdate = lastValidColumn;
                }
                else if (this._isValidCurrentDropHintIndex()) {
                    if (this._dropHintDetails[currentDropHintIndex + 1] &&
                        eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex + 1].startX &&
                        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex + 1].endX) {
                        indexToUpdate = currentDropHintIndex + 1;
                    }
                    else if (this._dropHintDetails[currentDropHintIndex - 1] &&
                        eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex - 1].startX &&
                        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex - 1].endX) {
                        indexToUpdate = currentDropHintIndex - 1;
                    }
                }
                if (indexToUpdate === -1) {
                    var startIndex = frozenColumnCountFromStart;
                    var endIndex = lastValidColumn;
                    while (startIndex < endIndex) {
                        var middleIndex = Math.ceil((endIndex + startIndex) / 2);
                        if (eventXRelativePosition >= this._dropHintDetails[middleIndex].startX &&
                            eventXRelativePosition <= this._dropHintDetails[middleIndex].endX) {
                            indexToUpdate = middleIndex;
                            break;
                        }
                        else if (eventXRelativePosition < this._dropHintDetails[middleIndex].originX) {
                            endIndex = middleIndex;
                        }
                        else if (eventXRelativePosition > this._dropHintDetails[middleIndex].originX) {
                            startIndex = middleIndex;
                        }
                    }
                }
                if (indexToUpdate === this._draggedColumnIndex || indexToUpdate === this._draggedColumnIndex + 1) {
                    if (this._isValidCurrentDropHintIndex()) {
                        this._resetDropHints();
                    }
                }
                else if (currentDropHintIndex !== indexToUpdate && indexToUpdate >= 0) {
                    this._resetDropHints();
                    this._updateDropHintElement(this._dropHintDetails[indexToUpdate].dropHintElementRef, 'inline-block');
                    this._currentDropHintIndex = indexToUpdate;
                }
            }
        };
        DetailsHeader.prototype._isEventOnHeader = function (event) {
            if (this._rootElement) {
                var clientRect = this._rootElement.getBoundingClientRect();
                if (event.clientX > clientRect.left &&
                    event.clientX < clientRect.right &&
                    event.clientY > clientRect.top &&
                    event.clientY < clientRect.bottom) {
                    return DetailsList_types_1.ColumnDragEndLocation.header;
                }
            }
        };
        DetailsHeader.prototype._renderColumnDivider = function (columnIndex) {
            var _a = this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
            var column = columns[columnIndex];
            var onRenderDivider = column.onRenderDivider;
            return onRenderDivider
                ? onRenderDivider({ column: column, columnIndex: columnIndex }, this._renderColumnSizer)
                : this._renderColumnSizer({ column: column, columnIndex: columnIndex });
        };
        DetailsHeader.prototype._renderDropHint = function (dropHintIndex) {
            return (React.createElement("div", { key: 'dropHintKey', className: styles.dropHintStyle, id: "columnDropHint_" + dropHintIndex },
                React.createElement(Icon_1.Icon, { key: "dropHintCaretKey", "aria-hidden": true, "data-is-focusable": false, "data-sizer-index": dropHintIndex, className: Utilities_1.css('ms-DetailsHeader-dropHintCaretStyle', styles.dropHintCaretStyle), iconName: 'CaretUpSolid8' }),
                React.createElement("div", { key: "dropHintLineKey", "aria-hidden": true, "data-is-focusable": false, "data-sizer-index": dropHintIndex, className: Utilities_1.css('ms-DetailsHeader-dropHintLineStyle', styles.dropHintLineStyle) })));
        };
        /**
         * double click on the column sizer will auto ajust column width
         * to fit the longest content among current rendered rows.
         *
         * @private
         * @param {number} columnIndex (index of the column user double clicked)
         * @param {React.MouseEvent} ev (mouse double click event)
         */
        DetailsHeader.prototype._onSizerDoubleClick = function (columnIndex, ev) {
            var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, columns = _a.columns;
            if (onColumnAutoResized) {
                onColumnAutoResized(columns[columnIndex], columnIndex);
            }
        };
        DetailsHeader.prototype._onSelectionChanged = function () {
            var isAllSelected = this.props.selection.isAllSelected();
            if (this.state.isAllSelected !== isAllSelected) {
                this.setState({
                    isAllSelected: isAllSelected
                });
            }
        };
        DetailsHeader.prototype._onToggleCollapseAll = function () {
            var onToggleCollapseAll = this.props.onToggleCollapseAll;
            var newCollapsed = !this.state.isAllCollapsed;
            this.setState({
                isAllCollapsed: newCollapsed
            });
            if (onToggleCollapseAll) {
                onToggleCollapseAll(newCollapsed);
            }
        };
        DetailsHeader.defaultProps = {
            selectAllVisibility: SelectAllVisibility.visible,
            collapseAllVisibility: GroupedList_1.CollapseAllVisibility.visible
        };
        return DetailsHeader;
    }(Utilities_1.BaseComponent));
    exports.DetailsHeader = DetailsHeader;
    function getLegacyColumnReorderProps(columnReorderOptions) {
        return tslib_1.__assign({}, columnReorderOptions, { onColumnDragEnd: undefined });
    }
    function stopPropagation(ev) {
        ev.stopPropagation();
    }
});
//# sourceMappingURL=DetailsHeader.js.map