<template>
    <div class="field is-horizontal">
        <div class="field-label">
            <label class="label">Nouvel objet</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control is-expanded">
                    <input type="text"
                        name="name"
                        placeholder="Nom de l'objet"
                        v-model="item.name"
                        @input="autoCompletion"
                        class="input"
                        autocomplete="on"
                    >
                </div>
                <div class="dropdown" :class="{'is-active': showCompletionFrame}">
                    <div class="dropdown-menu">
                        <div class="dropdown-content">
                            <a v-for="(result,i) in results"
                                :key="i"
                                @click="setResult(result)"
                                class="dropdown-item"
                            >{{ result.name }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="field is-expanded has-addons" v-show="item.name != ''">
                <p class="control"><a class="button is-static">PO</a></p>
                <p class="control">
                    <input type="text"
                        name="base_price"
                        placeholder="Prix"
                        class="input"
                        :class="{'is-danger': item.base_price == ''}"
                        v-model.number="item.base_price"
                    >
                </p>
            </div>
            <div class="field">
                <div class="control">
                    <button class="button is-primary"
                        @click="addItem"
                        :disabled="!isItemValid"
                    >Ajouter</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ["source"],
        data () {
            return {
                is_loading: false,
                item: {
                    id: 0,
                    name: '',
                    base_price: '',
                },
                results: [],
            };
        },
        methods: {
            autoCompletion () {
                // Unset any previous value on input (for every field except item's name)
                this.item.base_price = '';
                if (this.item.name == '') {
                    this.results = [];
                } else {
                    this.results = this.source.filter(
                        item => item.name.toUpperCase().includes(this.item.name.toUpperCase())
                    );
                }
            },
            setResult(result) {
                this.item.id = result.id;
                this.item.name = result.name;
                this.item.base_price = result.base_price;
                // Clear results to close completionFrame
                this.results = [];
            },
            addItem () {
                this.$emit("addItem", this.item);
                this.item = {
                    name: '',
                    base_price: '',
                };
                this.results = [];
            },
        },
        computed: {
            showCompletionFrame () { return this.results.length > 0 },
            isItemValid () { return this.item.name != '' && this.item.base_price != '' },
        }
    }
</script>

<style scoped>
.dropdown, .dropdown-menu {
    min-width: 100%;
    margin-top: 0;
    padding-top: 0;
}
</style>
