<template>
    <div class="metrics" v-if="metrics">
        <div class="metric" v-for="metric in metrics" :key="metric.name">
            <div class="metric-header">
                <Icon class="metric-icon" :icon="getIcons(metric.name)" />
                <div class="metric-info">
                    <p class="metric-name">{{ metric.description.replace(server.id, "").replace(server.name, "").replace(":", "") }}</p>
                    <p class="metric-id">{{ metric.name }}</p>
                </div>
            </div>
            <p class="metric-value" v-if="metric.name.includes('Seconds')">{{ getReadableDuration(metric.value) }}</p>
            <p v-else class="metric-value">{{ metric.value }}</p>
        </div>
    </div>
    <div v-else>
        <p class="second">Aucune statistique enregistrée !</p>
    </div>
</template>
<script setup>
import { IORequest } from '@/utils/IORequest';
import Events from '@/utils/Events';
import { ref } from 'vue';
import { useUserStore } from '@/stores/userStore';
import { getReadableDuration } from '@/utils/TimeConverter';

function getIcons(name) {
    if(name.includes("Commands")) return "fa-solid fa-terminal";
    if(name.includes("Music")) return "fa-solid fa-music";
    if(name.includes("Seconds")) return "fa-solid fa-clock";
    return "fa-solid fa-chart-bar";
}

const userStore = useUserStore();

const metrics = ref(null);

const props = defineProps({
    server: {
        type: Object,
        required: true
    }
});

Events.on("GUILD_JOINED", () => {
    if(!(userStore.userInfo.identity.isAdmin || userStore.userInfo.identity.isMod || userStore.userInfo.identity.id == props.server.owner)) return;
    IORequest("/MOD/STATS", (data) => {
        metrics.value = data;
    });
});

</script>

<style scoped>
.second {
    color: var(--text-secondary);
    font-size: 0.8em;
}

.metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--tertiary);
    border-radius: 10px;
}

.metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    overflow-y: auto;
    max-height: 30vh;
}

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-info p {
    margin: 0;
}

@media screen and (max-width: 768px) {

    .metric {
        flex-direction: column;
    }

    
    .metric-name {
        word-break: break-all;
    }
}

.metric-name {
    font-weight: bold;
    color: var(--text-primary);
}

.metric-id {
    color: var(--text-secondary);
    font-size: 0.7em;
    word-break: break-all;;
}

.metric-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-value {
    background-color: var(--secondary);
    padding: 5px;
    border-radius: 5px;
}

.metric-icon {
    background-color: var(--secondary);
    padding: 20px;
    border-radius: 100%;
    width: 16px;
    height: 16px;
}
</style>