{% extends "base.html" %}
{% load static %}

{% block additional_css %}
    <link rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
    <link rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css">
{% endblock %}

{% block title %}Smartphone Scanner{% endblock %}

{% block content %}
    <div class="container" >

        <div class="row-mb8" id="video-button-content">
            <a class="button" id="startButton">Start</a>
            <a class="button-outline" id="resetButton">Reset</a>
        </div>
        <div class="row" id="video-content">
            <div class="col-6">
                <video id="video" width="450" height="320" style="border: 1px solid gray"></video>
            </div>

            <div class="col-2" id="sourceSelectPanel" style="display:none">
                <label for="sourceSelect">Change video source:</label>
                <select id="sourceSelect" style="max-width:400px">
                </select>
            </div>

            <div class="col-2">
                <label>Result:</label>
                <pre><code id="result"></code></pre>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
    <script type="text/javascript">
        function beep() {
            var audio = new Audio("{% static 'sound/beep.mp3' %}");
            audio.volume = 0.1
            console.log("Audio play {% static 'sound/beep.mp3' %}")
            audio.play();
        }

        window.addEventListener('load', function () {
            let selectedDeviceId;
            let lastScanResult = '';
            // const codeReader = new ZXing.BrowserBarcodeReader()
            const codeReader = new ZXing.BrowserMultiFormatReader()
            console.log('ZXing code reader initialized')
            codeReader.getVideoInputDevices()
                .then((videoInputDevices) => {
                    const sourceSelect = document.getElementById('sourceSelect')
                    selectedDeviceId = videoInputDevices[0].deviceId
                    if (videoInputDevices.length > 1) {
                        videoInputDevices.forEach((element) => {
                            const sourceOption = document.createElement('option')
                            sourceOption.text = element.label
                            sourceOption.value = element.deviceId
                            sourceSelect.appendChild(sourceOption)
                        })

                        sourceSelect.onchange = () => {
                            selectedDeviceId = sourceSelect.value;
                        }

                        const sourceSelectPanel = document.getElementById('sourceSelectPanel')
                        sourceSelectPanel.style.display = 'block'
                    }

                    document.getElementById('startButton').addEventListener('click', () => {
                        beep()
                        codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result) => {
                            if (result && lastScanResult !== result.text) {
                                lastScanResult = result.text
                                console.log('Got scan (cont.): ' + result)
                                document.getElementById('result').textContent = result.text
                                beep()
                                useScannedText(result.text)
                            } else if (result) {
                                console.log('... scan again')
                            }
                        });

                        /*
                        codeReader.decodeOnceFromVideoDevice(selectedDeviceId, 'video').then((result) => {
                            if (lastScanResult !== result.text) {
                                lastScanResult = result.text
                                console.log('Got scan: ' + result.text)
                                document.getElementById('result').textContent = result.text
                                useScannedText(result.text)
                            } else {
                                console.log('... scan again')
                            }
                        }).catch((err) => {
                            console.error(err)
                            document.getElementById('result').textContent = err
                        })
                        */
                        console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
                    })

                    document.getElementById('resetButton').addEventListener('click', () => {
                        document.getElementById('result').textContent = '';
                        codeReader.reset();
                        console.log('Reset.')
                    })

                })
                .catch((err) => {
                    console.error(err)
                })
        })
    </script>

<hr />
<div class="row mb-3">
    <div class="col-8">
        <div class="input-group">
            <input class="form-control" type="text" maxlength="40" id="container_id" placeholder="Container ID">
            <input class="form-control" type="text" maxlength="40" id="asset_id" placeholder="Asset ID">
        </div>
    </div>
    <div class="col-2">
        <div class="input-group">
            <input class="btn btn-primary" id="book-in-button" type="button" value="+Book">
            <input class="btn btn-primary" id="book-out-button" type="button" value="-Book">
        </div>
    </div>
    <div class="col-8">
        <div class="input-group">
            <textarea class="form-control" readonly="readonly" rows="4" id="container_details"></textarea>
            <textarea class="form-control" readonly="readonly" rows="4" id="asset_details"></textarea>
        </div>
    </div>
</div>
<div class="row">
    <div class="input-group">
        <textarea class="form-control mb-2" id="chat-log" cols="100" rows="10"></textarea>
        <input class="btn btn-secondary" id="clear-chat-area" type="button" value="Clear">
    </div>
</div>
<script>
    var containerIsValid = false;
    var assetIsValid = false;

    async function getContainerInfo(containerId) {
        document.querySelector('#container_id').value = containerId;
        url = '/api/containers?named_id=' + containerId;
        document.querySelector('#container_details').value = 'Trying ' + url;
        const response = await fetch(url);
        const container = await response.json();
        if (container.count >= 1) {
            document.querySelector('#container_details').value = container.results[0].description;
            containerIsValid = true;
        } else {
            document.querySelector('#container_details').value = document.querySelector('#container_details').value + "\nERROR: No result\n";
            console.log(response);
            containerIsValid = false;
        }
    }

    async function getAssetInfo(assetId) {
        document.querySelector('#asset_id').value = assetId;
        url = '/api/assets?named_id=' + assetId;
        document.querySelector('#asset_details').value = 'Trying ' + url;
        const response = await fetch(url);
        const asset = await response.json();
        if (asset.count >= 1) {
            document.querySelector('#asset_details').value = asset.results[0].description;
            assetIsValid = true;
        } else {
            document.querySelector('#asset_details').value = document.querySelector('#asset_details').value + "\nERROR: No result\n";
            console.log(response);
            assetIsValid = false;
        }
    }

    function useScannedText(msg) {
        // const data = JSON.parse(e.data);
        // msg = String(data.message);
        document.querySelector('#chat-log').value += (msg + '\n');
        if (msg.startsWith('C-')) {
            getContainerInfo(data.message);
            // document.querySelector('#container_id').value = msg;
        } else if (msg.startsWith('A-')) {
            getAssetInfo(data.message);
            // document.querySelector('#asset_id').value = msg;
        } else {
            assetId = 'A-' + msg;
            document.querySelector('#asset_id').value = assetId;
            getAssetInfo(assetId);
        }
    };

    document.querySelector('#clear-chat-area').onclick = function(e) {
        document.querySelector('#chat-log').value = "cleared\n";
    }

    document.querySelector('#book-in-button').onclick = function(e) {
        if (!containerIsValid) {
            msg = 'Cannot book-in as container is invalid';
            console.log(msg);
            document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
            return;
        }
        if (!assetIsValid) {
            msg = 'Cannot book-in as asset is invalid';
            console.log(msg);
            document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
            return;
        }
    }

    document.querySelector('#book-out-button').onclick = function(e) {
        if (!containerIsValid) {
            msg = 'Cannot book-out as container is invalid';
            console.log(msg);
            document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
            return;
        }
        if (!assetIsValid) {
            msg = 'Cannot book-out as asset is invalid';
            console.log(msg);
            document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
            return;
        }
    }

</script>


{% endblock %}
