<template>
    <div class="tags">
        <h3>Ethnicity</h3>

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

        <h3>Penetration</h3>

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

        <h3>Group</h3>

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

        <h3>Finish</h3>

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

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

async function mounted() {
    const tags = await this.$store.dispatch('fetchTags', {
        slugs: [
            'airtight',
            'anal',
            'double-anal',
            'double-penetration',
            'double-vaginal',
            'da-tp',
            'dv-tp',
            'triple-anal',
            'blowbang',
            'gangbang',
            'mff',
            'mfm',
            'orgy',
            'asian',
            'caucasian',
            'ebony',
            'interracial',
            'latina',
            'anal-creampie',
            'bukkake',
            'creampie',
            'facial',
            'oral-creampie',
            'swallowing',
        ],
    });

    console.log(tags);

    this.tags = tags.reduce((acc, tag) => {
        if (acc[tag.group.slug]) {
            return { ...acc, [tag.group.slug]: [...acc[tag.group.slug], tag] };
        }

        return { ...acc, [tag.group.slug]: [tag] };
    }, {});
}

export default {
    components: {
        Tag,
    },
    data() {
        return {
            tags: {},
        };
    },
    mounted,
};
</script>

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

.tags {
    padding: 1rem;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap: .5rem;
}
</style>
