/*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.

  Copyright (C) 2015, 2016 INRIA

  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  Lesser General Public License (GNU LGPL) as published by the
  Free Software Foundation, either version 2.1 of the License, or
  (at your option) any later version.  The code is distributed
  WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU LGPL for more details.

  As additional permission under GNU LGPL version 2.1 section 7,
  you may distribute non-source (e.g., minimized or compacted)
  forms of that code without the copy of the GNU LGPL normally
  required by section 4, provided you include this license notice
  and a URL through which recipients can access the Corresponding
  Source.

  @licend  The above is the entire license notice
  for the JavaScript code in this page.
 
  @author Marcello Stanisci
*/
"use strict";

var FRACTION = 100000000;
var START = 0;
var DELTA = 5
var LAST = 0;
var SCROLL = true;

/**
 * This function *could* "type check" 'amount',
 * but once 'amount' got here it is already "too late",
 * because this means that the merchant *backend* gave
 * it wrong.
 */
function amount_to_string(amount){
  if (typeof amount === 'string' || amount instanceof String)
  {
    var split = amount.match(/([A-Z]+):([0-9]+)\.?([0-9]+)?/);
    if (!split)
      return "Bad amount given: " + amount;
    if (split[3])
      return `${split[2]}.${split[3]} ${split[1]}`;
    return `${split[2]}.00 ${split[1]}`;
  }
  var number = Number(amount.value) +
              (Number(amount.fraction)/FRACTION);
  return `${number.toFixed(2)} ${amount.currency}`;
}

function close_popup(){

  var ctx = document.getElementsByClassName("track-content")[0];
  var tbody = xpath_get("table/tbody", ctx).snapshotItem(0);
  var tbody_children = xpath_get("table/tbody/tr", ctx);

  for(var i=1; i<tbody_children.snapshotLength; i++){
    tbody.removeChild(tbody_children.snapshotItem(i));
  }

  toggle_overlay(true);
}

function amount_sum(a1, a2){
  if(a1.currency != a2.currency)
    throw "Currency mismatch, terminating.";
  var ret = {currency: a2.currency,
             value: 0,
             fraction: 0};
  ret.value = a1.value + a2.value;
  var fraction = a1.fraction + a2.fraction;
  ret.value += Math.floor(fraction / FRACTION);
  ret.fraction = fraction % FRACTION;
  return ret;
}

/**
 * Parse Taler /Date(x)/ into human-friendly format.
 */
