{% extends '@Kiosk/layout.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}

{% block login_box_msg %}{{ 'kiosk.video.title'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style type="text/css">
        canvas.drawingBuffer { display: none; }
        video {
            width: 100%;
        }
    </style>
{% endblock %}

{% block kiosk_javascripts %}
    <script src="{{ asset('bundles/kiosk/quagga.min.js') }}"></script>
    <script type="text/javascript">
        {% if switch_camera %}
        if (navigator.mediaDevices?.enumerateDevices) {
            navigator.mediaDevices
            .enumerateDevices()
            .then((devices) => {
                let counter = 0;
                devices.forEach((device) => {
                    const dropdownMenu = document.getElementById('cameraChooserMenu');
                    if (device.kind === 'videoinput') {
                        let path = '{{ path('kiosk_cam_barcode_deviceId', {'deviceId': 'XXXX'}) }}'.replace(/XXXX/g, device.deviceId);
                        dropdownMenu.insertAdjacentHTML('beforeend', '<li><a class="dropdown-item" href="' + path + '">' + device.label + '</a></li>');
                        counter++
                    }
                });

                if (counter > 1) {
                    document.getElementById('cameraChooser').style.display = 'block';
                }
            })
            .catch((err) => {
                console.error(`${err.name}: ${err.message}`);
            });
        }
        {% endif %}

        const detectionHandler = function(data){
            Quagga.offDetected();
            document.querySelector('#barcode_login_form_type').value = data.codeResult.format;
            document.querySelector('#barcode_login_form_code').value = data.codeResult.code;
            document.querySelector('form[name=barcode_login_form]').submit();
        };
        Quagga.onDetected(detectionHandler);
        Quagga.init({
            frequency: 10,
            inputStream : {
                name : "Live",
                type : "LiveStream",
                target: document.querySelector('#kioskStream'),
                {% if deviceId != '' %}
                constraints: {
                    width: {min: 640},
                    height: {min: 480},
                    deviceId: "{{ deviceId }}",
                    aspectRatio: {min: 1, max: 2}
                },
                {% endif %}
            },
            decoder : {
                readers : ["{{ decoder|join('","')|raw }}"],
                multiple: false
            }
        }, function(err) {
            if (err) {
                document.getElementById('kioskStream').style.display = 'none';

                const errorElement = document.getElementById('kioskError');

                let errorMessage = '{{'kiosk.video.error' | trans }}';
                if (window.location.protocol !== 'http:') {
                    errorMessage += '<hr>Your page is running at HTTP, which does not support WebCam access. Please configure Kimai to run with HTTPS.';
                }
                errorMessage += '<hr>' + err;

                errorElement.innerHTML = errorElement.innerHTML.replace('__XXXXXXX__', errorMessage);
                errorElement.style.display = 'block';

                return;
            }
            Quagga.start();
        });
    </script>
{% endblock %}

{% block kiosk_content %}
    <div style="display:none">
        {{ form_start(form) }}
        {{ form_widget(form) }}
        {{ form_end(form) }}
    </div>
    <div id="kioskStream"></div>
    <div class="dropdown float-end" id="cameraChooser" style="display:none">
        <button class="btn btn-ghost-dark dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            {{ 'device_camera.change'|trans }}
        </button>
        <ul class="dropdown-menu" id="cameraChooserMenu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="{{ path('kiosk_cam_barcode') }}">{{ 'device_camera.default'|trans }}</a></li>
        </ul>
    </div>
    <div id="kioskError" style="display: none">
        {{ widgets.callout('danger', '__XXXXXXX__', 'kiosk.error'|trans) }}
    </div>
{% endblock %}