import { __assign } from "tslib";
import { getBaseButtonClassNames } from './BaseButton.classNames';
import { Icon, FontIcon } from '../Icon';
import { DirectionalHint } from '../../common/DirectionalHint';
import { ContextualMenu } from '../ContextualMenu';
import Vue from 'vue';
import { withThemeableProps } from '../../useThemeable';
import { css } from '@uifabric-vue/utilities';
var TouchIdleDelay = 500; /* ms */
export var BaseButton = Vue.extend({
    props: __assign(__assign({}, withThemeableProps()), { href: { type: String, default: null }, checked: { type: Boolean, default: false }, split: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, primaryDisabled: { type: Boolean, default: false }, allowDisabledFocus: { type: Boolean, default: false }, variantClassName: { type: String, default: null }, iconProps: { type: Object, default: function () { } }, menuIconProps: { type: Object, default: function () { } }, menuAs: { type: Object, default: null }, menuProps: { type: Object, default: null }, persistMenu: { type: Boolean, default: false }, renderPersistedMenuHiddenOnMount: { type: Boolean, default: false }, secondaryText: { type: String, default: null }, getClassNames: { type: Function, default: null } }),
    data: function () {
        return {
            menuHidden: true,
            menuOpen: false,
        };
    },
    computed: {
        MenuType: function () {
            return this.menuAs || ContextualMenu;
        },
        component: function () {
            var _a = this, disabled = _a.disabled, href = _a.href;
            var renderAsAnchor = !disabled && !!href;
            return renderAsAnchor ? 'a' : 'button';
        },
        isSplitButton: function () {
            return !!this.menuProps && this.split === true;
        },
        shouldRenderMenu: function () {
            var menuHidden = this.menuHidden;
            var _a = this, persistMenu = _a.persistMenu, renderPersistedMenuHiddenOnMount = _a.renderPersistedMenuHiddenOnMount;
            if (!menuHidden) {
                // Always should render a menu when it is expanded
                return true;
            }
            else if (persistMenu && (false || renderPersistedMenuHiddenOnMount)) {
                // _renderedVisibleMenu ensures that the first rendering of
                // the menu happens on-screen, as edge's scrollbar calculations are off if done while hidden.
                return true;
            }
            return false;
        },
        classNames: function () {
            var _a = this, theme = _a.theme, styles = _a.styles, className = _a.className, iconProps = _a.iconProps, menuIconProps = _a.menuIconProps, variantClassName = _a.variantClassName, disabled = _a.disabled, primaryDisabled = _a.primaryDisabled, checked = _a.checked, getClassNames = _a.getClassNames;
            var isPrimaryButtonDisabled = disabled || primaryDisabled;
            return getClassNames
                ? getClassNames(theme, className, variantClassName, iconProps && iconProps.className, menuIconProps && menuIconProps.className, isPrimaryButtonDisabled, checked, !this.menuHidden, !!this.menuProps, this.split, !!this.allowDisabledFocus)
                : getBaseButtonClassNames(theme, styles, className, variantClassName, iconProps && iconProps.className, menuIconProps && menuIconProps.className, isPrimaryButtonDisabled, !!this.menuProps, checked, !this.menuHidden, this.split);
        },
    },
    render: function (h) {
        var _this = this;
        var ButtonComponent = this.component;
        var MenuComponent = this.MenuType;
        var _a = this, classNames = _a.classNames, href = _a.href, iconProps = _a.iconProps, className = _a.className, secondaryText = _a.secondaryText, isSplitButton = _a.isSplitButton, menuProps = _a.menuProps, menuIconProps = _a.menuIconProps, shouldRenderMenu = _a.shouldRenderMenu;
        return h(ButtonComponent, {
            ref: 'buttonElement',
            class: classNames.root,
            attrs: { href: href },
            on: {
                click: function (ev) { return _this.$emit('click', ev); },
            },
        }, [
            h('span', { class: classNames.flexContainer }, [
                iconProps && h(Icon, {
                    class: css(classNames.icon, className),
                    props: iconProps,
                }),
                this.$scopedSlots.flex && this.$scopedSlots.flex({}),
                this.$scopedSlots.default && h('span', { class: classNames.textContainer }, [
                    h('span', { class: classNames.label }, this.$scopedSlots.default({})),
                    secondaryText && h('span', { class: classNames.description }, secondaryText),
                ]),
                (!isSplitButton && menuProps) && h(FontIcon, {
                    class: classNames.menuIcon,
                    attrs: {
                        iconName: 'ChevronDown',
                    },
                    props: menuIconProps,
                }),
                (menuProps && !menuProps.doNotLayer && shouldRenderMenu) && h(MenuComponent, {
                    class: css('ms-BaseButton-menuhost', menuProps.className),
                    attrs: {
                        directionalHint: DirectionalHint.bottomLeftEdge,
                        target: isSplitButton ? this.$refs.splitButtonContainer : this.$refs.buttonElement,
                    },
                    props: menuProps,
                    on: {
                        dismiss: function () { return (_this.menuHidden = true); },
                    },
                }),
            ]),
        ]);
    },
});
//# sourceMappingURL=BaseButton.js.map