var userDetailTable;
if ($.fn.dataTable.isDataTable('#user_user_stats_table')) {
    userDetailTable = $('#user_user_stats_table').DataTable({deferRender: true});
} else {
    userDetailTable = $("#user_user_stats_table").dataTable({
        lengthMenu: [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
        pageLength: getCookie("results_table_length") != "" ? getCookie("results_table_length") : 50,
    	deferRender:   true,
        "ajax" : null
    });
}

// On clicking on a table row, download access object
$("#user_user_stats_table tbody").on("click", "tr", function() {

    var tableRow = userDetailTable.fnGetData(this);
    $('#selecteduser').val($('#user_detail_title').text());
    $('#selectedscript').val(tableRow[0]);
    $('#selecteddatestart').val($('#startDateValue').text());
    $('#selecteddateend').val($('#endDateValue').text());

    // Go to download page
    $('#liquery').children('a').click();
});

var chart;

// set user header
var userraw = getUrlParameter("user");
if (typeof userraw === "undefined" || userraw === "") {
	let newUser = window.prompt("Which user do you want?","");
	document.location.href = "user.html?user="+encodeURIComponent(newUser);
} else {
	var user = decodeURIComponent(userraw);
    $('#user_detail_title').text(user);
}

var seldate = $("#selecteddate").val();
var paramDateL =  getUrlParameter("startDate");
if (typeof paramDateL !== 'undefined') {
	try {
		seldate = new Date(parseFloat(paramDateL)).yyyymmdd();
		$("#selecteddate").val(seldate)
	} catch (err) {
	}
}

if (typeof seldate === 'undefined' || seldate === "") {
    seldate = new Date().yyyymmdd();
}
setStartEndDates(seldate);


$("#datetimepickerstart").datetimepicker({
    format : 'Y-m-d H:i',
    closeOnDateSelect : true,
    onChangeDateTime : function(ct, input) {
        
        $('#startDateValue').text(ct.getTime());
       
        var endTime = parseFloat($('#endDateValue').text());
        if (ct.getTime() >= endTime) {
            // Add 12 hours
            var endDate = new Date(ct.getTime() + (12 * 60 * 60 *1000));
            writeStartEndDatesFull(ct, endDate);
        }
        drawChart();
    }

});


$("#datetimepickerend").datetimepicker({
    format : 'Y-m-d H:i',
    closeOnDateSelect : true,
    onChangeDateTime : function(ct, $input) {
        $('#endDateValue').text(ct.getTime());

        var startTime = parseFloat($('#startDateValue').text());
        if (ct.getTime() <= startTime) {
            // add 12 hours
            var endDate = new Date(ct.getTime() + (12 * 60 * 60 *1000));
            writeStartEndDatesFull(ct, endDate);
        }
        drawChart();
    }

});

function initPage() {
    if (google) {
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
    } else {
        console.log("missing google!");
    }
  
    $("#graphkey").chosen({
        disable_search_threshold : 10,
        width : "100%"
    });
  

}

function reloadPage() {
    initPage();
}


function getUserUserStats() {
    var tenant = $("#tenants :selected").text();
    var apiurl = "/monitorapi?cmd=detailusagedata&tenant=" + encodeURIComponent(tenant);
    apiurl = apiurl + "&user=true&element=" + getUrlParameter("user");
    apiurl = apiurl + "&start=" + $('#startDateValue').text();
    apiurl = apiurl + "&end=" + $('#endDateValue').text();

    userDetailTable.api().ajax.url(apiurl);
    userDetailTable.api().ajax.reload(function(json) {
        $('#user_user_stats_text_container').fadeTo('fast', 0.0);
        $('#user_user_stats_text_container').text("");
        $('#user_user_stats_table_container').fadeTo('fast', 1.0);

    });

}

$('#graphkey').change(function() {
    drawChart();
});

$('#a_user_day').click(function() {
    seldate = new Date().yyyymmdd();
    setStartEndDates(seldate);
    drawChart();
    return false;
});


$('#a_user_1d').click(function() {
    var startDate = new Date();
    var endDate = new Date();
    startDate.setDate(endDate.getDate() - 1);

    writeStartEndDatesFull(startDate, endDate);

    drawChart();
    return false;
});

$('#a_user_2d').click(function() {
    var startDate = new Date();
    var endDate = new Date();
    startDate.setDate(endDate.getDate() - 2);

    writeStartEndDatesFull(startDate, endDate);

    drawChart();
    return false;
});

$('#a_user_7d').click(function() {
    var startDate = new Date();
    var endDate = new Date();
    startDate.setDate(endDate.getDate() - 7);

    writeStartEndDatesFull(startDate, endDate);

    drawChart();
    return false;
});

$('#a_user_1m').click(function() {
    var startDate = new Date();
    var endDate = new Date();
    startDate.setDate(endDate.getDate() - 31);

    writeStartEndDatesFull(startDate, endDate);

    drawChart();
    return false;
});

$('#a_user_3m').click(function() {
    var startDate = new Date();
    var endDate = new Date();
    startDate.setDate(endDate.getDate() - 90);

    writeStartEndDatesFull(startDate, endDate);

    drawChart();
    return false;
});

$('#a_user_1y').click(function() {
    var startDate = new Date();
    var endDate = new Date();
    startDate.setDate(endDate.getDate() - 365);

    writeStartEndDatesFull(startDate, endDate);

    drawChart();
    return false;
});


function setStartEndDates(seldate) {             
	var startDate = moment(seldate + 'T00:00:00'+timezoneOffsetString, "YYYY-MM-DDTHH:mm:ssZ").toDate();
	var endDate = moment(seldate + 'T00:00:00'+timezoneOffsetString, "YYYY-MM-DDTHH:mm:ssZ").toDate();
  
    endDate.setDate(startDate.getDate() + 1);
 
    writeStartEndDates(startDate, endDate);
}

function writeStartEndDatesFull(startDate, endDate) {
    $('#startDateValue').text(startDate.getTime());
    $('#endDateValue').text(endDate.getTime());
   
    $("#datetimepickerstart").val(startDate.yyyymmdd() + ' ' + addZero(startDate.getHours()) + ':' + addZero(startDate.getMinutes()));
    $("#datetimepickerend").val( endDate.yyyymmdd() + ' ' + addZero(endDate.getHours()) + ':' + addZero(endDate.getMinutes()));
   
}


function writeStartEndDates(startDate, endDate) {
   
    $('#startDateValue').text(startDate.getTime());
    $('#endDateValue').text(endDate.getTime());
    $("#datetimepickerstart").val(startDate.yyyymmdd() + ' 00:00');
    $("#datetimepickerend").val(endDate.yyyymmdd() + ' 00:00');
}


function drawChart() {
    
    userDetailTable.api().clear();
    $('#chart_div').hide();
    $('#chart_div_area').show();
    $('#user_user_stats_table_container').fadeTo('fast', 0.0);
    $('#user_user_stats_text_container').text("Loading...");
    $('#user_user_stats_text_container').fadeTo('fast', 1.0);

    var tenant = $("#tenants :selected").text();
    var type = $("#graphkey :selected").text();

    var apiurl = "/monitorapi?cmd=detail&tenant=" + encodeURIComponent(tenant);
    apiurl = apiurl + "&user=true&element=" + getUrlParameter("user");
    apiurl = apiurl + "&start=" + $('#startDateValue').text();
    apiurl = apiurl + "&end=" + $('#endDateValue').text();
    apiurl = apiurl + "&type=" + type;

    $.ajax({
        url : apiurl,
        dataType : "json",
        async : true,
        success : function(data) {
            $('#chart_div').show();
            $('#chart_div_area').hide();
            drawChartWithData(data);
           
           
        }
    });

    // Get user stats
    // Get script stats
    var startTime = parseFloat($('#startDateValue').text());
    var endTime = parseFloat($('#endDateValue').text());
    
    // If we select a long period of time, dont show some detailed info anymore
    var maxAge = 3*24*60*60*1000;
    if ((endTime - startTime) < maxAge ) {
        getUserUserStats();
    } else {
        $('#user_user_stats_text_container').fadeTo('fast', 0.0);
    }
 
}

function drawChartWithData(jsonData) {
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);
    chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    

    var vaxisLabel = 'count';
    if ($("#graphkey :selected").text() == 'Time') {
        vaxisLabel = 'ms.';
    }

    var options = {
        animation : {
            duration : 500,
            easing : 'out',
        },
        pointSize : 6,
        chartArea : {
            left : 100,
            'width' : '90%'
        },
        legend : {
            position : 'top',
            textStyle : {
                color : 'blue',
                fontSize : 16
            }
        },
        explorer : {
            action : [ 'dragToPan', 'rightClickToReset' ],
            axis : 'horizontal',
            keepInBounds : true,
            maxZoomIn : 0.1
        },
        hAxis : {
            title : 'Time',
            titleTextStyle : {
                color : '#333'
            }
        },
        vAxis : {
            minValue : 0,
            title : vaxisLabel,
        }
    };
   
    chart.draw(data, options);

}