<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script>
import UserAvatar from "@/components/user/UserAvatar";
export default {
    components: {UserAvatar},
    props: {
        users: {
            type: Array,
            default: []
        },
        userMap: Object,
        client: Object,
        infoLong: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {

        }
    },
    computed: {
        user() {
            const index = this.users.filter(user => user.id === this.client.id);
            return index.length !== 1 ? undefined : index[0];
            //return this.userMap[this.client.id] ?? undefined;
        },
        email() {
            let email = 'admin@example.com';

            if(typeof this.user !== 'undefined' && this.user.email) {
                email = this.user.email;
            }

            return email;
        },
        name() {
            let name = 'Unknown';

            switch (this.client.type) {
                case 'guest':
                    return 'guest #' + this.client.id;
                case 'user':
                    if(typeof this.user === 'undefined') {
                        return 'user #' + this.client.id;
                    } else {
                        return this.user.name;
                    }
            }

            return name;
        }
    }
}
</script>
<template>
    <div>
        <div class="media align-items-center justify-content-center">
            <a href="javascript:void(0)" :id="'online-client-'+client.id">
                <user-avatar :name="name" :size="30" :email="email" />
            </a>
            <b-popover :target="'online-client-'+client.id" triggers="hover">
                <h5 class="mb-0">
                    <nuxt-link v-if="user" :to="'/users/'+user.name">
                        {{name}}
                    </nuxt-link>
                    <template v-else>
                        {{name}}
                    </template>
                </h5>
                <small class="text-muted">
                    <timeago :datetime="client.meta.firstSeen" :auto-update="60"/> verbunden
                </small>
            </b-popover>

            <div v-if="infoLong" class="media-body ml-2">
                <h6 class="mt-1 mb-0">{{name}}</h6>
                <small class="text-muted mt-0 mb-3">
                    <timeago :datetime="client.meta.firstSeen" :auto-update="60"/>
                </small>
            </div>
        </div>
    </div>
</template>
