import { r as registerInstance, c as createEvent, h, H as Host } from './core-f530a7ef.js';
var Autocomplete = /** @class */ (function () {
    function class_1(hostRef) {
        registerInstance(this, hostRef);
        /**
        * Apply low density on the element
        */
        this.dense = false;
        this.showSuggestions = false;
        this.selectedIndex = -1;
        this.change = createEvent(this, "change", 7);
    }
    class_1.prototype.componentDidLoad = function () {
        var _this = this;
        this.watchValue();
        this.textElement.addEventListener('keydown', function (event) { return _this.navigateSuggestions(event); });
    };
    class_1.prototype.componentWillLoad = function () {
        this.watchValue();
    };
    class_1.prototype.watchValue = function () {
        if (this.value) {
            this.value.label = this.value.label ? this.value.label : this.value.value;
        }
        else {
            this.value = {
                value: null,
                label: null
            };
        }
    };
    class_1.prototype.navigateSuggestions = function (event) {
        if (this.suggestions && this.suggestions.size > 0) {
            var newIndex = void 0;
            var suggestionKeys = Array.from(this.suggestions.keys());
            switch (event.key) {
                case 'ArrowDown':
                    newIndex = this.selectedIndex !== null ? this.selectedIndex + 1 : 0;
                    if (newIndex >= this.suggestions.size) {
                        newIndex = 0;
                    }
                    this.selectedIndex = newIndex;
                    break;
                case 'ArrowUp':
                    newIndex = this.selectedIndex !== null ? this.selectedIndex - 1 : this.suggestions.size - 1;
                    if (newIndex < 0) {
                        newIndex = this.suggestions.size - 1;
                    }
                    this.selectedIndex = newIndex;
                    break;
                case 'Enter':
                    // Select first value with enter if none selected
                    if (this.selectedIndex === null) {
                        this.selectedIndex = 0;
                    }
                    this.selectSuggestion(suggestionKeys[this.selectedIndex]);
                    this.change.emit(this.value);
                    this.clearSuggestions();
                    return;
                default:
                    return;
            }
            event.preventDefault();
        }
    };
    class_1.prototype.clearSuggestions = function () {
        this.selectedIndex = -1;
        this.suggestions = null;
    };
    class_1.prototype.selectSuggestion = function (key) {
        this.showSuggestions = false;
        if (this.suggestions) {
            var newValue = {
                value: key,
                label: this.suggestions.get(key)
            };
            this.value = Object.assign({}, newValue);
        }
    };
    class_1.prototype.execAutocomplete = function (event) {
        var _this = this;
        this.value.label = event.target.value;
        this.autocomplete(event.target.value).then(function (suggests) { return _this.suggestions = suggests; });
        this.showSuggestions = this.suggestions && this.suggestions.size > 0;
    };
    class_1.prototype.handleChange = function () {
        if (!this.textElement.value) {
            this.value = null;
            this.change.emit(this.value);
        }
        else {
            this.change.emit(this.value);
        }
    };
    class_1.prototype.render = function () {
        var _this = this;
        return (h(Host, { style: { 'position': 'relative' }, onBlur: function () {
                _this.change.emit(_this.value);
                _this.showSuggestions = false;
            } }, h("materials-text-field", { ref: function (el) { return _this.textElement = el; }, "trailing-icon": this.trailingIcon, dense: this.dense, label: this.label, focused: !!this.value.label, value: this.value.label, onInput: function (ev) { return _this.execAutocomplete(ev); }, onChange: function (ev) {
                ev.stopPropagation();
                ev.preventDefault();
                _this.handleChange();
            } }), this.showSuggestions &&
            h("materials-list", { style: { 'position': 'absolute', 'top': (this.textElement.getBoundingClientRect().bottom - this.textElement.getBoundingClientRect().top) + 'px' } }, Array.from(this.suggestions.keys()).map(function (key, index) { return index < _this.maxSuggestions ?
                h("materials-list-item", { selected: index === _this.selectedIndex, onClick: function () {
                        _this.selectSuggestion(key);
                        _this.change.emit(_this.value);
                        _this.clearSuggestions();
                    }, label: _this.suggestions.get(key) }) : null; }))));
    };
    Object.defineProperty(class_1, "watchers", {
        get: function () {
            return {
                "value": ["watchValue"]
            };
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "style", {
        get: function () { return ":host{display:block}materials-list{z-index:1;background-color:#fff;width:100%;overflow-y:visible;-webkit-box-shadow:0 2px 4px 0 #aaa;box-shadow:0 2px 4px 0 #aaa}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
export { Autocomplete as materials_autocomplete };
