// allow the user to store recent queries for quick retrieval
var recentQueries = [];
var queryPointer = null;

// keep track of the databases that exist on the server
var availableDatabases = [];
var currentlySelectedDatabase = null;

// connection settings for the server, with sensible defaults
var connectionSettings = {
    hostname: "localhost",
    port: "8086",
    username: "",
    password: "",
    ssl: false
}

var connectionString = function() {
    var protocol = (connectionSettings.ssl ? "https" : "http");
    var host = connectionSettings.hostname + ":" + connectionSettings.port;

    return protocol + "://" + host;
}

var getSeriesFromJSON = function(data) {
    var results = data.results[0].series;
    return results;
}

// gets settings from the browser's localStorage and sets defaults if they aren't found 
var loadSettings = function() {
    var cs = localStorage.getItem("connectionSettings");

    if (cs != null) { connectionSettings = JSON.parse(cs); }

    document.getElementById('hostname').value = connectionSettings.hostname;
    document.getElementById('port').value = connectionSettings.port;
    document.getElementById('username').value = connectionSettings.username;
    document.getElementById('password').value = connectionSettings.password;
    document.getElementById('ssl').checked = connectionSettings.ssl;
}

var updateSettings = function() {
    var hostname = document.getElementById('hostname').value;
    var port = document.getElementById('port').value;
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var ssl = document.getElementById('ssl').checked;

    if (hostname == "") { hostname = "localhost"; }

    if (port == "") { port = "8086"; }

    connectionSettings.hostname = hostname;
    connectionSettings.port     = port;
    connectionSettings.username = username;
    connectionSettings.password = password;
    connectionSettings.ssl      = ssl;

    localStorage.setItem("connectionSettings", JSON.stringify(connectionSettings));

    getDatabases();
}

// hide errors within the Write Data modal
var hideModalError = function() {
    $("div#modal-error").empty().hide();
}

// show errors within the Write Data modal
var showModalError = function(message) {
    hideModalSuccess();

    $("div#modal-error").html("<p>" + message + "</p>").show();
}

// hide success messages within the Write Data modal
var hideModalSuccess = function() {
    $("div#modal-success").empty().hide();
}

// show success messages within the Write Data modal
var showModalSuccess = function(message) {
    hideModalError();

    $("div#modal-success").html("<p>" + message + "</p>").show();
}

// hide errors from queries
var hideQueryError = function() {
    $("div#query-error").empty().hide();
}

// show errors from queries
var showQueryError = function(message) {
    hideQuerySuccess();

    $("div#query-error").html("<p>" + message + "</p>").show();
}

// hide success messages from queries
var hideQuerySuccess = function() {
    $("div#query-success").empty().hide();
}

// show success messages from queries
var showQuerySuccess = function(message) {
    hideQueryError();

    $("div#query-success").html("<p>" + message + "</p>").show();
}

// hide warning from database lookup
var hideDatabaseWarning = function() {
    $("div#database-warning").empty().hide();
}

// show warning from database lookup
var showDatabaseWarning = function(message) {
    $("div#database-warning").html("<p>" + message + "</p>").show();
}

// clear out the results table
var clearResults = function() {
    $("div#table").empty();
}

// handle submissions of the query bar
var handleSubmit = function(e) {
    var queryElement = document.getElementById('query');
    var q = queryElement.value;

    clearResults();

    var query = $.get(connectionString() + "/query", {q: q, db: currentlySelectedDatabase}, function() {
        hideQueryError();
        hideQuerySuccess();
    });

    recentQueries.push(q);
    queryPointer = recentQueries.length - 1;

    query.fail(function (e) {
        if (e.status == 400) {
            var response = JSON.parse(e.responseText)
            showQueryError(response.error);
        }
        else {
            showQueryError("Couldn't connect to host (" + connectionString() + "): " + e.statusText);
        }
    });

    query.done(function (data) {
        var firstRow = data.results[0];
        if (firstRow.error) {
            showQueryError("Server returned error: " + firstRow.error);
            return
        }

        var series = getSeriesFromJSON(data);

        if (series == null) {
            showQuerySuccess("Success!");
            getDatabases();
            return
        }

        var values = series[0].values;
        
        if ((values == null) || (values.length == 0)) {
            showQueryError("Query returned no results!");
        } else {
            availableDatabases = values.map(function(value) {
                return value[0];
            });

            React.render(
              React.createElement(DataTable, {series: series}),
              document.getElementById('table')
            );
        }

    });

    if (e != null) { e.preventDefault(); }
    return false;
};

var handleKeypress = function(e) {
    var queryElement = document.getElementById('query');

    // key press == enter
    if (e.keyCode == 13) {
        e.preventDefault();
        handleSubmit();
        return false;
    }

    // if we don't have any recent queries, ignore the arrow keys
    if (recentQueries.length == 0 ) { return }

    // key press == up arrow
    if (e.keyCode == 38) {
        // TODO: stash the current query, if there is one?
        if (queryPointer == recentQueries.length - 1) {
            // this is buggy.
            //recentQueries.push(queryElement.value);
            //queryPointer = recentQueries.length - 1;
        }

        if (queryPointer != null && queryPointer > 0) {
            queryPointer -= 1;
            queryElement.value = recentQueries[queryPointer];
        }
    }

    // key press == down arrow
    if (e.keyCode == 40) {
        if (queryPointer != null && queryPointer < recentQueries.length - 1) {
            queryPointer += 1;
            queryElement.value = recentQueries[queryPointer];
        }
    }
};

