<!--
  - 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 {addContact} from "@/domains/contact/api";
import {required} from "vuelidate/lib/validators";
import {addContactData} from "@/domains/contact-data/api";
import {createAndSaveContactSelfKeyPair} from "@/domains/contact/encryption";

export default {
    components: {
        QrCodeScanner: () => process.server ? undefined : import('~/components/qr-code/QrCodeScanner')
    },
    data() {
        return {
            busy: false,

            form: {
                code: ''
            },

            message: undefined
        }
    },
    validations: {
        form: {
            code: {
                required
            }
        }
    },
    methods: {
        async accept() {
            if(this.busy) return;

            this.message = undefined;
            this.busy = true;

            try {
                const contact = await addContact({
                    code: this.form.code
                });

                await createAndSaveContactSelfKeyPair(contact.id);

                this.$emit('created', contact);
            } catch (e) {
                this.message = {
                    isError: true,
                    data: e.message
                }

                this.$emit('failed', e.message);
            }

            this.busy = false;
        },

        handleDecoded(code) {
            this.form.code = code;
        },
        handleFailed(message) {
            if(typeof message === 'undefined') {
                this.message = undefined;
            } else {
                this.message =  {
                    isError: true,
                    data: message
                };
            }
        }
    }
}
</script>
<template>
    <div>
        <b-tabs content-class="mt-3" class="mb-2">
            <b-tab title="Code" active>
                <div class="form-group">
                    <label>Code</label>
                    <input type="text" class="form-control" v-model="$v.form.code.$model" placeholder="Code..." />
                </div>

                <div v-if="!$v.form.code.required && !$v.form.code.$model" class="form-group-hint group-required">
                    Bitte geben Sie einen Code an.
                </div>
            </b-tab>
            <b-tab title="Qr-Code">
                <client-only>
                    <qr-code-scanner class="mb-2" @decoded="handleDecoded" @failed="handleFailed"></qr-code-scanner>
                </client-only>

                <p class="text-break"><strong>Code</strong> {{ form.code }}</p>
            </b-tab>
        </b-tabs>

        <div v-if="message" class="alert alert-sm alert-warning">
            {{message.data}}
        </div>

        <div>
            <button :disabled="$v.form.$invalid" type="button" class="btn btn-primary btn-xs" @click.prevent="accept">
                Annehmen
            </button>
        </div>
    </div>
</template>
