<script setup>
import Cookies from 'js-cookie';
import { ref } from 'vue';

import Checkbox from '#/components/form/checkbox.vue';

const cookies = Cookies.withConverter({
	write: (value) => value,
});

const tags = {
	'anal': 'anal',
	'anal-prolapse': 'anal prolapse',
	'extreme-insertion': 'extreme insertion (oversized dildos)',
	'pissing': 'pissing',
	'gay': 'gay',
	'transsexual': 'transsexual',
	'bisexual': 'bisexual',
	'compilation': 'compilation',
	'bts': 'behind the scenes',
	'vr': 'virtual reality',
};

const storedTags = cookies.get('tags');
const checkedTags = ref(new Set(storedTags ? JSON.parse(storedTags) : []));

function toggleTag(tag, isChecked) {
	if (isChecked) {
		checkedTags.value.add(tag);
	}
	else {
		checkedTags.value.delete(tag);
	}

	cookies.set('tags', JSON.stringify(Array.from(checkedTags.value)), { expires: 400 }); // 100 years from now
}
</script>

<template>
	<div class="dialog-section">
		<p class="dialog-description">Check the tags that you prefer to be <strong>excluded</strong> from the results. The filter is a courtesy, and provides no guarantees.</p>

		<ul class="tags nolist">
			<li
				v-for="(label, slug) in tags"
				:key="`tag-${slug}`"
				class="tags-item"
			>
				<label class="tag noselect">
					<Checkbox
						:value="slug"
						:checked="checkedTags.has(slug)"
						class="minus"
						@change="(checked) => toggleTag(slug, checked)"
					/>{{ label }}
				</label>
			</li>
		</ul>
	</div>
</template>

<style scoped>
.tags-item {
	display: block;
}

.tag {
	display: flex;
	padding: .5rem 0;
	text-transform: capitalize;

	.check-container {
		margin-right: 1rem;
	}
}
</style>
