// Copyright 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

var NetworkUI = function() {
  // Properties to display in the network state table
  var NETWORK_STATE_FIELDS = [
    'Name', 'Type', 'State', 'Profile', 'Connectable',
    'Error', 'Address', 'Security', 'Cellular.NetworkTechnology',
    'Cellular.ActivationState', 'Cellular.RoamingState',
    'Cellular.OutOfCredits', 'Strength'
  ];

  var LOG_LEVEL_CLASSNAME = {
    'Error': 'network-log-level-error',
    'User': 'network-log-level-user',
    'Event': 'network-log-level-event',
    'Debug': 'network-log-level-debug'
  };

  var LOG_LEVEL_CHECKBOX = {
    'Error': 'log-error',
    'User': 'log-user',
    'Event': 'log-event',
    'Debug': 'log-debug'
  };

  /**
   * Create a tag of log level.
   *
   * @param {string} level A string that represents log level.
   * @return {DOMElement} The created span element.
   */
  var createLevelTag = function(level) {
    var tag = document.createElement('span');
    tag.className = 'network-level-tag';
    tag.textContent = level;
    tag.classList.add(LOG_LEVEL_CLASSNAME[level]);
    return tag;
  };

  /**
   * Creates an element that contains the time, the event, the level and
   * the description of the given log entry.
   *
   * @param {Object} logEntry An object that represents a single line of log.
   * @return {DOMElement}  The created p element that represents the log entry.
   */
  var createLogEntryText = function(logEntry) {
    var level = logEntry['level'];
    if (!$(LOG_LEVEL_CHECKBOX[level]).checked)
      return null;
    var res = document.createElement('p');
    var textWrapper = document.createElement('span');
    var fileinfo = '';
    if ($('log-fileinfo').checked)
      fileinfo = logEntry['file'];
    textWrapper.textContent = loadTimeData.getStringF(
      'logEntryFormat',
      logEntry['timestamp'],
      fileinfo,
      logEntry['event'],
      logEntry['description']);
    res.appendChild(createLevelTag(level));
    res.appendChild(textWrapper);
    return res;
  };

  /**
   * Create event log entries.
   *
   * @param {Array.<string>} logEntries A array of strings that each string
   *     represents a log event in JSON format.
   */
  var createEventLog = function(logEntries) {
    var container = $('network-log-container');
    container.textContent = '';
    for (var i = 0; i < logEntries.length; ++i) {
      var entry = createLogEntryText(JSON.parse(logEntries[i]));
      if (entry)
        container.appendChild(entry);
    }
  };

  /**
   * Create a cell in network state table.
   *
   * @param {string} value Content in the cell.
   * @return {DOMElement} The created td element that displays the given value.
   */
  var createStatusTableCell = function(value) {
    var col = document.createElement('td');
    col.textContent = value || '';
    return col;
  };

  /**
   * Create a row in the network state table.
   *
   * @param {string} path The network path.
   * @param {dictionary} status Properties of the network.
   * @return {DOMElement} The created tr element that contains the network
   *     state information.
   */
  var createStatusTableRow = function(path, status) {
    var row = document.createElement('tr');
    row.className = 'network-status-table-row';
    row.appendChild(createStatusTableCell(path));
    row.appendChild(createStatusTableCell(status['GUID'].slice(1, 9)));
    for (var i = 0; i < NETWORK_STATE_FIELDS.length; ++i) {
      row.appendChild(createStatusTableCell(status[NETWORK_STATE_FIELDS[i]]));
    }
    return row;
  };

  /**
   * Create network state table.
   *
   * @param {Array.<Object>} networkStatuses An array of network states.
   */
  var createNetworkTable = function(networkStatuses) {
    var table = $('network-status-table');
    var oldRows = table.querySelectorAll('.network-status-table-row');
    for (var i = 0; i < oldRows.length; ++i)
      table.removeChild(oldRows[i]);
    for (var path in networkStatuses)
      table.appendChild(
          createStatusTableRow(path, networkStatuses[path]));
  };

  /**
   * This callback function is triggered when the data is received.
   *
   * @param {dictionary} data A dictionary that contains network state
   *     information.
   */
  var onNetworkInfoReceived = function(data) {
    createEventLog(JSON.parse(data.networkEventLog));
    createNetworkTable(data.networkState);
  };

  /**
   * Sends a refresh request.
   */
  var sendRefresh = function() {
    chrome.send('requestNetworkInfo');
  }

  /**
   * Sets refresh rate if the interval is found in the url.
   */
  var setRefresh = function() {
    var interval = parseQueryParams(window.location)['refresh'];
    if (interval && interval != '')
      setInterval(sendRefresh, parseInt(interval) * 1000);
  };

  /**
   * Get network information from WebUI.
   */
  document.addEventListener('DOMContentLoaded', function() {
    $('log-refresh').onclick = sendRefresh;
    $('log-error').checked = true;
    $('log-error').onclick = sendRefresh;
    $('log-user').checked = true;
    $('log-user').onclick = sendRefresh;
    $('log-event').checked = true;
    $('log-event').onclick = sendRefresh;
    $('log-debug').checked = false;
    $('log-debug').onclick = sendRefresh;
    $('log-fileinfo').checked = false;
    $('log-fileinfo').onclick = sendRefresh;
    setRefresh();
    sendRefresh();
  });

  return {
    onNetworkInfoReceived: onNetworkInfoReceived
  };
}();