<html data-bs-theme="dark">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://unpkg.com/pcm-player"></script>
</head>

<body>
    <nav class="navbar navbar-dark bg-primary">
        <div class="container">
            <span class="navbar-brand mb-0 h1">Bumble ASHA Sink</span>
        </div>
    </nav>
    <br>

    <div class="container">

        <div class="row">
            <div class="col-auto">
                <button id="connect-audio" class="btn btn-danger" onclick="connectAudio()">Connect Audio</button>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-4">
                <label class="form-label">Browser Gain</label>
                <input type="range" class="form-range" id="browser-gain" min="0" max="2" value="1" step="0.1"
                    onchange="setGain()">
            </div>
        </div>

        <hr>

        <div id="socketStateContainer" class="bg-body-tertiary p-3 rounded-2">
            <h3>Log</h3>
            <code id="log" style="white-space: pre-line;"></code>
        </div>
    </div>


    <script>
        let atResponseInput = document.getElementById("at_response")
        let gainInput = document.getElementById('browser-gain')
        let log = document.getElementById("log")
        let socket = new WebSocket('ws://localhost:8888');
        let sampleRate = 0;
        let player;

        socket.binaryType = "arraybuffer";
        socket.onopen = _ => {
            log.textContent += 'SOCKET OPEN\n'
        }
        socket.onclose = _ => {
            log.textContent += 'SOCKET CLOSED\n'
        }
        socket.onerror = (error) => {
            log.textContent += 'SOCKET ERROR\n'
            console.log(`ERROR: ${error}`)
        }
        socket.onmessage = function (message) {
            if (typeof message.data === 'string' || message.data instanceof String) {
                log.textContent += `<-- ${event.data}\n`
            } else {
                // BINARY audio data.
                if (player == null) return;
                player.feed(message.data);
            }
        };

        function connectAudio() {
            player = new PCMPlayer({
                inputCodec: 'Int16',
                channels: 1,
                sampleRate: 16000,
                flushTime: 20,
            });
            player.volume(gainInput.value);
            const button = document.getElementById("connect-audio")
            button.disabled = true;
            button.textContent = "Audio Connected";
        }

        function setGain() {
            if (player != null) {
                player.volume(gainInput.value);
            }
        }
    </script>
    </div>
</body>

</html>