export default () => ({
        search: false,
        searchValue: '',
        isLoading: true,
        results: '',
        init() {
            // this.$el.classList.remove('hidden');
            // this.openMenu();
            // this.open();
        },
        closeSearch() {
            this.searchValue = '';
        },


        isSearchOpen() {
            return this.search === true;
        },
        isMenuOpen() {
            return this.menu === true;
        },
        showOverlay() {
            return this.search || this.menu
        },
        shouldSearch() {
            return  this.searchValue.length >= 2;
        },
        searching(fetch = true) {
            if(fetch){
                this.isLoading = true;
                this.$refs.results.classList.add('opacity-0')
            } else {
                this.isLoading = false;
                this.$refs.results.classList.remove('opacity-0')
            }
        },
        fetchResults(query) {
            // console.log(query);
            if (this.shouldSearch) {
                this.searching();
                fetch('/api/search', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json, text/plain, */*',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({query: this.searchValue})
                    }).then(res => {
                        if (res.ok) {
                            return res.json();
                        }
                        throw new Error('Something went wrong');
                    }).then(data => {
                        this.results = data.html.length ? data.html : `<span class='w-full p-1.5 group overflow-hidden bg-gray-800 hover:bg-gray-700 h-20 flex items-center justify-center font-semibold'>No Result Found</span>`
                        setTimeout(this.searching(false), 2000)


                    })
                    .catch( (error) => {
                        console.log(error);
                    });

            }
        }

});