function parse_date(date){

  var split = date.match(/Date\(([0-9]+)\)/);
  if (!split){
    console.error("Malformed date gotten from backend");
  }
  var seconds;
  if(isNaN(seconds = Number(split[1]))){
    console.error("Malformed date: no secs given");
    return;
  }
  var d = new Date(seconds * 1000);
  var months = ["Jan", "Feb", "Mar", "Apr", "May",
                "Jun", "Jul", "Aug", "Sep", "Oct",
                "Nov", "Dec"];
  var hours = ("0" + d.getHours()).slice(-2);
  var minutes = ("0" + d.getMinutes()).slice(-2);
  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}, ${hours}:${minutes}`;
}

/**
 * Make screen-centerd box (which show a order's tracks)
 * appear/disappear.
 */
function toggle_overlay(force_close){
  var overlay = document.getElementsByClassName("overlay")[0];
  if(overlay.style.visibility == "visible" || force_close){
    overlay.style.visibility = "hidden";
    overlay.style.opacity = 0;
  }
  else
  {
    overlay.style.visibility = "visible";
    overlay.style.opacity = 1;
  }

}

/**
 * Draws a line at the bottom of a orders list to indicate
 * they have all being paid out by the same WTID.
 */
function make_marker(wtid){
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  var p = document.createElement("p");
  td.setAttribute("colspan", 3);
  p.textContent = wtid.substr(0, 20) + "...";
  p.setAttribute("id", "marker");
  td.appendChild(p);
  tr.appendChild(td);
  return tr;
}


/**
 * Use the /track/transfer API from the frontend.  Once data
 * arrives, it calls a UI function which lists all the entries
 * in the page.
 *
 * 'cb' is a UI transforming function.  Typically, it is set to
 * 'fill_table()'.
 */
var track_transfer = function(exchange, wtid, cb){

  /* Remove any previous errors, if there are any.  */
  var info_bar = document.getElementById("information-bar");
  info_bar.style.visibility = "hidden"; 
  /* Will be untoggled by the 'cb' */
  toggle_loader();
  var qs = `/track/transfer?` +
           `exchange=${exchange}&` +
           `wtid=${wtid}&` +
           `instance=${get_instance()}`;
  var req = new XMLHttpRequest();
  req.open("GET", qs, true);
  req.onload = function(){
    if(4 == req.readyState){
      switch(req.status){
      case 200:
        /* Scroll is disabled after showing /track/transfer
         * results on the page; that's because those results
         * are not guaranteed to be sorted any how, so there
         * is little to no point in scrolling towards "older"
         * results: older than what?  The scroll feature will
         * be re-enabled from the /history callback.  */
        SCROLL = false;
        clear_results();
        var tracks = JSON.parse(req.responseText);
        cb(tracks.deposits_sums,
           tracks.execution_time,
           wtid);
        break;
      default:
        show_error(req.responseText, true);
      }
    }
  }
  req.send();
}


/* Fill the information bar on the top of the page with
 * error messages.  */
var show_warning;
var show_error = show_warning = function(response_text){

  toggle_loader();
  close_popup();

  var msg = response_text;
  try{
    var parse = JSON.parse(response_text);
    console.log("Response was at least JSON");
    if (parse['error'])
      msg = parse['error'];

    /* Give precedence to 'hint' as it is usually
     * human-friendlier */
    if (parse['hint'])
      msg = parse['hint'];

  } catch (e) {
    console.log("Must keep raw response");
  }
  
  /* msg is ready here.  */

  /* Get hold of the info bar.  */
  var info_bar = document.getElementById("information-bar");
  info_bar.innerHTML = `<p>${msg}</p>`; 
  info_bar.style.visibility = "visible"; 

  /* Info bar will disappear at next page load/reload.  */
}

/**
 * Call /track/order API offered by the frontend.  Once data
 * arrives it calls a UI routine which fills the "entries table"
 * in the page.
 */
var track_order = function(order_id, cb){
  
  /* Remove any previous errors, if there are any.  */
  var info_bar = document.getElementById("information-bar");
  info_bar.style.visibility = "hidden"; 
  /* Will be untoggled by the 'cb' */
  toggle_loader();
  var req = new XMLHttpRequest();
  var url = `/track/order?` +
            `order_id=${order_id}&` +
            `instance=${get_instance()}`;
  req.open("GET", url, true);
  req.onload = function(){
    if (4 == req.readyState){
      if ((200 == req.status) || (202 == req.status))
        cb(JSON.parse(req.responseText), req.status);
      else
        show_error(req.responseText, true);
      return;
    }
  }
  req.send();
}

/**
 * Fill the screen-centered box with data from /track/order.
 */
function fill_box(tracks, http_code)
{
  toggle_loader();

  if (http_code == 404){
    alert("No tracks for that order.");
    return;
  }

  if (http_code == 202){
    console.log("Pending order.");
    toggle_loader();
    show_warning("This order is still waiting to be paid back");
    return;
  }

  if(!tracks)
    console.log("Got invalid JSON");
    if(0 == tracks.length || !tracks.length){
      console.log(`Got no tracks and status == ${http_code}.  ` +
                  `Should not be here.`);
      return;
    }


  for(var i=0; i<tracks.length; i++){
    var entry = tracks[i];
    /**
     * 'track_content' contains the tracks (WTID/Amount/Date)
     * about *one* order.  It is contained in the 'overlay',
     * which renders it in a "box" in the middle of the
     * screen.  This "box" is then toggleable as visible/hidden.
     */
    var overlay = document.getElementsByClassName("overlay")[0];
    var track_content = document.getElementsByClassName
      ("track-content")[0];
    var table = document.evaluate
      ("table/tbody",
       track_content,
       null,
       XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
       null).snapshotItem(0);
    var row = document.createElement("tr");
    var subject = `${entry.wtid} ${entry.exchange}`;
    console.log("Subject", subject);
    row.innerHTML = `` +
      `<td class="wtid">` +
        `<a onclick="track_transfer(\'${entry.exchange}\', ` +
                                   `\'${entry.wtid}\', ` +
                                   `fill_table)"` +
            `href="#${i}">${subject.substring(0, 20)}...` +
        `</a>` +
      `</td>` +
      `<td class="amount">` +
        `${amount_to_string(entry.amount)}` +
      `</td>` +
      `<td class="date">` +
        `${parse_date(entry.execution_time)}` +
      `</td>`;
    table.appendChild(row);
    toggle_overlay();
  }
}

