<template>
	<div class="ui form">
		<div class="fields">
			<div class="sixteen wide field">
				<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes and Files" />
			</div>
		</div>
	</div>
</template>

<script>

	export default {

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

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

		},
		methods: {
			searchKeyUp(){
				clearTimeout(this.searchTimeout)
				this.searchTimeout = setTimeout(() => {
					this.search()
				}, this.searchDebounceDuration)
			},
			search(){
				this.$bus.$emit('update_search_term', this.searchTerm)
			},
		}
	}
</script>