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

		<div class="ui form" v-if="!$store.getters.getIsUserOnMobile">
			<!-- normal search menu  -->
			<div class="ui left icon fluid input">
				<input ref="desktopSearch" v-model="searchTerm" @keyup.enter="search" placeholder="Search Notes and Files" />
				<i class="search icon"></i>
			</div>
			<div class="floating-button" v-if="searchTerm.length > 0 && !searched">
				<div class="ui green compact button" v-on:click="search()">Search</div>
			</div>
			<div class="floating-button" v-if="searchTerm.length > 0 && searched">
				<div class="ui grey compact button" v-on:click="clear()">Clear</div>
			</div>
		</div>

		<!-- Only show button on mobile -->
		<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: '',
				showFixedSearch: false,
				searched: 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()
					})
				}
			},
			clear(){
				this.searched = false
				this.searchTerm = ''
				if(!this.$store.getters.getIsUserOnMobile){
					this.$refs.desktopSearch.focus()
				}
				this.$bus.$emit('note_reload')
			},
			search(){
				this.searched = true
				if(this.$store.getters.getIsUserOnMobile){
					this.$refs.fixedSearch.blur()
				}
				if(!this.$store.getters.getIsUserOnMobile){
					this.$refs.desktopSearch.focus()
				}
				this.$bus.$emit('update_search_term', this.searchTerm)
			},
		}
	}
</script>