const TailboneAutocomplete = {

    template: '#tailbone-autocomplete-template',

    props: {
        name: String,
        serviceUrl: String,
        value: String,
        initialLabel: String,
    },

    data() {
        let selected = null
        if (this.value) {
            selected = {
                value: this.value,
                label: this.initialLabel,
            }
        }
        return {
            data: [],
            selected: selected,
            isFetching: false,
            autocompleteValue: this.value,
        }
    },

    methods: {

        clearSelection() {
            this.selected = null
            this.autocompleteValue = null
            this.$nextTick(function() {
                this.$refs.autocomplete.focus()
            })

            // TODO: should emit event for caller logic (can they cancel?)
            // $('#' + oid + '-textbox').trigger('autocompletevaluecleared');
        },

        // TODO: should we allow custom callback? or is event enough?
        // function (oid) {
        //     $('#' + oid + '-textbox').on('autocompletevaluecleared', function() {
        //         ${cleared_callback}();
        //     });
        // }

        selectionMade(option) {
            this.selected = option

            // TODO: should emit event for caller logic (can they cancel?)
            // $('#' + oid + '-textbox').trigger('autocompletevalueselected',
            //                                   [ui.item.value, ui.item.label]);
        },

        // TODO: should we allow custom callback? or is event enough?
        // function (oid) {
        //     $('#' + oid + '-textbox').on('autocompletevalueselected', function(event, uuid, label) {
        //         ${selected_callback}(uuid, label);
        //     });
        // }

        itemSelected(value) {
            this.$emit('input', value)
        },

        // TODO: buefy example uses `debounce()` here and perhaps we should too?
        // https://buefy.org/documentation/autocomplete
        getAsyncData: function (entry) {
            if (entry.length < 3) {
                this.data = []
                return
            }
            this.isFetching = true
            this.$http.get(this.serviceUrl + '?term=' + encodeURIComponent(entry))
                .then(({ data }) => {
                    this.data = data
                })
                .catch((error) => {
                    this.data = []
                    throw error
                })
                    .finally(() => {
                        this.isFetching = false
                    })
                        },
    },
}

Vue.component('tailbone-autocomplete', TailboneAutocomplete)