import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import { css } from '@uifabric-vue/utilities';
import { getStyles } from './ComboBox.styles';
import BaseComponent from '../BaseComponent';
import { Label } from '../Label';
import { IconButton, ActionButton } from '../Button';
import { Autofill } from '../Autofill';
import VNodes from '../VNodes';
import { getClassNames } from './ComboBox.classNames';
import { Callout } from '../Callout';
import { Checkbox } from '../Checkbox';
var SearchDirection;
(function (SearchDirection) {
    SearchDirection[SearchDirection["backward"] = -1] = "backward";
    SearchDirection[SearchDirection["none"] = 0] = "none";
    SearchDirection[SearchDirection["forward"] = 1] = "forward";
})(SearchDirection || (SearchDirection = {}));
var HoverStatus;
(function (HoverStatus) {
    /** Used when the user was hovering and has since moused out of the menu items */
    HoverStatus[HoverStatus["clearAll"] = -2] = "clearAll";
    /** Default "normal" state, when no hover has happened or a hover is in progress */
    HoverStatus[HoverStatus["default"] = -1] = "default";
})(HoverStatus || (HoverStatus = {}));
var ScrollIdleDelay = 250; /* ms */
var TouchIdleDelay = 500; /* ms */
/**
 * This is used to clear any pending autocomplete text (used when autocomplete is true and
 * allowFreeform is false)
 */
var ReadOnlyPendingAutoCompleteTimeout = 1000; /* ms */
var ComboBoxBase = /** @class */ (function (_super) {
    __extends(ComboBoxBase, _super);
    function ComboBoxBase() {
        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;
    }
    ComboBoxBase.prototype.mounted = function () {
        var _this = this;
        var cb = this._async.throttle(function () {
            if (!_this.$refs.comboBoxWrapper)
                return;
            /** Update `comboBoxMenuWidth` with 60 fps. */
            _this.comboBoxMenuWidth = _this.$refs.comboBoxWrapper.clientWidth + 2;
        }, 1 / 60);
        // const observer = new ResizeObserver(cb)
        // observer.observe(document.body)
    };
    Object.defineProperty(ComboBoxBase.prototype, "hasErrorMessage", {
        get: function () {
            var errorMessage = this.errorMessage;
            return !!(errorMessage && errorMessage.length > 0);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(ComboBoxBase.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, suggestedDisplayValue = _b.suggestedDisplayValue;
            return getClassNames(getStyles(theme, customStyles), className, !!isOpen, !!disabled, !!required, !!focused, !!allowFreeform, !!hasErrorMessage);
        },
        enumerable: false,
        configurable: true
    });
    /**
     * Gets the current comboBoxWrapper width, including its border offset. Has to be recalculated on each render cycle of
     * the Callout, in case the window size changed.
     */
    ComboBoxBase.prototype.getComboBoxMenuWidth = function () {
        if (!this.$refs.comboBoxWrapper)
            return 0;
        return this.$refs.comboBoxWrapper.clientWidth + 2;
    };
    ComboBoxBase.prototype.onFocus = function (e) {
    };
    ComboBoxBase.prototype.onBlur = function (e) {
    };
    ComboBoxBase.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 : undefined),
                attrs: {
                    target: this.$refs.comboBoxWrapper,
                    isBeakVisible: false,
                    gapSpace: 0,
                    doNotLayer: false,
                    calloutWidth: this.getComboBoxMenuWidth(),
                    calloutMaxWidth: this.getComboBoxMenuWidth(),
                    hidden: persistMenu ? !state.isOpen : undefined,
                },
            }, [
                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)
    ], ComboBoxBase.prototype, "allowFreeform", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", String)
    ], ComboBoxBase.prototype, "autoComplete", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", String)
    ], ComboBoxBase.prototype, "errorMessage", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], ComboBoxBase.prototype, "text", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], ComboBoxBase.prototype, "calloutProps", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], ComboBoxBase.prototype, "buttonIconProps", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], ComboBoxBase.prototype, "comboBoxOptionStyles", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Boolean)
    ], ComboBoxBase.prototype, "autofill", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Boolean)
    ], ComboBoxBase.prototype, "disabled", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Boolean)
    ], ComboBoxBase.prototype, "required", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Boolean)
    ], ComboBoxBase.prototype, "persistMenu", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ComboBoxBase.prototype, "multiSelect", void 0);
    ComboBoxBase = __decorate([
        Component({
            components: { Autofill: Autofill, Label: Label, IconButton: IconButton, Callout: Callout, ActionButton: ActionButton, Checkbox: Checkbox, VNodes: VNodes },
        })
    ], ComboBoxBase);
    return ComboBoxBase;
}(BaseComponent));
export { ComboBoxBase };
//# sourceMappingURL=ComboBox.base.js.map