export default () => ({
        search: false,
        menu: false,
        searchValue: '',
        isLoading: false,
        results: '',
        init() {
            this.$el.classList.remove('hidden');
            // this.openMenu();
            // 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);
        //             });

        //     }
        // }

});