<!--
  - 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 {maxLength, minLength, required} from "vuelidate/lib/validators";
import {addUser} from "@/domains/user/api";
import {createAndSaveContactSelfKeyPair} from "@/domains/contact/encryption";

export default {
    components: {
        QrCodeScanner: () => process.server ? undefined : import('~/components/qr-code/QrCodeScanner')
    },
    data() {
        return {
            busy: false,
            code: '',
            form: {
                code: '',
                name: '',
                password: ''
            },
            error: undefined
        }
    },
    validations() {
        return {
            form: {
                name: {
                    required,
                    minLength: minLength(3),
                    maxLength: maxLength(100)
                },
                password: {
                    required,
                    minLength: minLength(3),
                    maxLength: maxLength(100)
                },
                code: {
                    required
                }
            }
        }
    },
    methods: {
        async submit() {
            if(this.busy) return;

            this.busy = true;

            try {
                const {code, name, password }  = this.form;
                const response = await addUser({name, password, code});

                await this.$store.dispatch('auth/triggerLogin', {name, password, provider: ''});

                if(typeof response.meta.contactId !== 'undefined') {
                    await createAndSaveContactSelfKeyPair(response.meta.contactId);
                }

                await this.$nuxt.$router.push(this.$nuxt.$router.history.current.query.redirect || '/');
            } catch (e) {
                this.error = e.message;
            }

            this.busy = false;
        },
        handleQrDecoded(qr) {
            this.form.code = qr;
        },
        handleQrFailed(message) {
            this.error = message;
        }
    },
    computed: {
        codeSpecified() {
            return this.form.code !== '';
        }
    }
}
</script>
<template>
    <div class="container">
        <h5 class="title">Registrieren</h5>

        <div class="alert alert-info alert-sm">
            Um sich registrieren zu können, <strong>musst</strong> du von einer anderen Person zu dieser App eingeladen werden. <br />
            Scanne dazu den QR-Code der Einladung oder trage den Code manuell ein.
        </div>

        <hr />

        <form @submit.prevent="submit">
            <b-tabs content-class="mt-3">
                <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="handleQrDecoded" @failed="handleQrFailed"></qr-code-scanner>
                    </client-only>

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

            <hr />

            <div class="form-group">
                <label for="name">Name</label>
                <input
                    id="name"
                    v-model="$v.form.name.$model"
                    class="form-control"
                    type="text"
                    placeholder="Benutzername"
                    required
                    autofocus
                >
            </div>
            <div v-if="!$v.form.name.required && !$v.form.name.$model" class="form-group-hint group-required">
                Bitte geben Sie einen Benutzernamen an.
            </div>
            <div v-if="!$v.form.name.minLength" class="form-group-hint group-required">
                Der Benutzername muss mindestens <strong>{{ $v.form.name.$params.minLength.min }}</strong> Zeichen lang sein.
            </div>
            <div v-if="!$v.form.name.maxLength" class="form-group-hint group-required">
                Der Benutzername darf maximal <strong>{{ $v.form.name.$params.maxLength.max }}</strong> Zeichen lang sein.
            </div>

            <div class="form-group">
                <label for="password">Passwort</label>
                <input
                    id="password"
                    v-model="$v.form.password.$model"
                    class="form-control"
                    type="password"
                    placeholder="Passwort"
                    required
                >
            </div>
            <div v-if="!$v.form.password.required && !$v.form.name.$model" class="form-group-hint group-required">
                Bitte geben Sie ein Passwort an.
            </div>
            <div v-if="!$v.form.password.minLength" class="form-group-hint group-required">
                Das Passwort muss mindestens <strong>{{ $v.form.name.$params.minLength.min }}</strong> Zeichen lang sein.
            </div>
            <div v-if="!$v.form.password.maxLength" class="form-group-hint group-required">
                Das Passwort darf maximal <strong>{{ $v.form.name.$params.maxLength.max }}</strong> Zeichen lang sein.
            </div>

            <div v-if="error" class="alert alert-sm alert-warning">
                {{error}}
            </div>

            <div class="form-group">
                <button class="btn btn-dark btn-xs" type="submit" @click="submit" :disabled="$v.form.$invalid">
                    <i class="fa fa-user-plus"></i> Registrieren
                </button>
            </div>
        </form>
    </div>
</template>
