<!--
  - 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 {getContact} from "@/domains/contact/api";
import {LayoutNavigationDefaultId} from "@/config/layout";
import ChatRoom from "@/components/chat/room/ChatRoom";

export default {
    components: {ChatRoom},
    meta: {
        requireLoggedIn: true,
        navigationId: LayoutNavigationDefaultId
    },
    async asyncData(context) {
        try {
            const contact = await getContact(context.params.id);

            return {
                contact
            }
        } catch (e) {
            await context.redirect('/');
        }
    },
    data() {
        return {
            contact: undefined,
            items: [],
            tabs: [
                { name: 'Allgemein', urlSuffix: '', icon: 'fa fa-info' },
                { name: 'Chat', urlSuffix: '/chat', icon: 'fa fa-comments' },
                { name: 'Verschlüsselung', urlSuffix: '/encryption', icon: 'fa fa-lock' }
            ]
        }
    },
    created() {
        this.resetBreadcrumb();
    },
    methods: {
        resetBreadcrumb() {
            this.items = [
                {text: 'Kontakte', href: '/contacts'},
                {
                    text: this.contact.userOneId === this.$store.getters['auth/userId'] ? this.contact.userTwo.name : this.contact.userOne.name,
                    href: '/contacts/'+this.contact.id
                }
            ]

            switch (this.$route.name) {
                case 'contacts-id-chat':
                    this.items.push({
                        text: 'Chat',
                        active: true
                    })
                    break;
                case 'contacts-id-encryption':
                    this.items.push({
                        text: 'Verschlüsselung',
                        active: true
                    })
                    break;
            }

        },
        handleUpdated(contact) {
            for(let key in contact) {
                if(!contact.hasOwnProperty(key)) continue;

                this.contact[key] = contact[key];
            }
        }
    }
}
</script>
<template>
    <div class="d-flex flex-column h-100 container">
        <b-breadcrumb :items="items"></b-breadcrumb>

        <div class="mb-3">
            <b-nav pills>
                <b-nav-item
                    v-for="(item,key) in tabs"
                    :key="key"
                    :disabled="item.active"
                    :to="'/contacts/' + contact.id + item.urlSuffix"
                    exact
                    exact-active-class="active"
                    @click.prevent="resetBreadcrumb"
                >
                    <i :class="item.icon" />
                    {{ item.name }}
                </b-nav-item>
            </b-nav>
        </div>

        <nuxt-child :contact="contact" @updated="handleUpdated" />
    </div>
</template>
