<!--
  - 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 QrCodeGenerator from "@/components/qr-code/QrCodeGenerator";

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

            exportMessage: undefined,

            form: {
                exportType: 'text',
                exportString: undefined,
            }
        }
    },
    methods: {
        async exportKeys() {
            if (this.busy) return;

            this.busy = true;
            this.exportMessage = undefined;

            try {
                const data = await this.$security.exportContactKeys();

                this.form.exportString = JSON.stringify(data);
                this.exportMessage = {
                    isError: false,
                    data: 'Die Schlüssel konnten erfolgreich exportiert werden.'
                }
            } catch (e) {
                this.exportMessage = {
                    isError: true,
                    data: e.message
                }
            }

            this.busy = false;
        }
    }
}
</script>
<template>
    <div>
        <h6><i class="fa fa-file-export"></i> Export</h6>

        <div class="mb-1">
            <b-checkbox v-model="form.exportType" :value="'text'">
                Text
            </b-checkbox>
            <b-checkbox v-model="form.exportType" :value="'qr'">
                QR-Code
            </b-checkbox>
        </div>

        <button type="button" class="btn btn-primary btn-xs" @click.prevent="exportKeys">
            Exportieren
        </button>

        <hr />

        <template v-if="exportMessage">
            <div
                class="alert alert-sm"
                :class="{'alert-danger': exportMessage.isError, 'alert-success': !exportMessage.isError}"
            >
                {{ exportMessage.data }}
            </div>
        </template>

        <template v-if="form.exportString">
            <template v-if="form.exportType === 'text'">
                <div class="form-group">
                    <label>Inhalt</label>
                    <textarea rows="8" :value="form.exportString" :disabled="true" class="form-control"></textarea>
                </div>
            </template>
            <template v-else>
                <qr-code-generator :code="form.exportString" />
            </template>
        </template>
    </div>
</template>