var QueryError = React.createClass({
    render: function() {
        return React.createElement("div", {className: "alert alert-danger"}, this.props.message)
    }
});

var stringifyTags = function(tags) {
    var tagStrings = [];

    for(var index in tags) {
        tagStrings.push(index + ":" + tags[index]);
    }

    return tagStrings.join(", ");
}

var DataTable = React.createClass({
  render: function() {
    var tables = this.props.series.map(function(series) {
        return React.createElement("div", null, 
            React.createElement("h1", null, series.name), 
            React.createElement("h2", null, stringifyTags(series.tags)), 
            React.createElement("table", {className: "table"}, 
                React.createElement(TableHeader, {data: series.columns}), 
                React.createElement(TableBody, {data: series})
            )
        );
    });

    return React.createElement("div", null, tables);
  }
});

var TableHeader = React.createClass({
    render: function() {
        var headers = this.props.data.map(function(column) {
            return React.createElement("th", null, column);
        });

        return React.createElement("tr", null, headers);
    }
});

var TableBody = React.createClass({
    render: function() {
        var tableRows = this.props.data.values.map(function (row) {
            return React.createElement(TableRow, {data: row});
        });

        return React.createElement("tbody", null, tableRows);
    }
});

var TableRow = React.createClass({
    render: function() {
        var tableData = this.props.data.map(function (data) {
            return React.createElement("td", null, data)
        });

        return React.createElement("tr", null, tableData);
    }
});

var chooseDatabase = function (databaseName) {
    currentlySelectedDatabase = databaseName;
    document.getElementById("content-current-database").innerHTML = currentlySelectedDatabase;
}

var getDatabases = function () {
    var q = "SHOW DATABASES";
    
    var query = $.get(connectionString() + "/query", {q: q, db: currentlySelectedDatabase}, function() {
        hideDatabaseWarning();
    });

    query.fail(function (e) {
        if (e.status == 400) {
            var response = JSON.parse(e.responseText)
            showQueryError(response.error);
        }
        else {
            showDatabaseWarning("Couldn't fetch database list from InfluxDB (" + connectionString() + "). Try updating your connection settings and make sure the server is running.")
            availableDatabases = [];
            currentlySelectedDatabase = null;
            updateDatabaseList();
        }
    });

    query.done(function (data) {
        var firstRow = data.results[0];
        if (firstRow.error) {
            showDatabaseWarning(firstRow.error);
            return;
        }

        var series = getSeriesFromJSON(data);
        var values = series[0].values;
        
        if ((values == null) || (values.length == 0)) {
            availableDatabases = [];
            updateDatabaseList();

            showDatabaseWarning("Couldn't find any databases.")
        } else {
            availableDatabases = values.map(function(value) {
                return value[0];
            }).sort();

            if (currentlySelectedDatabase == null) {
                chooseDatabase(availableDatabases[0]);
            } else if (availableDatabases.indexOf(currentlySelectedDatabase) == -1) {
                chooseDatabase(availableDatabases[0]);
            }
            updateDatabaseList();
        }
    });
}

var updateDatabaseList = function() {
    var databaseList = $("ul#content-database-list");

    databaseList.empty();
    availableDatabases.forEach(function(database) {
        var li = $("<li><a href=\"#\">" + database + "</a></li>");
        databaseList.append(li);
    });

    if (availableDatabases.length == 0) {
        document.getElementById("content-current-database").innerHTML = "&hellip;";
    }
}

// when the page is ready, start everything up
$(document).ready(function () {
    loadSettings();

    getDatabases();

    // bind to the settings cog in the navbar
    $("#action-settings").click(function (e) {
        $("#settings").toggle();
    });

    // bind to the save button in the settings form
    $("#form-settings").submit(function (e) {
        $("#settings").hide();
        updateSettings();
    });

    // bind to the items in the query template dropdown
    $("ul#action-template label").click(function (e) {
        var el = $(e.target);
        $("input#query").val(el.data("query")).focus();
    });

    $("ul#content-database-list").on("click", function(e) {
        if (e.target.tagName != "A") { return; }

        chooseDatabase(e.target.innerHTML);
        e.preventDefault();
    })

    // load the Write Data modal
    $("button#action-send").click(function (e) {
        var data = $("textarea#content-data").val();

        var startTime = new Date().getTime();
        var write = $.post(connectionString() + "/write?db=" + currentlySelectedDatabase, data, function() {
        });

        write.fail(function (e) {
            if (e.status == 400) {
                showModalError("Failed to write: " + e.responseText)
            }
            else {
                showModalError("Failed to contact server: " + e.statusText)
            }
        });

        write.done(function (data) {
            var endTime = new Date().getTime();
            var elapsed = endTime - startTime;
            showModalSuccess("Write succeeded. (" + elapsed + "ms)");
        });

    });

    // handle submit actions on the query bar
    var form = document.getElementById('query-form');
    form.addEventListener("submit", handleSubmit);

    // handle keypresses on the query bar so we can get arrow keys and enter
    var query = document.getElementById('query');
    query.addEventListener("keydown", handleKeypress);

    // make sure we start out with the query bar in focus
    document.getElementById('query').focus();
})