<!--
  - 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 {QrcodeStream, QrcodeCapture} from 'vue-qrcode-reader'

export default {
    components: {
        QrcodeStream,
        QrcodeCapture,
    },
    data() {
        return {
            showScanner: false,

            scanner: undefined,
            camera: {
                items: []
            },

            result: '',
            error: ''
        }
    },
    methods: {
        onDecode (result) {
            this.error = undefined;
            this.$emit('decoded', result);
        },

        async onInit (promise) {
            try {
                await promise
            } catch (error) {
                let message = 'Ein unbekannter Fehler ist aufgetreten...';

                if (error.name === 'NotAllowedError') {
                    message = "Es fehlen die Berechtigungen um auf die Kamera zuzugreifen..."
                } else if (error.name === 'NotFoundError') {
                    message = "Es ist keine Kamera verfügbar..."
                } else if (error.name === 'NotSupportedError') {
                    message = "Dieses Format wird nicht unterstützt..."
                } else if (error.name === 'NotReadableError') {
                    message = "Wird die Kamera bereits verwendet?"
                } else if (error.name === 'OverconstrainedError') {
                    message = "Die vorhandenen Kameras können nicht genutzt werden..."
                } else if (error.name === 'StreamApiNotSupportedError') {
                    message = "Die Stream-Api wird nicht unterstützt..."
                }

                this.error = message;

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

        handleOptionChanged() {
            this.error = undefined;

            this.$emit('failed', undefined);
        }
    }
}
</script>
<template>
    <div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" v-model="showScanner" :value="false" @change.prevent="handleOptionChanged">
            <label class="form-check-label" for="inlineRadio1">QR Upload</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" v-model="showScanner" :value="true" @change.prevent="handleOptionChanged">
            <label class="form-check-label" for="inlineRadio2">QR Scan</label>
        </div>

        <div class="mt-2 img-thumbnail" style="max-width: 300px;">
            <template v-if="showScanner">
                <qrcode-stream @decode="onDecode" @init="onInit" />
            </template>
            <template v-else>
                <qrcode-capture @decode="onDecode" @init="onInit" />
            </template>
        </div>

    </div>
</template>
