class CallListController {
    constructor () {
        this.div = document.getElementById('callListDiv');
        this.transcriptionBGColorA = '#010101';
        this.transcriptionBGColorB = '#151515';
        this.calls = undefined;
        this.group = undefined;

    }

    updateHtml (calls, group) {
        this.calls = calls;
        this.group = group;
        let html = '<div><table cellpadding="5" style="border:solid lightgray 1px;min-width:100%;width:100%;">';
        html += '<tr><td>TGID</td><td style="font-weight: bold;">' + calls[0]['tg_id'] + '</td><td>' + calls.length + '&nbsp;calls</td><td></td><td>Tags</td><td style="font-weight: bold;">' + calls[0]['tg_tags'] + '</td></tr>'
        html += '<tr><td>Name</td><td colspan="2" style="font-weight: bold;">' + calls[0]['tg_name'] + '</td><td></td><td>System</td><td  style="font-weight: bold;">' + systemMatchMap[calls[0]['system']] + '</td></tr>';
        html += '</table>';
        html += '<br>&nbsp;<span id="showPlaylistOptionsButton" style="border:solid blue;" title="Show / Hide Playlist Options" onclick="clc.togglePlaylistOptions();">Playlist Options</span>'
        html += '<span id="playlistOptionsSpan" style="display:none"><br>&nbsp;&nbsp;';
        html += '<span id="playlistCheckAllButton" style="border:solid blue" onclick="clc.checkAllPlaylistCheckboxes();" title="Select all calls in the list">All</span>&nbsp;&nbsp;';
        html += '<span id="playlistCheckNoneButton" style="border:solid blue" onclick="clc.uncheckAllPlaylistCheckboxes();" title="De-select all calls in the list">None</span>&nbsp;&nbsp;';
        html += '<span id="playlistCreateButton" style="border:solid blue" onclick="clc.createPlaylistFromChecked();" title="Create a playlist with the selected calls">Create Playlist</span>&nbsp;&nbsp;';
        html += '<span id="playlistCreateButton" style="border:solid blue" onclick="clc.sendCheckedToPlaylistBuilder();" title="Create a playlist with the selected calls">Send to Playlist Builder</span>';
        html += '</span></div>';
        html += '<div style="height:' + parseInt(innerHeight * 0.60) + 'px;overflow-y: scroll;resize:vertical;"><table cellpadding="5">';
        html += '<tr style="border:solid lightgray 1px"><td></td><td>&nbsp;</td><td style="font-weight: bold;">Start</td><td style="font-weight: bold;">Dur</td><td style="font-weight: bold;">Talker</td><td style="font-weight: bold;">Transcription</td></tr>';

        for (let i=0; i<calls.length; i++) {
            let call = calls[i];
            let transcription = '[none]';
            if (call['transcription'] !== '') {
                transcription = call['transcription'];
            }

            let talkerColor = talkerIdPlusSystemToColor(call['talker_id'], call['system'], true);

            let borderString = 'border:none;';
            if (call['uuid'] === currentPlayingUuid) {
                borderString = 'border: solid #44ff44 1px;';
            }

            let thisRowBGColor = this.transcriptionBGColorA;
            if (i % 2 == 0) {
                thisRowBGColor = this.transcriptionBGColorB;
            }

            html += '<tr id="callListRow-' + call['uuid'] + '" style="background-color:' + thisRowBGColor +'">';
            html += '<td><span id="playlistCheckboxSpan-' + i + '" style="display:none"><input type="checkbox" id="playlistCheckbox-' + i + '" title="Check to select this call" checked></span></td>';
            html += '<td onclick="toggleBlockNone(\'callListDetail-' + call['uuid'] + '\').style.display=\'block\';" title="Click to expand/collapse call actions">&lt;&gt;</td>'
            html += '<td style="color: #999999" onclick="pbc.playCall(\'' + group + '\', ' + call['tg_id'] + ', \'' + call['uuid'] + '\')">' + call['nice_start'] + '</td>' ;
            html += '<td onclick="pbc.playCall(\'' + group + '\', ' + call['tg_id'] + ', \'' + call['uuid'] + '\')">' + call['precise_dur'].toFixed(1) + '</td>';
            html += '<td style="color: ' + talkerColor + '" onclick="pbc.playCall(\'' + group + '\', ' + call['tg_id'] + ', \'' + call['uuid'] + '\')">' + call['talker_id'] + '</td>';
            html += '<td style="font-weight: bold;color: ' + talkerColor + ';' + borderString + '" onclick="pbc.playCall(\'' + group + '\', ' + call['tg_id'] + ', \'' + call['uuid'] + '\')">' + transcription + '</td>';
            html += '</tr>';

            html += '<tr><td></td><td></td>';
            html += '<td><span id="callListDetail-' + call['uuid'] + '" style="display:none"><a download href="' + call['url'] + '" style="color:#ffffff;text-decoration:none;" title="Download this call\'s audio as MP3">💾</a><span></td>';
            html += '</tr>';
        }

        html += '</table></div>';
        this.div.innerHTML = html;
    }

    togglePlaylistOptions () {
        if (document.getElementById('playlistOptionsSpan').style.display == 'none') {
            this.showPlaylistCheckboxes();
            document.getElementById('playlistOptionsSpan').style.display = 'block';
        } else {
           this.hidePlaylistCheckboxes();
            document.getElementById('playlistOptionsSpan').style.display = 'none'; 
        }
    }

    showPlaylistCheckboxes () {
        for (let i=0; i<this.calls.length; i++) {
            document.getElementById('playlistCheckboxSpan-' + i).style.display = 'block';
        }
    }

    hidePlaylistCheckboxes () {
        for (let i=0; i<this.calls.length; i++) {
            document.getElementById('playlistCheckboxSpan-' + i).style.display = 'none';
        }
    }

    checkAllPlaylistCheckboxes () {
        for (let i=0; i<this.calls.length; i++) {
            document.getElementById('playlistCheckbox-' + i).checked = true;
        }
    }

    uncheckAllPlaylistCheckboxes () {
        for (let i=0; i<this.calls.length; i++) {
            document.getElementById('playlistCheckbox-' + i).checked = false;
        }
    }

    createPlaylistFromChecked () {
        let callsForPlaylist = []
        for (let i=0; i<this.calls.length; i++) {
            if (document.getElementById('playlistCheckbox-' + i).checked) {
                callsForPlaylist.push(this.calls[i]);
            }
        }
        submitPlaylist(callsForPlaylist);
    }

    sendCheckedToPlaylistBuilder () {
        let callsForPlaylist = []
        for (let i=0; i<this.calls.length; i++) {
            if (document.getElementById('playlistCheckbox-' + i).checked) {
                callsForPlaylist.push(this.calls[i]);
            }
        }
        plb.addCalls(callsForPlaylist);
        plb.show();
    }
}