<!--
  - 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 ChatEncryptionStatus from "@/components/security/EncryptionStatus";

import {getters} from '@/modules/security/store';
import {addContactData} from "@/domains/contact-data/api";
import {createAndSaveContactSelfKeyPair, shareContactSelfKey} from "@/domains/contact/encryption";

export default {
    components: {ChatEncryptionStatus},
    props: {
        contactProperty: Object
    },
    data() {
        return {
            error: undefined,

            busy: false,
        }
    },
    computed: {
        userId() {
            return this.$store.getters["auth/userId"];
        },
        encryptionEnabled() {
            return getters.isContactEncrypted(this.contactProperty.id);
        },

        selfKey() {
            const keyPair = getters.contactSelfKeyPair(this.contactProperty.id);
            if(typeof keyPair !== 'undefined') {
                return keyPair.publicKey;
            }

            return undefined;
        },

        relatedKey() {
            return getters.contactRelatedKey(this.contactProperty.id);
        }
    },
    methods: {
        async createSelfKeyPair() {
            if (this.busy) return;

            this.busy = true;

            try {
                await createAndSaveContactSelfKeyPair(this.contactProperty.id);
            } catch (e) {
                this.error = e.message;
            }

            this.busy = false;
        },
        async shareSelfKey() {
            if (this.busy) return;

            this.busy = true;

            try {
                await shareContactSelfKey(this.contactProperty.id);
            } catch (e) {
                this.error = e.message;
            }

            this.busy = false;
        }
    }
}
</script>
<template>
    <div>
        <div class="mb-4">
            <h6 class="mb-2">Status</h6>

            <chat-encryption-status :encrypted="encryptionEnabled" />
        </div>
        <div v-if="error" class="alert alert-warning alert-sm mt-2">
            {{error}}
        </div>

        <div class="row">
            <div class="col">
                <h6>&bull; <span class="text-primary">Mein</span> Schlüsselpaar
                    <template v-if="selfKey">
                        <span class="sub-title text-success"><i class="fa fa-check"></i></span>
                    </template>
                    <template v-else>
                        <span class="sub-title text-danger"><i class="fa fa-exclamation-circle"></i></span>
                    </template>
                </h6>
                <p>
                    Damit du mit deinem Kontakt sicher Nachrichteninhalte übermitteln kannst, benötigt dein Kontakt <strong class="text-primary">deinen öffentlichen Schlüssel</strong>
                    um mithilfe <strong class="text-info">seines privaten Schlüssel's</strong> einen neuen Schlüssel zu erzeugen, mit dem eure Nachrichten verschlüsselt und entschlüsselt werden
                    können.
                </p>

                <div class="alert alert-warning alert-sm">
                    <p>
                        <template v-if="selfKey">
                            Es wurde bereits ein Keypaar generiert. Wenn das eigene Schlüsselpaar für den Kontakt neu generiert wird,
                            können keine vorherigen Nachrichten, die verschlüsselt wurden, gelesen werden.
                        </template>
                        <template v-else>
                            Du musst einen privaten und öffentlichen Schlüssel generieren und mit deinem Kontakt teilen.
                        </template>
                    </p>

                    <button class="btn btn-xs" :class="{'btn-success': !selfKey, 'btn-danger': selfKey}" type="button" :disabled="busy" @click.prevent="createSelfKeyPair">
                        <i class="fa fa-key"></i> Schlüssel generieren
                    </button>

                    <button v-if="selfKey" class="btn btn-primary btn-xs" @click.prevent="shareSelfKey" :disabled="busy">
                        <i class="fa fa-share"></i> Schlüssel teilen
                    </button>
                </div>
            </div>
            <div class="col">
                <h6>&bull; Schlüssel von <span class="text-info">Kontakt</span>
                    <template v-if="relatedKey">
                        <span class="sub-title text-success"><i class="fa fa-check"></i></span>
                    </template>
                    <template v-else>
                        <span class="sub-title text-danger"><i class="fa fa-exclamation-circle"></i></span>
                    </template>
                </h6>
                <p>
                    Genauso wie dein Kontakt deinen öffentlichen Schlüsel braucht, benötigst du den <strong class="text-info">seinen öffentlichen Schlüssel</strong> um
                    mithilfe <strong class="text-primary">deines privaten Schlüssel</strong> einen neuen Schlüssel zu erzeugen, mit dem eure Nachrichten verschlüsselt und entschlüsselt werden
                    können.
                </p>
                <div v-if="!relatedKey" class="alert alert-warning alert-sm">
                    Dein Kontakt hat noch kein Schlüsselpaar generiert oder den öffentlichen Schküssel noch nicht mit dir geteilt.
                    Setze Ihn persönlich oder per Nachricht darüber in Kenntnis.
                </div>
            </div>
        </div>
    </div>
</template>
