<template>
	<Dialog
		title="filters"
		@close="$emit('close')"
	>
		<h3 class="form-heading">Show me</h3>

		<ul class="tags nolist">
			<li
				v-for="tag in tags"
				:key="tag"
				class="tags-item"
			>
				<Checkbox
					:checked="!tagFilter.includes(tag)"
					:label="tag"
					class="tag"
					@change="(state) => filterTag(tag, state)"
				/>
			</li>
		</ul>
	</Dialog>
</template>

<script>
import Checkbox from '../form/checkbox.vue';

function tagFilter() {
	return this.$store.state.ui.tagFilter;
}

function filterTag(tag, isChecked) {
	if (isChecked) {
		this.$store.dispatch('setTagFilter', this.tagFilter.filter(filteredTag => filteredTag !== tag));
	} else {
		this.$store.dispatch('setTagFilter', this.tagFilter.concat(tag));
	}
}

export default {
	components: {
		Checkbox,
	},
	data() {
		return {
			tags: ['anal', 'gay', 'transsexual', 'bisexual', 'pissing'],
		};
	},
	computed: {
		tagFilter,
	},
	emits: ['close'],
	methods: {
		filterTag,
	},
};
</script>

<style lang="scss" scoped>
.tags-item {
	width: 20rem;
	max-width: 100%;
	display: block;
}

.tag {
	padding: .5rem 0;
}
</style>
