<template>
	<v-row dense>
		<v-col cols="12" md="auto">
			<div class="v-btn-toggle fill-width">
				<v-text-field
					v-if="!isDateSearch"
					v-model="search__"
					placeholder="Search"
					color="primary"
					dense hide-details
					height="32" 
					outlined
					clearable
					class="__input-dense"
					@keyup.enter="emitSearch()"
					@input="(val)=>{$emit('update:search', val)}"
				></v-text-field>
				<v-menu
					v-else
					v-model="menu2"
					:close-on-content-click="false"
					:nudge-right="40"
					transition="scale-transition"
					offset-y
					min-width="auto"
				>
					<template v-slot:activator="{ on, attrs }">
						<v-text-field
							v-model="search__"
							placeholder="Search"
							color="primary"
							dense hide-details
							height="32" 
							outlined
							clearable
							class="__input-dense"
							prepend-icon="mdi-calendar"
							readonly
							v-bind="attrs"
							v-on="on"
						></v-text-field>
					</template>
					<v-date-picker
						v-model="search__"
						range
						@input="(val)=>{$emit('update:search', val)}"
					></v-date-picker>
				</v-menu>
				<v-btn
					small
					height="32" 
					class="px-4"
					:disabled="disabled"
					@click="emitSearch()"
				>
					<v-icon>mdi-magnify</v-icon>
				</v-btn>
			</div>
		</v-col>
		<v-col cols="8" md="auto">
			<v-select
				v-model="searchBy__"
				height="32"
				label="Search By"
				class="__input-dense caption"
				dense hide-details
				outlined
				:items="items"
				@input="(val)=>{$emit('update:searchBy', val); $emit('update:search', null);}"
			></v-select>
		</v-col>
	</v-row>
</template>

<script>
export default{
	props:{
		search:{
			type: [String, Array],
			default: ""
		},
		searchBy:{
			type: String,
			default: ""
		},
		dateSearchBy:{
			type: Array,
			default: ()=>{
				return []
			}
		},
		items:{
			type: Array,
			default: ()=>{
				return []
			}
		},
		disabled:{
			type: Boolean,
			default: false
		}
	},
	computed: {
		isDateSearch()
		{
			for(let i = 0; i < this.dateSearchBy.length; i++)
			{
				if(this.dateSearchBy[i] == this.searchBy__)
					return true
			}
			return false
		}
	},
	data(){
		return {
			search__ : null,
			searchBy__ : "",
			menu2: false,
		}
	},
	watch:{
		"search":{
			handler(newVal){
				this.search__ = newVal
			},
			immediate: true,
		},
		"searchBy":{
			handler(newVal){
				this.searchBy__ = newVal
			},
			immediate: true,
		}
	},
	methods:{
		emitSearch(){
			this.$emit('search')
		}
	}
}
</script>