/**
 * Helper function which abstracts the hard-to-remember
 * API offered by document.evaluate().
 */
function xpath_get(xpath, ctx){
  var ret = document.evaluate
    (xpath,
     ctx,
     null,
     XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
     null);
  return ret;
}


function fill_table(data, execution_time, wtid_marker){
  var table = document.getElementById("history");
  var tbody = xpath_get("tbody", table).snapshotItem(0);

  /* Make table's headers visible */
  xpath_get("tr[@class='headers']", tbody)
    .snapshotItem(0).style.visibility = "visible";
  /* Will only be effective on page first load; afterwards
   * it is just idempotent.  */
  table.style.visibility = "visible";

  for (var i=0; i<data.length; i++){
    var entry = data[i];
    var row = document.createElement("tr");
    row.className = "even";
    var row_summary = document.createElement("tr");
    row_summary.className = "odd";
    var td_order_id = document.createElement("td");
    td_order_id.className = "order-id";
    var td_summary = document.createElement("td");
    td_summary.setAttribute("colspan", 3);
    td_summary.className += "summary";
    var td_amount = document.createElement("td");
    td_amount.className = "amount";
    var td_date = document.createElement("td");
    td_date.className = "date";
    td_order_id.innerHTML = `<a href="#${i}"
      onclick="track_order('${entry.order_id}', fill_box);">
      ${entry.order_id}</a>`;
    td_summary.className = "summary";
    td_summary.innerHTML = entry.summary || "deposited";
    td_amount.innerHTML = amount_to_string(
      entry.amount || entry.deposit_value);
    td_date.innerHTML = parse_date
      (entry.timestamp || execution_time);
    row.appendChild(td_order_id);
    row.appendChild(td_summary);
    row.appendChild(td_amount);
    row.appendChild(td_date);
    row_summary.appendChild(td_summary);
    tbody.appendChild(row);
    tbody.appendChild(row_summary);
    }

  if (wtid_marker){
    // close popup showing wire transfer information
    close_popup();
    // draw a line at the bottom, mentioning the WTID.
    var marker = make_marker(wtid_marker);
    tbody.appendChild(marker);
  }
  toggle_loader();
}

/**
 * Make the spinning wheel appear if it is not shown,
 * and viceversa.
 */
function toggle_loader(){
  var loader = document.getElementsByClassName("loader")[0]; 
  if (loader.style.visibility != "hidden")
  {
    loader.style.visibility = "hidden";
    console.log("toggle_loader: visible>hidden");
  }
  else
  {
    loader.style.visibility = "visible";
    console.log("toggle_loader: hidden>visible");
  }
} 

/**
 * Issue a /track/order (/track/transfer) depending on
 * whether the user selected "order" ("transfer") on the
 * given form.
 */
function track_cherry_pick(form){
  var types = xpath_get("input[@type='radio']", form);
  for(var i in [0, 1]){
    if (!types.snapshotItem(i).checked)
      continue;
    var type = types.snapshotItem(i).value;
    if ("order" == type){
      var order_id = xpath_get("input[@class='order']", form)
        .snapshotItem(0);
      track_order(order_id.value, fill_box);
    }
    else{
      var data = xpath_get("input[@class='transfer']", form);
      var wtid = data.snapshotItem(0);
      var exchange = data.snapshotItem(1);
      track_transfer(exchange.value, wtid.value, fill_table);
    }  
  }
}

