<template>
    <div class="users">
        <div class="user" v-for="member in users" :key="member.identity.id">
            <div class="group">
                <User :user="member" />
                <div class="info">
                    <Role :user="member" />
                    <Tag v-if="member.isBanned" color="var(--text-error)">Banni</Tag>
                </div>
            </div>
            
            <div>
                <div v-if="member.identity.id == userStore.userInfo.identity.id">
                    <p class="you">Vous</p>
                </div>
                <div v-else-if="member.identity.isAdmin">
                    <p class="you">Administrateur</p>
                </div>
                <div v-else-if="member.identity.isOwner">
                    <p class="you">Propriétaire</p>
                </div>
                <div class="actions" v-else>
                    <IconAction title="Bannir" v-if="!member.identity.isMod" :color="member.isBanned ? 'var(--text)' : 'var(--text-tertiary)'" @click="banUser(member)" icon="fa-solid fa-hammer"/>
                    <IconAction title="Nommer / Retirer modérateur" v-if="userStore.userInfo.identity.id == server.owner && !member.isBanned" :color="member.identity.isMod ? 'var(--text)' : 'var(--text-tertiary)'" @click="toggleMod(member)" icon="fa-solid fa-user-shield"/>
                </div>
                
                
            </div>
        </div>
    </div>
</template>
<script setup>
import Events from '@/utils/Events';
import { IORequest } from '@/utils/IORequest';
import { ref } from 'vue';
import User from '@/components/UI/User.vue';
import Role from '@/components/UI/Role.vue';
import IconAction from '@/components/UI/IconAction.vue';
import Tag from '@/components/UI/Tag.vue';
import { useUserStore } from '@/stores/userStore';

const users = ref(null)
const userStore = useUserStore();

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/USERS/LIST", (data) => {
        users.value = data;
    });
});

function toggleMod(member) {
    if(member.identity.id == userStore.userInfo.identity.id) return;
    IORequest("/OWNER/USERS/SWITCH_MOD", (response) => {
        console.log(response)
    }, member.identity.id);
}

function banUser(member) {
    if(member.identity.id == userStore.userInfo.identity.id) return;
    IORequest("/MOD/USERS/BAN", (response) => {
        console.log(response)
    }, member.identity.id);
}

</script>
<style scoped>

@media screen and (max-width: 768px),
       screen and (max-height: 607px) {
   
    .group {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 20px;
        
    }

    .user{
        padding: 5px 10px 5px 5px !important;
 
    }

   
}

.user{
    background-color: var(--tertiary);
    padding: 5px 10px 2px 5px;
    border-radius: 10px;
}

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

.users {
    margin: 10px 0;
    gap: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 25vh;

}

.user {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

.you {
    font-size: 0.8em;
    color: var(--text-secondary);
}

</style>