import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import { DirectionalHint } from '../../common/DirectionalHint.js';
import { classNamesFunction, css } from '@uifabric-vue/utilities';
import BaseComponent from '../BaseComponent.js';
import { ContextualMenuItem } from './ContextualMenuItem.js';
import { Callout } from '../Callout/Callout.js';

var getClassNames = classNamesFunction({
  disableCaching: true
});
var ContextualMenuBase = function(_super) {
  __extends(ContextualMenuBase2, _super);
  function ContextualMenuBase2() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  ContextualMenuBase2.prototype.created = function() {
    console.log(this.target);
  };
  Object.defineProperty(ContextualMenuBase2.prototype, "classNames", {
    get: function() {
      var _a = this, styles = _a.styles, theme = _a.theme, className = _a.className;
      return getClassNames(styles, {
        theme: theme,
        className: className
      });
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(ContextualMenuBase2.prototype, "contextMenuStyle", {
    get: function() {
      var targetBoundingRect = this.target.getBoundingClientRect();
      var targetWidth = targetBoundingRect.width - 2;
      return {
        width: "".concat(targetWidth, "px")
      };
    },
    enumerable: false,
    configurable: true
  });
  ContextualMenuBase2.prototype.render = function(h) {
    var _a = this, target = _a.target, directionalHint = _a.directionalHint, calloutProps = _a.calloutProps, onDismiss = _a.onDismiss, contextMenuStyle = _a.contextMenuStyle, classNames = _a.classNames, items = _a.items;
    return h(Callout, {
      class: css("ms-ContextualMenu-Callout", calloutProps && calloutProps.className),
      attrs: {
        target: target,
        directionalHint: directionalHint,
        isBeakVisible: false
      },
      on: {
        dismiss: onDismiss
      }
    }, [
      h("div", { style: contextMenuStyle, class: classNames.container }, [
        h("div", { class: classNames.root }, [
          h("ul", { class: classNames.list, attrs: { role: "menu" } }, items.map(function(item, index) {
            return h("li", {
              key: item.key || index,
              class: classNames.item
            }, [
              h(ContextualMenuItem, {
                attrs: {
                  item: item,
                  propClassNames: classNames
                }
              })
            ]);
          }))
        ])
      ])
    ]);
  };
  __decorate([
    Prop(),
    __metadata("design:type", HTMLElement)
  ], ContextualMenuBase2.prototype, "target", void 0);
  __decorate([
    Prop({ type: Object, default: function() {
    } }),
    __metadata("design:type", Object)
  ], ContextualMenuBase2.prototype, "calloutProps", void 0);
  __decorate([
    Prop({ type: Number, default: DirectionalHint.bottomAutoEdge }),
    __metadata("design:type", Boolean)
  ], ContextualMenuBase2.prototype, "directionalHint", void 0);
  __decorate([
    Prop({ type: Function, default: function() {
      return null;
    } }),
    __metadata("design:type", Function)
  ], ContextualMenuBase2.prototype, "onDismiss", void 0);
  __decorate([
    Prop({ type: Array, default: function() {
      return [];
    } }),
    __metadata("design:type", Array)
  ], ContextualMenuBase2.prototype, "items", void 0);
  ContextualMenuBase2 = __decorate([
    Component({
      components: { Callout: Callout, ContextualMenuItem: ContextualMenuItem }
    })
  ], ContextualMenuBase2);
  return ContextualMenuBase2;
}(BaseComponent);

export { ContextualMenuBase };
