import { __extends, __spreadArray, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent.js';
import { Checkbox } from '../Checkbox/index.js';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { Label } from '../Label/Label.js';
import { Icon } from '../Icon/Icon.js';
import { Callout } from '../Callout/Callout.js';
import { ActionButton } from '../Button/ActionButton/ActionButton.js';

var getClassNames = classNamesFunction();
var DropdownBase = function(_super) {
  __extends(DropdownBase2, _super);
  function DropdownBase2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.isOpen = false;
    _this.calloutRenderEdge = void 0;
    return _this;
  }
  Object.defineProperty(DropdownBase2.prototype, "classNames", {
    get: function() {
      var _a = this, theme = _a.theme, className = _a.className, errorMessage = _a.errorMessage, label = _a.label, required = _a.required, disabled = _a.disabled, panelProps = _a.panelProps, calloutProps = _a.calloutProps;
      var _b = this, isOpen = _b.isOpen, calloutRenderEdge = _b.calloutRenderEdge;
      var selectedOptions = this.value;
      return getClassNames(this.styles, {
        theme: theme,
        className: className,
        hasError: !!(errorMessage && errorMessage.length > 0),
        hasLabel: !!label,
        isOpen: isOpen,
        required: required,
        disabled: disabled,
        isRenderingPlaceholder: !selectedOptions.length,
        panelClassName: panelProps === null || panelProps === void 0 ? void 0 : panelProps.className,
        calloutClassName: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.className,
        calloutRenderEdge: calloutRenderEdge
      });
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(DropdownBase2.prototype, "multiSelectItemStyles", {
    get: function() {
      return this.classNames.subComponentStyles ? this.classNames.subComponentStyles.multiSelectItem : void 0;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(DropdownBase2.prototype, "hasErrorMessage", {
    get: function() {
      return this.errorMessage && this.errorMessage.length > 0;
    },
    enumerable: false,
    configurable: true
  });
  DropdownBase2.prototype.select = function(option) {
    if (option.disabled)
      return;
    var selectedOptions = __spreadArray([], this.value, true);
    var index = selectedOptions.findIndex(function(o) {
      return o.key === option.key;
    });
    if (this.multiSelect) {
      if (index === -1)
        selectedOptions.push(option);
      else
        selectedOptions.splice(index, 1);
    } else {
      if (index === -1) {
        selectedOptions.splice(0, selectedOptions.length);
        selectedOptions.push(option);
        this.isOpen = false;
      }
    }
    console.log(selectedOptions);
    this.$emit("input", selectedOptions);
  };
  DropdownBase2.prototype.onPositioned = function(positions) {
    if (!this.calloutRenderEdge || this.calloutRenderEdge !== positions.targetEdge) {
      this.calloutRenderEdge = positions.targetEdge;
    }
  };
  DropdownBase2.prototype.onDismiss = function(e) {
    e.stopPropagation();
    this.isOpen = false;
  };
  DropdownBase2.prototype.onScroll = function() {
  };
  DropdownBase2.prototype.render = function(h) {
    var _this = this;
    var _a = this, classNames = _a.classNames, label = _a.label, value = _a.value, multiSelect = _a.multiSelect, multiSelectDelimiter = _a.multiSelectDelimiter, placeholder = _a.placeholder, isOpen = _a.isOpen, dropdownWidth = _a.dropdownWidth, options = _a.options, hasErrorMessage = _a.hasErrorMessage, errorMessage = _a.errorMessage, required = _a.required, disabled = _a.disabled;
    var OptionComponent = multiSelect ? Checkbox : ActionButton;
    var $label = h(Label, {
      class: classNames.label,
      attrs: {
        required: required,
        disabled: disabled
      }
    }, label);
    var $dropdown = h("div", {
      ref: "dropdown",
      class: classNames.dropdown,
      on: {
        click: function() {
          return _this.isOpen = !_this.isOpen;
        }
      }
    }, [
      h("span", { class: classNames.title }, value.length ? value.map(function(i) {
        return i.text;
      }).join(multiSelectDelimiter) : placeholder),
      h("span", { class: classNames.caretDownWrapper }, [
        h(Icon, { class: classNames.caretDown, attrs: { iconName: "ChevronDown" } })
      ])
    ]);
    var $errorMessage = hasErrorMessage && h("div", {
      class: classNames.errorMessage,
      attrs: {
        role: "alert"
      }
    }, errorMessage);
    var $callout = isOpen && h(Callout, {
      attrs: {
        target: this.$refs.dropdown,
        isBeakVisible: false,
        calloutWidth: dropdownWidth || (this.$refs.dropdown ? this.$refs.dropdown.clientWidth : 0)
      },
      on: {
        dismiss: this.onDismiss,
        positioned: this.onPositioned
      }
    }, [
      h("div", { class: classNames.dropdownItemsWrapper, attrs: { tabindex: 0 } }, [
        options.map(function(option, index) {
          var isItemSelected = !!_this.value.find(function(o) {
            return o.key === option.key;
          });
          return h(OptionComponent, {
            key: index,
            class: option.hidden ? classNames.dropdownItemHidden : isItemSelected && option.disabled === true ? classNames.dropdownItemSelectedAndDisabled : isItemSelected ? classNames.dropdownItemSelected : option.disabled === true ? classNames.dropdownItemDisabled : classNames.dropdownItem,
            style: multiSelect ? _this.multiSelectItemStyles : null,
            attrs: {
              disabled: option.disabled,
              title: option.text,
              checked: isItemSelected,
              role: option
            },
            nativeOn: {
              click: function() {
                return !multiSelect && _this.select(option);
              }
            },
            on: {
              input: function() {
                return multiSelect && _this.select(option);
              }
            }
          }, option.text);
        })
      ])
    ]);
    return h("div", { class: classNames.root }, [
      $label,
      $dropdown,
      $callout,
      $errorMessage
    ]);
  };
  __decorate([
    Prop({ type: Array, required: true }),
    __metadata("design:type", Array)
  ], DropdownBase2.prototype, "options", void 0);
  __decorate([
    Prop({ type: Array, default: function() {
      return [];
    } }),
    __metadata("design:type", Array)
  ], DropdownBase2.prototype, "value", void 0);
  __decorate([
    Prop({ type: String, default: "" }),
    __metadata("design:type", String)
  ], DropdownBase2.prototype, "label", void 0);
  __decorate([
    Prop({ type: String, default: "" }),
    __metadata("design:type", String)
  ], DropdownBase2.prototype, "placeholder", void 0);
  __decorate([
    Prop({ type: String, default: "" }),
    __metadata("design:type", String)
  ], DropdownBase2.prototype, "errorMessage", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], DropdownBase2.prototype, "required", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], DropdownBase2.prototype, "disabled", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], DropdownBase2.prototype, "multiSelect", void 0);
  __decorate([
    Prop({ type: String, default: ", " }),
    __metadata("design:type", String)
  ], DropdownBase2.prototype, "multiSelectDelimiter", void 0);
  __decorate([
    Prop({ type: Number, default: 0 }),
    __metadata("design:type", Number)
  ], DropdownBase2.prototype, "dropdownWidth", void 0);
  __decorate([
    Prop({ type: Object, default: function() {
    } }),
    __metadata("design:type", Object)
  ], DropdownBase2.prototype, "panelProps", void 0);
  __decorate([
    Prop({ type: Object, default: function() {
    } }),
    __metadata("design:type", Object)
  ], DropdownBase2.prototype, "calloutProps", void 0);
  DropdownBase2 = __decorate([
    Component({
      components: { Callout: Callout, ActionButton: ActionButton, Checkbox: Checkbox, Icon: Icon, Label: Label }
    })
  ], DropdownBase2);
  return DropdownBase2;
}(BaseComponent);

export { DropdownBase };
