import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import BaseComponent from '../../BaseComponent';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { DEFAULT_CELL_STYLE_PROPS } from '../DetailsRow/DetailsRow.styles';
import { Icon, FontIcon } from '../../Icon';
import { ColumnActionsMode } from '../DetailsList.types';
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
var getClassNames = classNamesFunction();
var TRANSITION_DURATION_DRAG = 200; // ms
var TRANSITION_DURATION_DROP = 1500; // ms
var CLASSNAME_ADD_INTERVAL = 20; // ms
var DetailsColumnBase = /** @class */ (function (_super) {
    __extends(DetailsColumnBase, _super);
    function DetailsColumnBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.ColumnActionsMode = ColumnActionsMode;
        return _this;
    }
    Object.defineProperty(DetailsColumnBase.prototype, "IconComponent", {
        get: function () {
            return this.useFastIcons ? FontIcon : Icon;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(DetailsColumnBase.prototype, "classNames", {
        get: function () {
            var _a = this, column = _a.column, columnIndex = _a.columnIndex, styles = _a.styles, theme = _a.theme, _b = _a.cellStyleProps, cellStyleProps = _b === void 0 ? DEFAULT_CELL_STYLE_PROPS : _b;
            return getClassNames(styles, {
                theme: theme,
                headerClassName: column.headerClassName,
                iconClassName: column.iconClassName,
                isActionable: column.columnActionsMode !== ColumnActionsMode.disabled,
                isEmpty: !column.name,
                isIconVisible: column.isSorted || column.isGrouped || column.isFiltered,
                isPadded: column.isPadded,
                isIconOnly: column.isIconOnly,
                cellStyleProps: cellStyleProps,
                transitionDurationDrag: TRANSITION_DURATION_DRAG,
                transitionDurationDrop: TRANSITION_DURATION_DROP,
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(DetailsColumnBase.prototype, "columnWidth", {
        get: function () {
            var _a = this, column = _a.column, cellStyleProps = _a.cellStyleProps;
            return column.calculatedWidth +
                cellStyleProps.cellLeftPadding +
                cellStyleProps.cellRightPadding +
                (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0) +
                'px';
        },
        enumerable: false,
        configurable: true
    });
    DetailsColumnBase.prototype.mounted = function () {
        var _this = this;
        if (this.dragDropHelper && this.isDraggable) {
            this._addDragDropHandling();
        }
        var classNames = this.classNames;
        if (this.isDropped) {
            if (this.$refs.root) {
                this.$refs.root.classList.add(classNames.borderAfterDropping);
                this._async.setTimeout(function () {
                    if (_this.$refs.root) {
                        _this.$refs.root.classList.add(classNames.noBorderAfterDropping);
                    }
                }, CLASSNAME_ADD_INTERVAL);
            }
            this._async.setTimeout(function () {
                if (_this.$refs.root) {
                    _this.$refs.root.classList.remove(classNames.borderAfterDropping);
                    _this.$refs.root.classList.remove(classNames.noBorderAfterDropping);
                }
            }, TRANSITION_DURATION_DROP + CLASSNAME_ADD_INTERVAL);
        }
    };
    DetailsColumnBase.prototype.beforeDestroy = function () {
        if (this._dragDropSubscription) {
            this._dragDropSubscription.dispose();
            // @ts-ignore
            delete this._dragDropSubscription;
        }
        this._async.dispose();
        this.events.dispose();
    };
    DetailsColumnBase.prototype.updated = function () {
        if (!this._dragDropSubscription && this.dragDropHelper && this.isDraggable) {
            this._addDragDropHandling();
        }
        if (this._dragDropSubscription && !this.isDraggable) {
            this._dragDropSubscription.dispose();
            this.events.off(this.$refs.root, 'mousedown');
            // @ts-ignore
            delete this._dragDropSubscription;
        }
    };
    DetailsColumnBase.prototype._onColumnClick = function (ev) {
        var _a = this, onColumnClick = _a.onColumnClick, column = _a.column;
        if (column.columnActionsMode === ColumnActionsMode.disabled) {
            return;
        }
        if (column.onColumnClick) {
            column.onColumnClick(ev, column);
        }
        if (onColumnClick) {
            onColumnClick(ev, column);
        }
    };
    DetailsColumnBase.prototype._getColumnDragDropOptions = function () {
        var _this = this;
        var columnIndex = this.columnIndex;
        var options = {
            selectionIndex: columnIndex,
            context: { data: columnIndex, index: columnIndex },
            canDrag: function () { return _this.isDraggable; },
            canDrop: function () { return false; },
            onDragStart: this._onDragStart,
            updateDropState: function () { return undefined; },
            onDrop: function () { return undefined; },
            onDragEnd: this._onDragEnd,
        };
        return options;
    };
    DetailsColumnBase.prototype._onDragStart = function (item, itemIndex, selectedItems, event) {
        var _this = this;
        var classNames = this.classNames;
        if (itemIndex) {
            this._updateHeaderDragInfo(itemIndex);
            this.$refs.root.classList.add(classNames.borderWhileDragging);
            this._async.setTimeout(function () {
                if (_this.$refs.root) {
                    _this.$refs.root.classList.add(classNames.noBorderWhileDragging);
                }
            }, CLASSNAME_ADD_INTERVAL);
        }
    };
    ;
    DetailsColumnBase.prototype._onDragEnd = function (item, event) {
        var classNames = this.classNames;
        if (event) {
            this._updateHeaderDragInfo(-1, event);
        }
        this.$refs.root.classList.remove(classNames.borderWhileDragging);
        this.$refs.root.classList.remove(classNames.noBorderWhileDragging);
    };
    ;
    DetailsColumnBase.prototype._updateHeaderDragInfo = function (itemIndex, event) {
        if (this.updateDragInfo) {
            this.updateDragInfo({ itemIndex: itemIndex }, event);
        }
    };
    ;
    DetailsColumnBase.prototype._onRootMouseDown = function (ev) {
        var isDraggable = this.isDraggable;
        // Ignore anything except the primary button.
        if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {
            ev.stopPropagation();
        }
    };
    ;
    DetailsColumnBase.prototype._onColumnContextMenu = function (ev) {
        var _a = this, onColumnContextMenu = _a.onColumnContextMenu, column = _a.column;
        if (column.onColumnContextMenu) {
            column.onColumnContextMenu(column, ev);
            ev.preventDefault();
        }
        if (onColumnContextMenu) {
            onColumnContextMenu(column, ev);
            ev.preventDefault();
        }
    };
    ;
    DetailsColumnBase.prototype._addDragDropHandling = function () {
        this._dragDropSubscription = this.dragDropHelper.subscribe(this.$refs.root, this.events, this._getColumnDragDropOptions());
        // We need to use native on this to prevent MarqueeSelection from handling the event before us.
        this.events.on(this.$refs.root, 'mousedown', this._onRootMouseDown);
    };
    DetailsColumnBase.prototype.render = function () {
        var h = this.$createElement;
        var _a = this, classNames = _a.classNames, column = _a.column, columnIndex = _a.columnIndex, columnWidth = _a.columnWidth, IconComponent = _a.IconComponent, isDraggable = _a.isDraggable, parentId = _a.parentId;
        return h('div', {
            ref: 'root',
            key: column.key,
            class: classNames.root,
            style: { width: columnWidth },
            attrs: {
                ariaSort: column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none',
                ariaColindex: columnIndex,
                role: 'columnheader',
            },
        }, [
            isDraggable && h(IconComponent, {
                class: classNames.gripperBarVerticalStyle,
                attrs: {
                    iconName: 'GripperBarVertical',
                },
            }),
            h('span', { class: classNames.cellTooltip }, [
                h('span', {
                    class: classNames.cellTitle,
                    attrs: {
                        id: "".concat(parentId, "-").concat(column.key),
                        ariaLabel: column.isIconOnly ? column.name : undefined,
                        ariaLabelledby: column.isIconOnly ? undefined : "".concat(parentId, "-").concat(column.key, "-name"),
                    },
                    on: {
                        contextmenu: this._onColumnContextMenu,
                        click: this._onColumnClick,
                    },
                }, [
                    h('span', {
                        class: classNames.cellName,
                        attrs: { id: "".concat(parentId, "-").concat(column.key, "-name") },
                    }, [
                        (column.iconName || column.iconClassName) && h(IconComponent, {
                            class: classNames.iconClassName,
                            attrs: { iconName: column.iconName },
                        }),
                        column.isIconOnly
                            ? h('span', { class: classNames.accessibleLabel }, column.name)
                            : column.name,
                    ]),
                    column.isFiltered && h(IconComponent, {
                        class: classNames.nearIcon,
                        attrs: { iconName: 'Filter' },
                    }),
                    column.isSorted && h(IconComponent, {
                        class: classNames.sortIcon,
                        attrs: { iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' },
                    }),
                    column.isGrouped && h(IconComponent, {
                        class: classNames.nearIcon,
                        attrs: { iconName: 'GroupedDescending' },
                    }),
                    column.columnActionsMode === ColumnActionsMode.hasDropdown && !column.isIconOnly && h(IconComponent, {
                        attrs: {
                            iconName: 'ChevronDown',
                        },
                    }),
                ]),
            ]),
        ]);
    };
    __decorate([
        Prop({ type: Object, required: true }),
        __metadata("design:type", Object)
    ], DetailsColumnBase.prototype, "column", void 0);
    __decorate([
        Prop({ type: Number, required: true }),
        __metadata("design:type", Number)
    ], DetailsColumnBase.prototype, "columnIndex", void 0);
    __decorate([
        Prop({ type: Number, default: null }),
        __metadata("design:type", Number)
    ], DetailsColumnBase.prototype, "parentId", void 0);
    __decorate([
        Prop({ type: Function, default: null }),
        __metadata("design:type", Function)
    ], DetailsColumnBase.prototype, "onColumnClick", void 0);
    __decorate([
        Prop({ type: Function, default: null }),
        __metadata("design:type", Function)
    ], DetailsColumnBase.prototype, "onColumnContextMenu", void 0);
    __decorate([
        Prop({ type: Object, default: null }),
        __metadata("design:type", Object)
    ], DetailsColumnBase.prototype, "dragDropHelper", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], DetailsColumnBase.prototype, "isDraggable", void 0);
    __decorate([
        Prop({ type: Function, default: null }),
        __metadata("design:type", Function)
    ], DetailsColumnBase.prototype, "updateDragInfo", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], DetailsColumnBase.prototype, "isDropped", void 0);
    __decorate([
        Prop({ type: Object, default: function () { return DEFAULT_CELL_STYLE_PROPS; } }),
        __metadata("design:type", Object)
    ], DetailsColumnBase.prototype, "cellStyleProps", void 0);
    __decorate([
        Prop({ type: Boolean, default: true }),
        __metadata("design:type", Boolean)
    ], DetailsColumnBase.prototype, "useFastIcons", void 0);
    DetailsColumnBase = __decorate([
        Component({
            components: {},
        })
    ], DetailsColumnBase);
    return DetailsColumnBase;
}(BaseComponent));
export { DetailsColumnBase };
//# sourceMappingURL=DetailsColumn.base.js.map