<template>
	<span v-on:mouseover="open = true" v-on:mouseleave="open = false" class="relative clickable filter-header" :class="{'filter-active':open}">
		{{displayString()}} <i class="grey caret down icon"></i>
		<span class="filter-menu" v-if="open">
			<span v-for="(filter,label) in filterOptions" class="filter-option" v-on:click="updateFilter(filter, label)">{{label}}</span>
		</span>
	</span>
</template>

<script>
	export default {
	name: 'FastFilters',
		data () {
			return {
				click: 0,
				open: false,
				filter: {},
				orderString: 'Order by Last Edited',
				filterOptions:{
					'Order by Last Edited'			:'lastEdited',
					'Order by Last Opened'			:'lastOpened',
					'Order by Last Created'			:'lastCreated',
				}
			}
		},
		beforeMount(){
			this.$bus.$on('reset_fast_filters', () => {
				this.orderString = 'Order by Last Edited'
			})
		},
		methods:{
			displayString(){
				return this.orderString.replace('Order by','').replace('Only Show','')
			},
			updateFilter(option, label){

				this.orderString = label
				this.open = false

				let filter = {}
				filter[option] = 1

				this.$bus.$emit('update_fast_filters', filter)
			}
		}
	}
</script>
<style type="text/css" scoped>

	.filter-header {
		width: 200px;
		padding: 0 0 0 10px;
		border: 1px solid rgba(0,0,0,0);
		border-bottom: none;
		display: inline-block;
		box-sizing: border-box;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		margin: 0 0 0 -11px;
		float: right;
	}
	.filter-menu {

		color: var(--text_color);
  		background-color: var(--background_color);
  		

  		border: 1px solid;
  		border-top: none;

		position: absolute;
		top: 100%;
		width: 200px;
		left: -1px;
		z-index: 10;
		padding-top: 10px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		border-color: var(--border_color);
	}
	.filter-active {
		border: 1px solid;
		border-bottom: none;
		border-color: var(--border_color);
	}
	.filter-option {
		font-size: 17px;
		width: 100%;
		display: inline-block;
		cursor: pointer;
		padding: 0 0 5px 10px;
	}
</style>