"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var stylesImport = require("./DetailsHeader.scss");
var styles = stylesImport;
var Icon_1 = require("../../Icon");
var Utilities_1 = require("../../Utilities");
var DetailsList_types_1 = require("./DetailsList.types");
var INNER_PADDING = 16; // Account for padding around the cell.
var ISPADDED_WIDTH = 24;
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
var DetailsColumn = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsColumn, _super);
    function DetailsColumn(props) {
        var _this = _super.call(this, props) || this;
        _this._onRenderColumnHeaderTooltip = function (tooltipHostProps, defaultRender) {
            return React.createElement("span", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);
        };
        _this._root = Utilities_1.createRef();
        _this._onDragStart = _this._onDragStart.bind(_this);
        _this._onDragEnd = _this._onDragEnd.bind(_this);
        _this._onRootMouseDown = _this._onRootMouseDown.bind(_this);
        return _this;
    }
    DetailsColumn.prototype.render = function () {
        var _a = this.props, column = _a.column, columnIndex = _a.columnIndex, parentId = _a.parentId, isDraggable = _a.isDraggable;
        var _b = this.props.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _b === void 0 ? this._onRenderColumnHeaderTooltip : _b;
        return [
            (React.createElement("div", { key: column.key, ref: this._root, role: 'columnheader', "aria-sort": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none', "aria-colindex": columnIndex + 1, className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell, column.headerClassName, column.columnActionsMode !== DetailsList_types_1.ColumnActionsMode.disabled && 'is-actionable ' + styles.cellIsActionable, !column.name && 'is-empty ' + styles.cellIsEmpty, (column.isSorted || column.isGrouped || column.isFiltered) && 'is-icon-visible', column.isPadded && styles.cellWrapperPadded), "data-is-draggable": isDraggable, draggable: isDraggable, style: { width: column.calculatedWidth + INNER_PADDING + (column.isPadded ? ISPADDED_WIDTH : 0) }, "data-automationid": 'ColumnsHeaderColumn', "data-item-key": column.key },
                isDraggable && React.createElement(Icon_1.Icon, { iconName: 'GripperBarVertical', className: Utilities_1.css(styles.gripperBarVerticalStyle) }),
                onRenderColumnHeaderTooltip({
                    hostClassName: Utilities_1.css(styles.cellTooltip),
                    id: parentId + "-" + column.key + "-tooltip",
                    setAriaDescribedBy: false,
                    content: column.columnActionsMode !== DetailsList_types_1.ColumnActionsMode.disabled ? column.ariaLabel : '',
                    children: (React.createElement("span", { id: parentId + "-" + column.key, "aria-label": column.isIconOnly ? column.name : undefined, "aria-labelledby": column.isIconOnly ? undefined : parentId + "-" + column.key + "-name ", className: Utilities_1.css('ms-DetailsHeader-cellTitle', styles.cellTitle), "data-is-focusable": column.columnActionsMode !== DetailsList_types_1.ColumnActionsMode.disabled, role: column.columnActionsMode !== DetailsList_types_1.ColumnActionsMode.disabled ? 'button' : undefined, "aria-describedby": this.props.onRenderColumnHeaderTooltip ? parentId + "-" + column.key + "-tooltip" : undefined, onContextMenu: this._onColumnContextMenu.bind(this, column), onClick: this._onColumnClick.bind(this, column), "aria-haspopup": column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.hasDropdown },
                        React.createElement("span", { id: parentId + "-" + column.key + "-name", className: Utilities_1.css('ms-DetailsHeader-cellName', styles.cellName, (_c = {},
                                _c[styles.iconOnlyHeader] = column.isIconOnly,
                                _c)) },
                            (column.iconName || column.iconClassName) && (React.createElement(Icon_1.Icon, { className: Utilities_1.css(styles.nearIcon, column.iconClassName), iconName: column.iconName })),
                            !column.isIconOnly ? column.name : undefined),
                        column.isFiltered && (React.createElement(Icon_1.Icon, { ariaLabel: column.filterAriaLabel, className: styles.nearIcon, iconName: 'Filter' })),
                        column.isSorted && (React.createElement(Icon_1.Icon, { ariaLabel: column.isSortedDescending ?
                                column.sortDescendingAriaLabel :
                                column.sortAscendingAriaLabel, className: Utilities_1.css(styles.nearIcon, styles.sortIcon), iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' })),
                        column.isGrouped && (React.createElement(Icon_1.Icon, { ariaLabel: column.groupAriaLabel, className: styles.nearIcon, iconName: 'GroupedDescending' })),
                        column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.hasDropdown && !column.isIconOnly && (React.createElement(Icon_1.Icon, { "aria-hidden": true, className: Utilities_1.css('ms-DetailsHeader-filterChevron', styles.filterChevron), iconName: 'ChevronDown' }))))
                }, this._onRenderColumnHeaderTooltip))),
            (column.ariaLabel && !this.props.onRenderColumnHeaderTooltip ? (React.createElement("label", { key: column.key + "_label", id: parentId + "-" + column.key + "-tooltip", className: styles.accessibleLabel }, column.ariaLabel)) : null)
        ];
        var _c;
    };
    DetailsColumn.prototype.componentDidMount = function () {
        var _this = this;
        if (this._dragDropSubscription) {
            this._dragDropSubscription.dispose();
            delete this._dragDropSubscription;
        }
        if (this.props.dragDropHelper && this.props.isDraggable) {
            this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getColumnDragDropOptions());
            // We need to use native on this to avoid MarqueeSelection from handling the event before us.
            this._events.on(this._root.current, 'mousedown', this._onRootMouseDown);
        }
        if (this.props.isDropped) {
            if (this._root.current) {
                this._root.current.classList.add(styles.borderAfterDropping);
            }
            setTimeout(function () {
                if (_this._root.current) {
                    _this._root.current.classList.remove(styles.borderAfterDropping);
                }
            }, 1500);
        }
    };
    DetailsColumn.prototype.componentWillUnmount = function () {
        if (this._dragDropSubscription) {
            this._dragDropSubscription.dispose();
            delete this._dragDropSubscription;
        }
    };
    DetailsColumn.prototype.componentDidUpdate = function () {
        if (!this._dragDropSubscription && this.props.dragDropHelper && this.props.isDraggable) {
            this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.value, this._events, this._getColumnDragDropOptions());
            // We need to use native on this to avoid MarqueeSelection from handling the event before us.
            this._events.on(this._root.current, 'mousedown', this._onRootMouseDown);
        }
        if (this._dragDropSubscription && !this.props.isDraggable) {
            this._dragDropSubscription.dispose();
            this._events.off(this._root.current, 'mousedown');
            delete this._dragDropSubscription;
        }
    };
    DetailsColumn.prototype._onColumnClick = function (column, ev) {
        var onColumnClick = this.props.onColumnClick;
        if (column.onColumnClick) {
            column.onColumnClick(ev, column);
        }
        if (onColumnClick) {
            onColumnClick(ev, column);
        }
    };
    DetailsColumn.prototype._getColumnDragDropOptions = function () {
        var _this = this;
        var columnIndex = this.props.columnIndex;
        var options = {
            selectionIndex: columnIndex,
            context: { data: columnIndex, index: columnIndex },
            canDrag: function () { return _this.props.isDraggable; },
            canDrop: function () { return false; },
            onDragStart: this._onDragStart,
            updateDropState: function () { return undefined; },
            onDrop: function () { return undefined; },
            onDragEnd: this._onDragEnd
        };
        return options;
    };
    DetailsColumn.prototype._onDragStart = function (item, itemIndex, selectedItems, event) {
        if (itemIndex && this.props.setDraggedItemIndex) {
            this.props.setDraggedItemIndex(itemIndex);
            this._root.current.classList.add(styles.borderWhileDragging);
        }
    };
    DetailsColumn.prototype._onDragEnd = function (item, event) {
        if (this.props.setDraggedItemIndex) {
            this.props.setDraggedItemIndex(-1);
            this._root.current.classList.remove(styles.borderWhileDragging);
        }
    };
    DetailsColumn.prototype._onColumnContextMenu = function (column, ev) {
        var onColumnContextMenu = this.props.onColumnContextMenu;
        if (column.onColumnContextMenu) {
            column.onColumnContextMenu(column, ev);
            ev.preventDefault();
        }
        if (onColumnContextMenu) {
            onColumnContextMenu(column, ev);
            ev.preventDefault();
        }
    };
    DetailsColumn.prototype._onRootMouseDown = function (ev) {
        var isDraggable = this.props.isDraggable;
        // Ignore anything except the primary button.
        if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {
            ev.stopPropagation();
        }
    };
    return DetailsColumn;
}(Utilities_1.BaseComponent));
exports.DetailsColumn = DetailsColumn;
//# sourceMappingURL=DetailsColumn.js.map