<script setup>
import { computed } from 'vue';

const $props = defineProps({
    item: {
        type: Object,
        required: true,
    },
    tag: {
        type: String,
        required: false,
        default: 'tag',
    },
    value: {
        type: String,
        required: false,
        default: 'value',
    },
    columns: {
        type: Number,
        required: false,
        default: null,
    },
});

const tags = computed(() => {
    return Object.keys($props.item)
        .filter((i) => i.startsWith(`${$props.tag}`))
        .reduce((acc, tag) => {
            const n = tag.split(`${$props.tag}`)[1];
            const key = `${$props.tag}${n}`;
            const value = `${$props.value}${n}`;
            acc[$props.item[key] ?? key] = $props.item[value] ?? '';
            return acc;
        }, {});
});

const columnStyle = computed(() => {
    if ($props.columns) {
        return {
            'grid-template-columns': `repeat(${$props.columns}, 1fr)`,
            'max-width': `${$props.columns * 4}rem`,
        };
    }
    return {};
});
</script>

<template>
    <div class="fetchedTags">
        <div class="wrap" :style="columnStyle">
            <div
                v-for="(val, key) in tags"
                :key="key"
                class="inline-tag"
                :title="`${key}: ${val}`"
                :class="{ empty: !val }"
            >
                <span class="text">{{ val }} </span>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.fetchedTags {
    align-items: center;
    .wrap {
        display: grid;
    }

    .inline-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1rem;
        margin: 0.05rem;
        color: var(--vn-label-color);
        text-align: center;
        font-size: smaller;
        padding: 1px;
        border: 1px solid var(--vn-label-color);
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 4rem;
        max-width: 4rem;
    }

    .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: smaller;
    }
    .empty {
        border: 1px solid var(--vn-empty-tag);
    }
}
</style>
