<template>
    <div
        v-if="showControlBar"
        class="good-table__search">
        <div class="good-table__search-input">
            <input
                aria-label="search"
                v-if="searchEnabled"
                type="text"
                :placeholder="globalSearchPlaceholder"
                :value="value"
                @input="updateValue($event.target.value)"
                @keyup.enter="entered">
        </div>
        <div v-if="enableSearchButton" class="good-table__search__button">
            <button
                class="btn btn-primary" @click="searchButtonClicked">
                <i
                    aria-hidden="true"
                    class="fas fa-search mr-1" />Search
            </button>
        </div>
        <div class="good-table__search__actions">
            <slot name="internal-table-actions" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'VgtGlobalSearch',
    props: [
        'value',
        'searchEnabled',
        'globalSearchPlaceholder',
        'enableSearchButton',
    ],
    data() {
        return {
            globalSearchTerm: null,
        };
    },
    computed: {
        showControlBar() {
            if (this.searchEnabled) return true;
            if (this.$slots && this.$slots['internal-table-actions']) return true;
            return false;
        },
    },
    methods: {
        updateValue(value) {
            this.$emit('input', value);
            this.$emit('on-keyup', value);
        },
        entered() {
            const details = {
                trigger: 'enter',
                value: this.value,
            };
            this.$emit('on-enter', details);
        },
        searchButtonClicked() {
            // The search value isn't in the item that was clicked, so we need to find the value of the search input.
            const details = {
                trigger: 'button',
                value: this.value,
            };
            this.$emit('on-search-button-click', details);
        },
    },
};
</script>

<style>

</style>
