const callDetailsModalContentDiv = document.getElementById('callDetailsModalContent');
const callDetailsModalContainerDiv = document.getElementById('callDetailsModalContainer');
var callDetailsModalEnable = true;
var callDetailsModalFloatEnable = false;
var callDetailAbsolutePositionX = window.innerWidth * 0.35;
var callDetailAbsolutePositionY = window.innerHeight * 0.05;

function drawActivityBar (canvas, callList, earliest_start, latest_end, groupName, tgId, markPlayedCalls=true) {
    const bgColor = '#000000';

    var ctx = canvas.getContext('2d', {alpha: false});
    ctx.imageSmoothingEnabled = false;
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const timeScale = canvas.width / (latest_end - earliest_start);
    const invTimeScale = (latest_end - earliest_start) / canvas.width;


    for (var i=0; i<callList.length; i++) {
        ctx.fillStyle = talkerIdPlusSystemToColor(callList[i]['talker_id'], callList[i]['system']);
        let clipWidth = parseInt((callList[i]['end_time'] - callList[i]['start_time'])) * timeScale;
        if (clipWidth < 1) {clipWidth = 1;}
        ctx.fillRect(parseInt((callList[i]['start_time'] - earliest_start) * timeScale), 0, clipWidth, canvas.height);
        if (markPlayedCalls && callList[i]['played']) {
            ctx.fillStyle = '#444444';
            ctx.fillRect(parseInt((callList[i]['start_time'] - earliest_start) * timeScale), canvas.height / 2 - 4, parseInt((callList[i]['end_time'] - callList[i]['start_time'])) * timeScale, 8);
        }
    }

    canvas.addEventListener('mouseout', function () {
        callDetailsModalContainerDiv.style.display = 'none';
    });

    canvas.addEventListener("click", function (event) {
        const mousePos = getMousePos(canvas, event);
        const timePos = parseInt(earliest_start + (mousePos.x * invTimeScale));

        // find the matching call

        var matchingCall = undefined;
        for (var i=0; i<callList.length; i++) {
            if (callList[i]['start_time'] <= timePos && callList[i]['end_time'] >= timePos) {
                matchingCall = callList[i];
                break;
            }
        }

        if (matchingCall) {
            clc.updateHtml(abc.filteredCalls[groupName][tgId]);
            pbc.playCall(groupName, tgId, matchingCall['uuid'])
        }

    });

     
    canvas.addEventListener('mousemove', function (event) {
            if (callDetailsModalEnable) {
                const mousePos = getMousePos(canvas, event);
                const timePos = parseInt(earliest_start + (mousePos.x * invTimeScale));

                callDetailAbsolutePositionX = window.innerWidth * 0.35;
                callDetailAbsolutePositionY = window.innerHeight * 0.05;
                
                // find the matching call

                var matchingCall = undefined;
                for (var i=0; i<callList.length; i++) {
                    if (callList[i]['start_time'] <= timePos && callList[i]['end_time'] >= timePos) {
                        matchingCall = callList[i];
                        break;
                    }
                }
                if (matchingCall) {
                    if (!callDetailsModalFloatEnable) {
                        callDetailsModalContainerDiv.style.top = callDetailAbsolutePositionY + 'px';
                        callDetailsModalContainerDiv.style.left = callDetailAbsolutePositionX + 'px';
                    } else {
                        callDetailsModalContainerDiv.style.top = (event.clientY + 20) + 'px';
                        callDetailsModalContainerDiv.style.left = event.clientX + 'px';
                    }

                    var html = '';
                    html += '<span style="font-size:1em;font-weight:bold;">Call Details</span><br><br>';
                    html += '<table cellpadding="5" style="font-size:0.8em">';
                    html += '<tr><td>Talker:</td><td>' + matchingCall['talker_id'] + '</td></tr>';
                    html += '<tr><td>Talkgroup ID:</td><td>' + matchingCall['tg_id'] + '</td></tr>';
                    html += '<tr><td>Talkgroup Name:</td><td>' + matchingCall['tg_name'] + '</td></tr>';
                    html += '<tr><td>Talkgroup Tags:</td><td>' + matchingCall['tg_tags'] + '</td></tr>';
                    html += '<tr><td>Span:</td><td>' + matchingCall['nice_start'] + ' to ' + matchingCall['nice_end'] + '</td></tr>';
                    html += '<tr><td>Transcription:</td><td>' + matchingCall['transcription'] + '</td></tr>';
                    html += '</table>';

                    callDetailsModalContentDiv.innerHTML = html;

                    callDetailsModalContainerDiv.style.display = 'block';
                } else {
                    callDetailsModalContainerDiv.style.display = 'none';
                }
            }
        }

     
    )
}

function getMousePos (canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    }
}