import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import BaseComponent from '../../BaseComponent.js';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { DEFAULT_CELL_STYLE_PROPS } from '../DetailsRow/DetailsRow.styles.js';
import { ColumnActionsMode } from '../DetailsList.types.js';
import { FontIcon } from '../../Icon/FontIcon.js';
import { Icon } from '../../Icon/Icon.js';

var MOUSEDOWN_PRIMARY_BUTTON = 0;
var getClassNames = classNamesFunction();
var TRANSITION_DURATION_DRAG = 200;
var TRANSITION_DURATION_DROP = 1500;
var CLASSNAME_ADD_INTERVAL = 20;
var DetailsColumnBase = function(_super) {
  __extends(DetailsColumnBase2, _super);
  function DetailsColumnBase2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.ColumnActionsMode = ColumnActionsMode;
    return _this;
  }
  Object.defineProperty(DetailsColumnBase2.prototype, "IconComponent", {
    get: function() {
      return this.useFastIcons ? FontIcon : Icon;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(DetailsColumnBase2.prototype, "classNames", {
    get: function() {
      var _a = this, column = _a.column; _a.columnIndex; var 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(DetailsColumnBase2.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
  });
  DetailsColumnBase2.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);
    }
  };
  DetailsColumnBase2.prototype.beforeDestroy = function() {
    if (this._dragDropSubscription) {
      this._dragDropSubscription.dispose();
      delete this._dragDropSubscription;
    }
    this._async.dispose();
    this.events.dispose();
  };
  DetailsColumnBase2.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");
      delete this._dragDropSubscription;
    }
  };
  DetailsColumnBase2.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);
    }
  };
  DetailsColumnBase2.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 void 0;
      },
      onDrop: function() {
        return void 0;
      },
      onDragEnd: this._onDragEnd
    };
    return options;
  };
  DetailsColumnBase2.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);
    }
  };
  DetailsColumnBase2.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);
  };
  DetailsColumnBase2.prototype._updateHeaderDragInfo = function(itemIndex, event) {
    if (this.updateDragInfo) {
      this.updateDragInfo({ itemIndex: itemIndex }, event);
    }
  };
  DetailsColumnBase2.prototype._onRootMouseDown = function(ev) {
    var isDraggable = this.isDraggable;
    if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {
      ev.stopPropagation();
    }
  };
  DetailsColumnBase2.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();
    }
  };
  DetailsColumnBase2.prototype._addDragDropHandling = function() {
    this._dragDropSubscription = this.dragDropHelper.subscribe(this.$refs.root, this.events, this._getColumnDragDropOptions());
    this.events.on(this.$refs.root, "mousedown", this._onRootMouseDown);
  };
  DetailsColumnBase2.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 : void 0,
            ariaLabelledby: column.isIconOnly ? void 0 : "".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)
  ], DetailsColumnBase2.prototype, "column", void 0);
  __decorate([
    Prop({ type: Number, required: true }),
    __metadata("design:type", Number)
  ], DetailsColumnBase2.prototype, "columnIndex", void 0);
  __decorate([
    Prop({ type: Number, default: null }),
    __metadata("design:type", Number)
  ], DetailsColumnBase2.prototype, "parentId", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Function)
  ], DetailsColumnBase2.prototype, "onColumnClick", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Function)
  ], DetailsColumnBase2.prototype, "onColumnContextMenu", void 0);
  __decorate([
    Prop({ type: Object, default: null }),
    __metadata("design:type", Object)
  ], DetailsColumnBase2.prototype, "dragDropHelper", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], DetailsColumnBase2.prototype, "isDraggable", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Function)
  ], DetailsColumnBase2.prototype, "updateDragInfo", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], DetailsColumnBase2.prototype, "isDropped", void 0);
  __decorate([
    Prop({ type: Object, default: function() {
      return DEFAULT_CELL_STYLE_PROPS;
    } }),
    __metadata("design:type", Object)
  ], DetailsColumnBase2.prototype, "cellStyleProps", void 0);
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], DetailsColumnBase2.prototype, "useFastIcons", void 0);
  DetailsColumnBase2 = __decorate([
    Component({
      components: {}
    })
  ], DetailsColumnBase2);
  return DetailsColumnBase2;
}(BaseComponent);

export { DetailsColumnBase };
