import { __assign } from "tslib";
import Vue from 'vue';
import { classNamesFunction, elementContains } from '@uifabric-vue/utilities';
import { withThemeableProps } from '../../useThemeable';
import { Selection, SelectionZone, SelectionMode } from '../../utilities';
import { Autofill } from '../Autofill/index';
import { Callout } from '../Callout';
import { DirectionalHint } from '../../common/DirectionalHint';
var getClassNames = classNamesFunction();
export var BasePicker = Vue.extend({
    props: __assign(__assign({}, withThemeableProps()), { disabled: { type: Boolean, default: false }, selectionRole: { type: String, default: 'list' }, selectionAriaLabel: { type: String, default: '' }, inputProps: { type: Object, default: undefined }, itemLimit: { type: Number, default: undefined }, onResolveSuggestions: { type: Function, default: undefined } }),
    data: function () {
        return {
            selection: undefined,
            items: [],
            suggestedDisplayValue: '',
            isMostRecentlyUsedVisible: false,
            moreSuggestionsAvailable: false,
            isFocused: false,
            isSearching: false,
            selectedIndices: [],
            selectionRemoved: undefined,
            suggestionsVisible: false,
            suggestionsLoading: false,
            isResultsFooterVisible: false,
        };
    },
    computed: {
        classNames: function () {
            var _a = this, isFocused = _a.isFocused, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled, theme = _a.theme, styles = _a.styles;
            return getClassNames(styles, {
                theme: theme,
                className: className,
                isFocused: isFocused,
                disabled: disabled,
                inputClassName: inputProps && inputProps.className,
            });
        },
        canAddItems: function () {
            return true;
            // return this.itemLimit === undefined || this.items.length < this.itemLimit;
        },
    },
    created: function () {
        var _this = this;
        this.selection = new Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });
    },
    methods: {
        onSelectionChange: function () {
            console.log(this.selection.getSelectedIndices());
        },
        updateSuggestionsList: function (suggestions, updatedValue) {
        },
        resolveSuggestions: function (updatedValue) {
            // const suggestions: any[] | PromiseLike<any[]> | null = this.onResolveSuggestions(updatedValue, this.items)
            console.log(updatedValue);
            this.suggestionsVisible = true;
            // if (suggestions !== null) {
            //   this.updateSuggestionsList(suggestions, updatedValue)
            // }
        },
        updateValue: function (updatedValue) {
            this.resolveSuggestions(updatedValue);
        },
        onInputChange: function (value) {
            this.updateValue(value);
            this.moreSuggestionsAvailable = true;
            this.isMostRecentlyUsedVisible = false;
        },
        onKeyDown: function (ev) {
        },
        onFocus: function () {
            console.log('onFocus');
            if (this.isFocused)
                return;
            this.isFocused = true;
        },
        onBlur: function (ev) {
            console.log('onBlur');
            if (!this.isFocused)
                return;
            var relatedTarget = ev.relatedTarget;
            if (ev.relatedTarget == null) {
                // In IE11, due to lack of support, event.relatedTarget is always
                // null making every onBlur call to be "outside" of the ComboBox
                // even when it's not. Using document.activeElement is another way
                // for us to be able to get what the relatedTarget without relying
                // on the event
                relatedTarget = document.activeElement;
            }
            if (relatedTarget && !elementContains(this.$refs.root, relatedTarget)) {
                this.isFocused = false;
                this.$emit('blur', ev);
                console.log('blur');
            }
        },
    },
    render: function (h) {
        var _this = this;
        var classNames = this.classNames;
        return h('div', {
            ref: 'root',
            class: classNames.root,
            on: {
                keydown: this.onKeyDown,
                focus: this.onFocus,
                blur: this.onBlur,
            },
        }, [
            h('span', {}, this.selectionAriaLabel),
            h(SelectionZone, {
                props: {
                    selection: this.selection,
                    selectionMode: SelectionMode.multiple,
                },
            }, [
                h('div', {
                    class: classNames.text,
                }, [
                    this.items.length > 0 && h('span', {
                        class: classNames.itemsWrapper,
                    }, this.items.map(function (item, index) {
                        var _a, _b;
                        return (_b = (_a = _this.$scopedSlots) === null || _a === void 0 ? void 0 : _a.renderItems) === null || _b === void 0 ? void 0 : _b.call(_a, { item: item, index: index });
                    })),
                    this.canAddItems && h(Autofill, {
                        ref: 'input',
                        class: classNames.input,
                        props: {
                            suggestedDisplayValue: 'asdf',
                            disabled: this.disabled,
                        },
                        on: {
                            input: this.onInputChange,
                        },
                    }),
                ]),
            ]),
            this.suggestionsVisible && h(Callout, {
                props: {
                    isBeakVisible: false,
                    gapSpace: 5,
                    // @ts-ignore
                    target: this.$refs.input ? this.$refs.input.$el : undefined,
                    directionalHint: DirectionalHint.bottomLeftEdge,
                },
            }, [
                h('div', 'suggestions'),
            ]),
        ]);
    },
});
//# sourceMappingURL=BasePicker.js.map