<template>
    <v-card :loading="loading" elevation="10" class="mx-auto" width="100%" height="420px" title="User Manager" subtitle="Controls creating, editing users.">
        <template v-slot:prepend>
        <v-avatar color="blue-darken-2" size="40">
            <v-icon size="large" icon="mdi-account-group"></v-icon>
        </v-avatar>
        </template>
        <template v-slot:append>
            <v-tooltip v-model="addTooltip" location="top">
                <template v-slot:activator="{ props }">
                    <v-avatar v-bind="props" :color="addTooltip ? 'green-darken-3' : 'green-darken-1'" size="20" @click="showNewUserDialog()">
                        <v-icon size="small" icon="mdi-plus" style="cursor: pointer"></v-icon>
                    </v-avatar>
                </template>
                <span>Add new user</span>
            </v-tooltip>
        
            <span class="pl-1"></span>
            <v-tooltip v-model="moreTooltip" location="top">
                <template v-slot:activator="{ props }">
                    <v-avatar v-bind="props" :color="moreTooltip ? 'grey-darken-3' : 'grey-darken-1'" size="20" @click="redirectToMore()">
                        <v-icon  size="small" icon="mdi-dots-horizontal" style="cursor: pointer"></v-icon>
                    </v-avatar>
                </template>
                <span>Show more</span>
            </v-tooltip>
        </template>
        <v-card-text class="pa-0 ma-0">
            <v-table>
                <thead>
                    <tr>
                        <th class="text-left" v-for="item in headers" :key="item.key">
                            {{ item.title }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in users" :key="item.ID">
                        <td class="text-left">{{ item.firstname }} {{ item.lastname }}</td>
                        <td class="text-left">{{ item.jobRole }}</td>
                        <td class="text-left"><v-chip :color="getColor(item.setupDone)" :text="getText(item.setupDone)" class="text-uppercase" labelsize="small"></v-chip></td>
                    </tr>
                </tbody>
            </v-table>
        </v-card-text>
    </v-card>
    <newUserDialog ref="newUserDialog" @load-users="loadUsers()"></newUserDialog>
</template>
<script scoped>
    import { defineAsyncComponent } from "vue";
    const newUserDialog = defineAsyncComponent(() => import("@/components/Modals/NewUser.vue"));
    export default {
        components: {
            newUserDialog,
        },
        data: () => ({
            loading:false,
            users:[],
            headers: [
                { key: 'name', title: 'Name' },
                { key: 'role', title: 'Role' },
                { key: 'setupDone', title: 'Setup Status'},
            ],

            addTooltip:false,
            moreTooltip:false,
        }),

        mounted() {
            this.loadUsers();
        },

        watch: {

        },

        methods: {

            redirectToMore() {
                window.location.href = '/users-manager';
            },

            showNewUserDialog(){
                this.$refs.newUserDialog.showDialog();
            },

            loadUsers() {
                this.loading = true;
                this.$root.axiosGet('/users-manager-load/amount/'+ 5).then(data => {
                    this.loading = false;
                    this.users = data.response.data.data;
                }); 
            },

            getColor(status) {
                if (status === 0 || status === 3) {
                    return 'yellow';
                }
                if(status === 1) {
                    return 'green';
                }
                if(status === 2) {
                    return 'red';
                }

                return 'grey'
            },

            getText(status) {
                if (status === 0) {
                    return 'INCOMPLETED';
                }
                if(status === 1) {
                    return 'COMPLETED';
                }
                if(status === 2) {
                    return 'PENDING DELETE';
                }
                if(status === 3) {
                    return 'PENDING UPDATE';
                }

                return 'UNKNOWN'
            },
        }
    }
</script>