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

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

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

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

    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,
        };
    },
    mounted,
};
</script>

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

.tags {
    padding: 1rem;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
    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-fit, minmax(20rem, .5fr));
    }
}

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