<!--
  - 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 {ChatRoomType} from "@/domains/chat-room/utils";
import UserAvatar from "@/components/user/UserAvatar";
import {dropRoom} from "@/domains/chat-room/api";

export default {
    components: {
        UserAvatar
    },
    props: {
        room: Object
    },
    data() {
        return {
            busy: false
        }
    },
    methods: {
        async drop() {
            if(this.busy) return;

            this.busy = true;

            try {
                 let room = await dropRoom(this.room.id);
                 room.id = this.room.id;

                 this.$emit('deleted', room);
            } catch (e) {
                console.log(e);
            }

            this.busy = false;
        }
    },
    computed: {
        userId() {
            return this.$store.getters['auth/userId'];
        },

        isContactType() {
            return this.room.type === ChatRoomType.PRIVATE;
        },
        isGroupType() {
            return this.room.type === ChatRoomType.GROUP;
        },
        isChannelType() {
            return this.room.type === ChatRoomType.CHANNEL;
        },

        relatedMember() {
            return typeof this.room.members !== 'undefined' && this.room.members.filter(member => member.userId !== this.userId).pop();
        },
        name() {
            if(this.isChannelType || this.isGroupType) {
                return this.room.name;
            }

            const member = this.relatedMember;

            if(typeof member === 'undefined') {
                return 'Unbekannter Kontakt';
            }

            return member.user.name;
        },
        link() {
            if(this.isContactType) {
                return '/chat/rooms/private/'+this.room.id;
            }

            if(this.isGroupType) {
                return '/chat/rooms/group/'+this.room.id;
            }

            if(this.isChannelType) {
                return '/chat/rooms/channel/'+this.room.id;
            }
        }
    }
}
</script>
<template>
    <div class="list-item">
        <div class="list-content align-items-center">
            <div class="chat-room-list-icon">
                <template v-if="isContactType">
                    <user-avatar :size="40" :avatar="relatedMember.user.avatar" :name="relatedMember.user.name" :email="relatedMember.user.email" />
                </template>
                <template v-else>
                    <user-avatar :name="name" />
                </template>
            </div>
            <div class="chat-room-list-body">
                <h5 class="mb-0">{{ name }}</h5>
            </div>
            <div class="ml-auto">
                <nuxt-link :to="link" class="btn btn-xs btn-primary" v-b-tooltip="'Betreten'">
                    <i class="fa fa-arrow-right"></i>
                </nuxt-link>

                <b-dropdown class="dropdown-xs" :no-caret="true">
                    <template #button-content>
                        <i class="fa fa-bars"></i>
                    </template>
                    <b-dropdown-item href="#"><i class="fa fa-info pl-1 pr-1"></i> Info</b-dropdown-item>
                    <b-dropdown-item href="#"><i class="fa fa-cog"></i> Einstellungen</b-dropdown-item>
                    <b-dropdown-divider />
                    <b-dropdown-item @click.prevent="drop"><i class="fa fa-door-open"></i> Verlassen</b-dropdown-item>
                </b-dropdown>
            </div>
        </div>
        <div class="list-footer">
            <div class="ml-auto">
                <small><timeago :datetime="room.createdAt" /> erstellt</small>
            </div>
        </div>
    </div>
</template>
