import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import { css } from '@uifabric-vue/utilities';
import { getStyles } from './ComboBox.styles.js';
import BaseComponent from '../BaseComponent.js';
import VNodes from '../VNodes.js';
import { getClassNames } from './ComboBox.classNames.js';
import { Checkbox } from '../Checkbox/index.js';
import { Autofill } from '../Autofill/Autofill.js';
import { Label } from '../Label/Label.js';
import { IconButton } from '../Button/IconButton/IconButton.js';
import { Callout } from '../Callout/Callout.js';
import { ActionButton } from '../Button/ActionButton/ActionButton.js';

var SearchDirection;
(function(SearchDirection2) {
  SearchDirection2[SearchDirection2["backward"] = -1] = "backward";
  SearchDirection2[SearchDirection2["none"] = 0] = "none";
  SearchDirection2[SearchDirection2["forward"] = 1] = "forward";
})(SearchDirection || (SearchDirection = {}));
var HoverStatus;
(function(HoverStatus2) {
  HoverStatus2[HoverStatus2["clearAll"] = -2] = "clearAll";
  HoverStatus2[HoverStatus2["default"] = -1] = "default";
})(HoverStatus || (HoverStatus = {}));
var ComboBoxBase = function(_super) {
  __extends(ComboBoxBase2, _super);
  function ComboBoxBase2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.state = {
      isOpen: false,
      selectedIndices: [],
      focused: false,
      suggestedDisplayValue: "",
      currentOptions: [],
      currentPendingValueValidIndex: 0,
      currentPendingValueValidIndexOnHover: 0,
      currentPendingValue: ""
    };
    _this.comboBoxMenuWidth = 0;
    return _this;
  }
  ComboBoxBase2.prototype.mounted = function() {
    var _this = this;
    this._async.throttle(function() {
      if (!_this.$refs.comboBoxWrapper)
        return;
      _this.comboBoxMenuWidth = _this.$refs.comboBoxWrapper.clientWidth + 2;
    }, 1 / 60);
  };
  Object.defineProperty(ComboBoxBase2.prototype, "hasErrorMessage", {
    get: function() {
      var errorMessage = this.errorMessage;
      return !!(errorMessage && errorMessage.length > 0);
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(ComboBoxBase2.prototype, "classNames", {
    get: function() {
      var _a = this, theme = _a.theme, className = _a.className, customStyles = _a.styles, disabled = _a.disabled, required = _a.required, allowFreeform = _a.allowFreeform, hasErrorMessage = _a.hasErrorMessage;
      var _b = this.state, isOpen = _b.isOpen, focused = _b.focused; _b.suggestedDisplayValue;
      return getClassNames(getStyles(theme, customStyles), className, !!isOpen, !!disabled, !!required, !!focused, !!allowFreeform, !!hasErrorMessage);
    },
    enumerable: false,
    configurable: true
  });
  ComboBoxBase2.prototype.getComboBoxMenuWidth = function() {
    if (!this.$refs.comboBoxWrapper)
      return 0;
    return this.$refs.comboBoxWrapper.clientWidth + 2;
  };
  ComboBoxBase2.prototype.onFocus = function(e) {
  };
  ComboBoxBase2.prototype.onBlur = function(e) {
  };
  ComboBoxBase2.prototype.render = function(h) {
    var _a = this, classNames = _a.classNames, onFocus = _a.onFocus, onBlur = _a.onBlur, calloutProps = _a.calloutProps, persistMenu = _a.persistMenu, state = _a.state, multiSelect = _a.multiSelect;
    return h("div", { class: classNames.container }, [
      h(Label, {
        class: classNames.label,
        attrs: {
          for: "ComboBox".concat(this.uid)
        }
      }, "Label"),
      h("div", { class: classNames.root, ref: "comboBoxWrapper" }, [
        h(Autofill, {
          ref: "autofill",
          class: classNames.input,
          attrs: {
            id: "ComboBox".concat(this.uid),
            type: "text",
            role: "combobox"
          }
        }),
        h(IconButton, {
          class: "ms-ComboBox-CaretDown-button",
          attrs: {
            iconProps: { iconName: "ChevronDown" }
          },
          nativeOn: {
            focus: onFocus,
            blur: onBlur
          }
        })
      ]),
      (persistMenu || state.isOpen) && h(Callout, {
        class: css(classNames.callout, calloutProps ? calloutProps.className : void 0),
        attrs: {
          target: this.$refs.comboBoxWrapper,
          isBeakVisible: false,
          gapSpace: 0,
          doNotLayer: false,
          calloutWidth: this.getComboBoxMenuWidth(),
          calloutMaxWidth: this.getComboBoxMenuWidth(),
          hidden: persistMenu ? !state.isOpen : void 0
        }
      }, [
        h("div", { class: classNames.optionsContainerWrapper, ref: "comboBoxMenu" }, [
          h("div", { class: classNames.optionsContainer, attrs: { role: "listbox" } }, [
            multiSelect && h(Checkbox, { staticClass: "ms-ComboBox-option" }),
            h(ActionButton, { staticClass: "ms-ComboBox-option" })
          ])
        ])
      ])
    ]);
  };
  __decorate([
    Prop(),
    __metadata("design:type", Boolean)
  ], ComboBoxBase2.prototype, "allowFreeform", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", String)
  ], ComboBoxBase2.prototype, "autoComplete", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", String)
  ], ComboBoxBase2.prototype, "errorMessage", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], ComboBoxBase2.prototype, "text", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], ComboBoxBase2.prototype, "calloutProps", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], ComboBoxBase2.prototype, "buttonIconProps", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], ComboBoxBase2.prototype, "comboBoxOptionStyles", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Boolean)
  ], ComboBoxBase2.prototype, "autofill", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Boolean)
  ], ComboBoxBase2.prototype, "disabled", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Boolean)
  ], ComboBoxBase2.prototype, "required", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Boolean)
  ], ComboBoxBase2.prototype, "persistMenu", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], ComboBoxBase2.prototype, "multiSelect", void 0);
  ComboBoxBase2 = __decorate([
    Component({
      components: { Autofill: Autofill, Label: Label, IconButton: IconButton, Callout: Callout, ActionButton: ActionButton, Checkbox: Checkbox, VNodes: VNodes }
    })
  ], ComboBoxBase2);
  return ComboBoxBase2;
}(BaseComponent);

export { ComboBoxBase };
