class PlaylistBuilderController {
    constructor () {
        this.div = document.createElement('div');
        this.div.className = 'modal';
        this.contentDiv = document.createElement('div');
        this.contentDiv.className = 'modal-content';
        document.body.appendChild(this.div);
        this.div.appendChild(this.contentDiv);

        this.callList = [];

        this.updateHtml();
    }

    updateHtml () {
        var html = '<span style="border:solid blue;margin-left:90%" onclick="plb.hide();">&nbsp;Close&nbsp;</span><br><br>';
        html += '<span style="font-weight:bold; font-size:1.3em">Playlist Builder</span><br><br><audio id="playlistBuilderAudioPlayer" controls></audio><br><br>';
        //console.log(this.callList.length);
        if (this.callList.length == 0) {
            
            html += '<span style="font-weight:bold; font-size:1.1em">No calls have been added. Go add some!</span>';
        } else {
            html += '<span style="font-weight:bolder;border:solid blue" onclick="plb.selectAll();">&nbsp;Select All&nbsp;</span>&nbsp;&nbsp;';
            html += '<span style="font-weight:bolder;border:solid blue" onclick="plb.selectNone();">&nbsp;Select None&nbsp;</span>&nbsp;&nbsp;';
            html += '<span style="font-weight:bolder;border:solid blue" onclick="plb.createPlaylistFromSelections();">&nbsp;Create Playlist&nbsp;</span><br><br>';
            html += '<table cellpadding="5">';
            html += '<tr style="font-weight:bold;"><td></td><td>Start</td><td>Dur</td><td>Talkgroup</td><td>Talker</td><td>Transcription</td></tr>';
            for (let i=0; i<this.callList.length; i++) {
                html += '<tr>';
                html += '<td><input type="checkbox" id="playlistBuilderItemCheckbox-' + i + '" title="Check to include this call in the playlist" checked></td>';
                html += '<td onclick="plb.playIdx(' + i + ')">' + pdate(this.callList[i]['start_time']) + '</td>';
                html += '<td onclick="plb.playIdx(' + i + ')">' + this.callList[i]['precise_dur'].toFixed(1) + '</td>';
                html += '<td onclick="plb.playIdx(' + i + ')">' + this.callList[i]['tg_name'] + '</td>';
                html += '<td onclick="plb.playIdx(' + i + ')" style="color:' + talkerIdPlusSystemToColor(this.callList[i]['talker_id'], this.callList[i]['system'], true) + '">' + this.callList[i]['talker_id'] + '</td>';
                html += '<td onclick="plb.playIdx(' + i + ')" style="color:' + talkerIdPlusSystemToColor(this.callList[i]['talker_id'], this.callList[i]['system'], true) + '">' + this.callList[i]['transcription'] + '</td>';
                html += '</tr>';
            }

            html += '</table>';
        }
        //html += '<audio id="playlistBuilderAudioPlayer"></audio>';
        this.contentDiv.innerHTML = html;
    }

    createPlaylistFromSelections () {
        let selectedCalls = [];
        for (let i=0; i<this.callList.length; i++) {
            if (document.getElementById('playlistBuilderItemCheckbox-' + i).checked) {
                selectedCalls.push(this.callList[i]);
            }
        }
        submitPlaylist(selectedCalls);
    }

    selectAll () {
        for (let i=0; i<this.callList.length; i++) {
            document.getElementById('playlistBuilderItemCheckbox-' + i).checked = true;
        }
    }

    selectNone () {
        for (let i=0; i<this.callList.length; i++) {
            document.getElementById('playlistBuilderItemCheckbox-' + i).checked = false;
        }
    }

    removeDuplicates () {
        let seen_uuids = [];
        let newCallList = [];
        for (let i=0; i<this.callList.length; i++) {
            if (seen_uuids.includes(this.callList[i]['uuid'])) {
                // skip it
            } else {
                newCallList.push(this.callList[i]);
                seen_uuids.push(this.callList[i]['uuid']);
            }
        }
        this.callList = newCallList;
    }

    playIdx (index) {
        document.getElementById('playlistBuilderAudioPlayer').src = this.callList[index]['url'];
        document.getElementById('playlistBuilderAudioPlayer').play();
    }

    show () {
        this.updateHtml();
        this.div.style.display = 'block';
    }

    hide () {
        this.div.style.display = 'none';
    }

    addCalls (newCalls) {
        this.callList = this.callList.concat(newCalls);
        this.sortCalls();
        this.removeDuplicates();
        this.updateHtml();
    }

    sortCalls () {
        this.callList.sort((a,b) => { return a['start_time'] - b['start_time']; });
    }
 }

 function keyPress (e) {
    if(e.key === "Escape") {
        if (plb.div.style.display == 'block') {
            plb.hide();
        }
    }
}

document.body.addEventListener('keydown', keyPress);