<template>
	<w-menu
		class="search-bar"
		align-left
		:value="isSearching && active"
	>
		<template #activator>
			<w-input
				v-model="searchQuery"
				bg-color="shade-3"
				:placeholder="placeholder"
				class="search-bar__input"
				inner-icon-left="mdi mdi-magnify"
				autocomplete="off"
				color="grey"
				@focus="isSearching = true"
				@blur="isSearching = false"
			/>
		</template>
		<slot />
	</w-menu>
</template>

<script lang="ts">
import { debounce } from 'lodash';
import Vue from 'vue';

export default Vue.extend({
	name: 'SearchBar',

	props: {
		value: {
			type: String
		},
		active: {
			type: Boolean
		},
		placeholder: {
			type: String
		}
	},

	data: () => ({
		searchQuery: '',
		isSearching: false,
		fetcherFn: null as unknown as Function,
	}),

	watch: {
		value(value) {
			this.searchQuery = value;
		},
		searchQuery() {
			this.fetcherFn();
		}
	},

	created() {
		this.fetcherFn = debounce(() => {
			this.$emit('input', this.searchQuery);
		}, 500);
	}
	
});
</script>

<style lang="scss">
.search-bar__input {
	@include rounded(lg);
	@include margin(8, b);

	overflow: hidden;
}
</style>