import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import { Callout } from '../Callout';
import { DirectionalHint } from '../../common/DirectionalHint';
import { css, classNamesFunction } from '@uifabric-vue/utilities';
import BaseComponent from '../BaseComponent';
import { ContextualMenuItem } from './ContextualMenuItem';
var getClassNames = classNamesFunction({
    disableCaching: true,
});
var ContextualMenuBase = /** @class */ (function (_super) {
    __extends(ContextualMenuBase, _super);
    function ContextualMenuBase() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ContextualMenuBase.prototype.created = function () {
        console.log(this.target);
    };
    Object.defineProperty(ContextualMenuBase.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(ContextualMenuBase.prototype, "contextMenuStyle", {
        get: function () {
            var targetBoundingRect = this.target.getBoundingClientRect();
            var targetWidth = targetBoundingRect.width - 2; /* Accounts for 1px border */
            return {
                width: "".concat(targetWidth, "px"),
            };
        },
        enumerable: false,
        configurable: true
    });
    ContextualMenuBase.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)
    ], ContextualMenuBase.prototype, "target", void 0);
    __decorate([
        Prop({ type: Object, default: function () { } }),
        __metadata("design:type", Object)
    ], ContextualMenuBase.prototype, "calloutProps", void 0);
    __decorate([
        Prop({ type: Number, default: DirectionalHint.bottomAutoEdge }),
        __metadata("design:type", Boolean)
    ], ContextualMenuBase.prototype, "directionalHint", void 0);
    __decorate([
        Prop({ type: Function, default: function () { return null; } }),
        __metadata("design:type", Function)
    ], ContextualMenuBase.prototype, "onDismiss", void 0);
    __decorate([
        Prop({ type: Array, default: function () { return []; } }),
        __metadata("design:type", Array)
    ], ContextualMenuBase.prototype, "items", void 0);
    ContextualMenuBase = __decorate([
        Component({
            components: { Callout: Callout, ContextualMenuItem: ContextualMenuItem },
        })
    ], ContextualMenuBase);
    return ContextualMenuBase;
}(BaseComponent));
export { ContextualMenuBase };
//# sourceMappingURL=ContextualMenu.base.js.map