var historyJson = {};
const maxIterations = 200;

function filterHistory(){
    var dateFrom = new Date($('#historyFrom').val() + 'T' + $('#historyTimeFrom').val());
    console.log(dateFrom);
    var dateTo = new Date($('#historyTo').val() + 'T' + $('#historyTimeTo').val());
    console.log(dateTo);

    // var dateFrom = new Date();
    // var dateTo = new Date();
    // var timeFrom = new Date();
    // var timeTo = new Date();

    // dateFrom = Date.parse($('#historyFrom').val());
    // console.log(dateFrom);
    // dateTo = Date.parse($('#historyTo').val());
    // console.log(dateTo);
    // timeFrom = Date.parse($('#historyTimeFrom').val());
    // console.log(timeFrom);
    // timeTo = Date.parse($('#historyToFrom').val());
    // console.log(timeTo);
    // dateFrom.setTime(timeFrom);
    // console.log(dateFrom);
    // dateTo.setTime(timeTo);
    // console.log(dateTo);
    
    loadHistory(dateFrom, dateTo);
}

const startSearch = function(){
    filterHistory();
}
$('#btn-searchHistory').click(startSearch);

function loadHistory(dateFrom, dateTo){
    console.log('Request send for history data')
    var eventRequest = {
        clientUUID : json[jsonIndex].clientUUID,
        localDateTimeFrom : dateFrom,
        localDateTimeTo : dateTo,
        mockedResponseId : json[jsonIndex].mockedResponseId
    };
    $.ajax({
        url: host + '/api/event',
        type: 'POST',
        data: JSON.stringify(eventRequest, null, 2),
        contentType: "application/json"
    }).done(function(data){
        historyJson = data;
        displayHistory();
    });
}

function getLast24hHistoryData(){
    $.getJSON(host + '/api/event/' + clientUUID + '/' + lastId, function(data){
        historyJson = data;
        displayHistory();
    });
}

function historyToHtml(){
    var innerHTML = '';
    var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
    for(let i=0; i<iterations; i++){
        let style = i%2==0 ? ' class="even"' : '';
        innerHTML += '<tr' + style + '>' +
            '<td>' + historyJson[i].dateTimeStamp + '</td>' +
            '<td>' + historyJson[i].interfaceName + '</td>' +
        '</tr>';
    }
    return innerHTML;
}

function displayHistory(){
    $('#historyTable tbody').html(historyToHtml());
}