<style type="text/css" scoped>
	.fixed-search {
		position: fixed;
		top: 50%;
		left: 0;
		right: 0;
		padding: 10px;
	}
</style>
<template>
	<span>

		<div class="ui form" v-if="!$store.getters.getIsUserOnMobile">
			<!-- normal search menu  -->
			<div class="ui left icon fluid input">
				<input v-model="searchTerm" @keyup.enter="search" placeholder="Search Notes and Files" ref="searchInput"/>
				<i class="search icon"></i>
			</div>
		</div>

		
		<span class="ui basic icon button" v-on:click="openFloatingSearch" v-if="$store.getters.getIsUserOnMobile">
			<i class="green search icon"></i>
		</span>

		<div class="fixed-search" v-if="showFixedSearch">
			<div class="ui raised segment">
				<h2 class="ui center aligned header">Search!</h2>
				<div class="ui form">
					<div class="ui left icon fluid input">
						<input 
							ref="fixedSearch"
							v-model="searchTerm"
							@keyup.enter="search"
							v-on:blur="showFixedSearch = false"
							placeholder="Press Enter to Search" />
						<i class="search icon"></i>
					</div>
				</div>
			</div>
		</div>

	</span>
</template>

<script>

	export default {

		data: function(){ 
			return {
				searchTerm: '',
				searchTimeout: null,
				searchDebounceDuration: 300,
				showFixedSearch: false,
			}
		},
		beforeCreate: function(){
		},
		mounted: function(){

			//search clear 
			this.$bus.$on('reset_fast_filters', () => {
				this.searchTerm = ''
			})

		},
		methods: {
			openFloatingSearch(){
				this.showFixedSearch = !this.showFixedSearch

				if(this.showFixedSearch){
					this.$nextTick( () => {
						this.searchTerm = ''
						this.$refs.fixedSearch.focus()
					})
				}
			},
			searchKeyUp(){
				//This event is not triggered on mobile
				clearTimeout(this.searchTimeout)
				this.searchTimeout = setTimeout(() => {
					this.search()
				}, this.searchDebounceDuration)
			},
			search(){
				if(this.$store.getters.getIsUserOnMobile){
					this.$refs.fixedSearch.blur()
				}
				this.$bus.$emit('update_search_term', this.searchTerm)
			},
		}
	}
</script>