<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}" />
    <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
    <title>Testform</title>
    <link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
</head>

<body>
    <div class="container">
    <h2>Gib Feedback als Video</h2>
    <div class="centertext">

        <button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
            <img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}" alt="Camera Icon">
        </button>

    </div>
    <div class="spacer" aria-hidden="true" style="height:30px"></div>
    <div class="centertext">

        <button type="button" class="videocontrols" id="buttonRecord" style="display:none" onclick="recordButton()">
            <img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}" alt="Camera Icon">
        </button>

        <button type="button" class="videocontrols" id="buttonDelete" style="display:none" disabled
            onclick="deleteButton()">
            <img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}" alt="Delete Icon"
                class="buttondisable">
        </button>

    </div>
    <div class="spacer" aria-hidden="true" style="height:15px"></div>
    <div class="centertext">
        <video autoplay muted playsinline id="videoDisplay"></video>
    </div>
    <script>
        const buttonCamera = document.getElementById('buttonCamera');
        const buttonRecord = document.getElementById('buttonRecord');
        const buttonDelete = document.getElementById('buttonDelete');
        const videoDisplay = document.getElementById('videoDisplay');
        const buttonCameraIcon = document.getElementById('buttonCameraIcon');
        const buttonRecordIcon = document.getElementById('buttonRecordIcon');
        //const buttonDeleteIcon = document.getElementById('buttonDeleteIcon');
        var mediaRecorder = null;
        var stream = null;
        let recordedVideoBlob = null;
        let isRecording = false;
        let videoAccess = false;

        async function cameraButton() {
            if (!videoAccess) { //test what happens if user doesnt give the permission
                console.log("cameraButton case videoAccess = false");
                // maybe a try catch block?
                try {
                    stream = await navigator.mediaDevices.getUserMedia({
                        video: true,
                    });
                } catch (error) {
                    //TODO when this occurs the user should get a hint to reload the page or to allow it next to the url
                    newerror = error
                    console.log("Error: ", error);
                    return
                }
                console.log("stream is active");
                videoAccess = true

                videoDisplay.srcObject = stream

                buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-off-icon.png') }}"; //todo, not sure if this works
                buttonCameraIcon.alt = "Camera-off Icon";
                buttonRecord.style.display = 'inline-block';
                buttonDelete.style.display = 'inline-block';
                videoDisplay.style.display = 'inline-block';

                mediaRecorder = new MediaRecorder(stream, {
                    mimeType: "video/webm", //could use other video format: https://www.iana.org/assignments/media-types/media-types.xhtml#video
                    // I probably want to change the bitrate: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
                });

            } else {
                console.log("cameraButton case videoAccess = true");

                stream = null;
                videoAccess = false

                buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-icon.png') }}"; //todo, not sure if this works
                buttonCameraIcon.alt = "Camera Icon";
                buttonRecord.style.display = 'none';
                buttonDelete.style.display = 'none';
                videoDisplay.style.display = 'none';
            }
            console.log("camera button function ends");
        }

        mediaRecorder.addEventListener("dataavailable", (event) => {
            videoRecorded.src = URL.createObjectURL(event.data);
            recordedVideoBlob = event.data;
        });

        function recordButton() {
            console.log("recordButton pressed");
            if (!isRecording) {
                console.log("recordButton pressed case isRecording = false");
                deleteButton();
                buttonDelete.setAttribute("disabled", "");
                buttonDeleteIcon.classList.add("buttondisable");

                mediaRecorder.start();

                buttonRecordIcon.src = "{{ url_for('static', filename='icons/stop-icon.png') }}";
                buttonRecordIcon.alt = 'record icon';
                isRecording = true;
                console.log('Recording started');

            } else {
                console.log("recordButton pressed case isRecording = true");
                mediaRecorder.stop();

                buttonRecordIcon.src = "{{ url_for('static', filename='icons/record-icon.png') }}";
                buttonRecordIcon.alt = 'Stop Icon';
                isRecording = false;
                console.log('Recording stopped');

                buttonDelete.removeAttribute("disabled");
                buttonDeleteIcon.classList.remove("buttondisable");
            }
        }
        function deleteButton() {
            //todo delete data

            buttonDelete.setAttribute("disabled", "");
            buttonDeleteIcon.classList.add("buttondisable");
        }
    </script>
</div>
</body>

</html>