/**
 * The "cherry pick" form allows the user to track a particular
 * order or wire transfer by entering its "id" in the input field.
 *
 * The UI is such that a radio button can switch the form "type"
 * to query for a order or for a wire transfer;  the following two
 * functions help to switch the form appearance according to this
 * order/wire-transfer switch.
 */

/**
 * Make the "cherry pick" form be suitable to query /track/order.
 */
function cherry_pick_form_order(form){
  var input_order = xpath_get("input[@class='order']", form)
    .snapshotItem(0);
  input_order.style.visibility = "";
  var input_transfer = xpath_get("input[@class='transfer']", form);
  for(var i in [0, 1])
    input_transfer.snapshotItem(i).style.visibility = "hidden";
}

/**
 * Make the "cherry pick" form be suitable to query /track/transfer.
 */
function cherry_pick_form_transfer(form){
  var input_order = xpath_get("input[@class='order']", form)
  .snapshotItem(0);
  input_order.style.visibility = "hidden";
  var input_transfer = xpath_get("input[@class='transfer']", form);
  for(var i in [0, 1])
    input_transfer.snapshotItem(i).style.visibility = "";
}

/**
 * Retrieve current istance being tracked.
 */
function get_instance(){
  var select = document.getElementById("instance");
  return select.value;
}

/**
 * Remove tracks from the main page table, but do NOT remove
 * the table headers
 */
function clear_results(){
  var table = document.getElementById("history");
  var tbody = xpath_get("tbody", table).snapshotItem(0);
  var tbody_children = xpath_get("tbody/*[position() > 1]", table);
  for(var i=0; i<tbody_children.snapshotLength; i++){
    tbody.removeChild(tbody_children.snapshotItem(i));
  }

  xpath_get("tr[@class='headers']", tbody)
    .snapshotItem(0).style.visibility = "hidden";

}
/**
 * Nullify curreny instance and triggers history for newly
 * selected one.
 */
function change_instance(){
  /* Restore values.  Changing instance should have
   * the same effect of reloading the whole page.  */
  START = 0;
  LAST = 0;
  clear_results();

  /* Remove error info bar, if any exist.  */
  var info_bar = document.getElementById("information-bar");
  info_bar.style.visibility = "hidden"; 

  get_history(false, fill_table);
}

/**
 * If 'scroll' is true, the logic tries to retrieve the
 * "next page" of all the proposals known to the merchant.
 * Otherwise, it gets the merchant's history from the beginning
 * of their business.
 *
 * 'cb' is a UI transforming function.  Typically, it is set
 * to 'fill_table()'.
 */
function get_history(scroll, cb){
  SCROLL = true;
  var qs = `/history?instance=${get_instance()}&delta=${DELTA}`;
  if(scroll){
    START = LAST;
    qs += `&start=${START}`;
  }
  /* Will be untoggled by the 'cb' */
  toggle_loader();
  var req = new XMLHttpRequest();
  req.open("GET", qs, true);
  req.onload = function(){
    if(4 == req.readyState){
      if(200 == req.status){
        var history = JSON.parse(req.responseText); 
        if(!history){
          console.log("Got invalid JSON");
          return;
        }
        if (0 == history.length){
          show_warning("No records found!"); 
          return;
        }
        if(0 < history.length){
          console.log(history);
          LAST = history[history.length - 1].row_id;
          cb(history);
        }
      }
      else{
        console.log("error: status != 200");
        console.log("response", req.responseText);
        show_error(req.responseText, true);
      }
    }
  }
  req.send();
}

document.addEventListener
  ("DOMContentLoaded",
   function(){
     get_history(false, fill_table);});

document.addEventListener
  ("scroll", function(){
  /* If page bottom is hit */
  if((window.innerHeight + window.scrollY
       >= document.body.offsetHeight) && SCROLL)
    get_history(true, fill_table);
  });

/* Close dialog on ESC press */
document.onkeydown = function(e) {
  if(!e)
    e = event;
  if(e.keyCode == 27){
    close_popup();
  }
}

if (typeof(module) != "undefined"){
  module.exports.track_transfer = track_transfer;
  module.exports.track_order = track_order;
}