<!--
  - 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 EncryptionStatus from "@/components/security/EncryptionStatus";
import {dropContact} from "@/domains/contact/api";
import UserAvatar from "@/components/user/UserAvatar";

import {getters} from '@/modules/security/store'
import {getContactOtherUserId} from "@/domains/contact/utils";

export default {
    components: {UserAvatar, EncryptionStatus},
    props: {
        contact: Object
    },
    computed: {
        selfUserId() {
            return this.$store.getters['auth/userId'];
        },
        relatedUserId() {
            return getContactOtherUserId(this.contact, this.selfUserId);
        },
        selfUser() {
            return this.selfUserId === this.contact.userOneId ? this.contact.userOne : this.contact.userTwo;
        },
        relatedUser() {
            return this.relatedUserId === this.contact.userTwoId ? this.contact.userTwo : this.contact.userOne;
        },

        encryptedCommunication() {
            return getters.isContactEncrypted(this.contact.id);
        }
    },
    data() {
        return {
            busy: false
        }
    },
    methods: {
        manageEncryption() {
            this.$router.push('/contacts/'+this.contact.id+'/encryption');
        },
        async drop() {
            if(this.busy) return;

            this.busy = true;

            try {
                await dropContact(this.contact.id);
                this.$emit('deleted', this.contact.id);
            } catch (e) {
                this.$bvToast.toast(e.message);
            }

            this.busy = false;
        }
    }
}
</script>
<template>
    <b-media tag="li">
        <template #aside>
            <user-avatar :email="relatedUser.email" :size="40" :name="relatedUser.name" :online="true" />
        </template>
        <div class="d-flex flex-row">
            <div>
                <h5 class="mt-0 mb-1">
                    <nuxt-link :to="'/contacts/'+contact.id">
                        {{ relatedUser.name }}
                    </nuxt-link>
                </h5>
            </div>
            <div class="ml-auto">
                <small><timeago :datetime="contact.createdAt"/></small>
            </div>
        </div>
        <div class="mb-2 d-flex flex-row">
            <div>

            </div>
            <div class="ml-auto">
                <encryption-status
                    :to="'/contacts/'+contact.id"
                    :encrypted="encryptedCommunication"
                    :only-icon="true"
                    v-b-tooltip="encryptedCommunication ? 'Die zusätzliche Datenverschlüsselung zwischen dir und '+relatedUser.name+' ist aktiv.' : 'Die zusätzliche Datenverschlüsselung zwischen dir und '+relatedUser.name+' wurde noch nicht eingerichtet.'"
                    @clicked="manageEncryption"
                />
                <button class="btn btn-xs btn-danger" :disabled="busy" @click.prevent="drop">
                    <i class="fa fa-times"></i>
                </button>
            </div>

        </div>
    </b-media>
</template>
