export default () => ({
        search: false,
        menu: false,
        searchValue: '',
        isLoading: false,
        results: '',
        init() {
            this.$el.classList.remove('hidden');
            // this.open();
        },
        openSearch() {
            // this.$refs.nav.classList.remove('w-0')
            this.$refs.search.classList.add('translate-y-72')
            this.$refs.searchField.focus()
            this.search = true;
        },
        openMenu() {
            this.$refs.nav.classList.remove('w-0')
            this.$refs.nav.classList.add('w-2/3')
            this.menu = true;
        },
        closeSearch() {
            this.searchValue = ''
            this.results = ''
            this.$refs.search.classList.remove('translate-y-72')
            this.search = false;
        },
        closeMenu() {
            this.$refs.nav.classList.add('w-0')
            this.$refs.nav.classList.remove('w-2/3')
            this.menu = false;
        },
        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);
                    });

            }
        }

});