<template>
	<div class="tags">
		<div
			v-for="(tags, category) in categories"
			:key="category"
		>
			<h3 class="heading">{{ category }}</h3>

			<div
				:key="sfw"
				v-lazy-container
				class="tiles"
			>
				<Tag
					v-for="tag in tags"
					:key="`tag-${tag.id}`"
					:tag="tag"
					:lazy="true"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import Tag from '../tile/tag.vue';

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

async function mounted() {
	const tagSlugsByCategory = {
		popular: [
			'anal',
			'lesbian',
			'interracial',
			'mff',
			'mfm',
			'natural-boobs',
			'fake-boobs',
			'teen',
			'milf',
			'blowjob',
			'orgy',
			'gangbang',
			'double-penetration',
			'facial',
			'creampie',
		],
		oral: [
			'deepthroat',
			'facefucking',
			'double-blowjob',
			'blowbang',
			'pussy-eating',
			'ass-eating',
			'ass-to-mouth',
		],
		appearance: [
			'asian',
			'ebony',
			'latina',
			'caucasian',
			'blonde',
			'brunette',
			'redhead',
		],
		extreme: [
			'airtight',
			'double-anal',
			'double-vaginal',
			'da-tp',
			'dv-tp',
			'triple-anal',
		],
		cumshot: [
			'facial',
			'bukkake',
			'creampie',
			'anal-creampie',
			'cum-in-mouth',
		],
		roleplay: [
			'family',
			'schoolgirl',
			'nurse',
			'maid',
		],
		misc: [
			'gaping',
			'oil',
		],
	};

	const tags = await this.$store.dispatch('fetchTags', {
		slugs: Object.values(tagSlugsByCategory).flat(),
	});

	const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});

	this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => ({
		...acc,
		[category]: tagSlugs.map(tagSlug => tagsBySlug[tagSlug]),
	}), {});

	this.pageTitle = 'Tags';
}

export default {
	components: {
		Tag,
	},
	data() {
		return {
			categories: {},
			pageTitle: null,
		};
	},
	computed: {
		sfw,
	},
	mounted,
};
</script>

<style lang="scss" scoped>
@import 'theme';

.tags {
    padding: 1rem;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(23rem, .33fr));
    grid-gap: 1rem;
    margin: 0 0 1.5rem 0;
}

.heading {
    font-size: 1.3rem;
    text-transform: capitalize;
}

@media(max-width: $breakpoint3) {
    .tiles {
        grid-template-columns: repeat(auto-fill, minmax(21rem, .5fr));
    }
}

@media(max-width: $breakpoint) {
    .tiles {
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    }
}
</style>
