/**
 * renders an item update (an edit on an item) in HTML.
 */

var EditRenderer = {};

// main method: takes a DOM element and a list
// of edits to render there.
EditRenderer.renderEdits = function(edits, container) {
   for(var i = 0; i != edits.length; i++) {
      EditRenderer._renderItem(edits[i], container);
   }
}

/**************/
/*** ITEMS ****/
/**************/

EditRenderer._renderItem = function(json, container) {
  var subject = json;
  var statementGroups = null;
  var nameDescs = null;
  if (json) {
     subject = json.subject;
     statementGroups = json.statementGroups;
     nameDescs = json.nameDescs;
  }

  var item = $('<div></div>').addClass('wbs-item').appendTo(container);
  var inputContainer = $('<div></div>').addClass('wbs-item-input').appendTo(item);
  EditRenderer._renderEntity(json.subject, inputContainer);
  var right = $('<div></div>').addClass('wbs-item-contents').appendTo(item);

  // Terms
  if ((json.labels && json.labels.length) ||
      (json.descriptions && json.descriptions.length) ||
      (json.addedAliases && json.addedAliases.length)) {
    //$('<span></span>').addClass('wbs-namedesc-header')
    //    .text($.i18n._('wikidata-schema')["terms-header"]).appendTo(right);
    var termsContainer = $('<div></div>').addClass('wbs-namedesc-container')
        .appendTo(right);
    
    for(var i = 0; i != json.labels.length; i++) {
        EditRenderer._renderTerm("label", json.labels[i], termsContainer);
    }
    for(var i = 0; i != json.descriptions.length; i++) {
        EditRenderer._renderTerm("description", json.descriptions[i], termsContainer);
    }
    for(var i = 0; i != json.addedAliases.length; i++) {
        EditRenderer._renderTerm("alias", json.addedAliases[i], termsContainer);
    }

    // Clear the float
    $('<div></div>').attr('style', 'clear: right').appendTo(right);
  }

  // Statements
  if (json.addedStatementGroups && json.addedStatementGroups.length) {
    // $('<div></div>').addClass('wbs-statements-header')
    //        .text($.i18n._('wikidata-schema')['statements-header']).appendTo(right);
    var statementsGroupContainer = $('<div></div>').addClass('wbs-statement-group-container')
            .appendTo(right);
    for(var i = 0; i != json.addedStatementGroups.length; i++) {
       EditRenderer._renderStatementGroup(json.addedStatementGroups[i], statementsGroupContainer);
    }
  }
}

/**************************
 * NAMES AND DESCRIPTIONS *
 **************************/

EditRenderer._renderTerm = function(termType, json, container) {
  var namedesc = $('<div></div>').addClass('wbs-namedesc').appendTo(container);
  var type_container = $('<div></div>').addClass('wbs-namedesc-type').appendTo(namedesc);
  var type_span = $('<span></span>').appendTo(type_container)
        .text($.i18n._('wikidata-schema')[termType]);

  var right = $('<div></div>').addClass('wbs-right').appendTo(namedesc);
  var value_container = $('<div></div>').addClass('wbs-namedesc-value').appendTo(namedesc);
  EditRenderer._renderValue({datavalue:json,datatype:'monolingualtext'}, value_container); 
}

/********************
 * STATEMENT GROUPS *
 ********************/

EditRenderer._renderStatementGroup = function(json, container) {

  var statementGroup = $('<div></div>').addClass('wbs-statement-group').appendTo(container);
  var inputContainer = $('<div></div>').addClass('wbs-prop-input').appendTo(statementGroup);
  var right = $('<div></div>').addClass('wbs-right').appendTo(statementGroup);
  EditRenderer._renderEntity(json.property, inputContainer);

  var statementContainer = $('<div></div>').addClass('wbs-statement-container').appendTo(right);
  for (var i = 0; i != json.statements.length; i++) {
     EditRenderer._renderStatement(json.statements[i], statementContainer);
  }
}

/**************
 * STATEMENTS *
 **************/

EditRenderer._renderStatement = function(json, container) {
 
  var statement = $('<div></div>').addClass('wbs-statement').appendTo(container);
  var inputContainer = $('<div></div>').addClass('wbs-target-input').appendTo(statement);
  EditRenderer._renderValue(json.mainsnak, inputContainer);

  // add rank
  var rank = $('<div></div>').addClass('wbs-rank-selector-icon').prependTo(inputContainer);

  // add qualifiers...
  var right = $('<div></div>').addClass('wbs-right').appendTo(statement);
  var qualifierContainer = $('<div></div>').addClass('wbs-qualifier-container').appendTo(right);

  if (json.qualifiers) {
    for (var pid in json.qualifiers) {
      if (json.qualifiers.hasOwnProperty(pid)) {
        var qualifiers = json.qualifiers[pid];
        for (var i = 0; i != qualifiers.length; i++) {
          EditRenderer._renderSnak(qualifiers[i], qualifierContainer);
        }
      }
    }
  }

  // and references
  $('<div></div>').attr('style', 'clear: right').appendTo(statement);
  var referencesToggleContainer = $('<div></div>').addClass('wbs-references-toggle').appendTo(statement);
  var triangle = $('<div></div>').addClass('triangle-icon').addClass('pointing-right').appendTo(referencesToggleContainer);
  var referencesToggle = $('<a></a>').appendTo(referencesToggleContainer);
  right = $('<div></div>').addClass('wbs-right').appendTo(statement);
  var referenceContainer = $('<div></div>').addClass('wbs-reference-container').appendTo(right);
  referencesToggle.click(function () {
      triangle.toggleClass('pointing-down');
      triangle.toggleClass('pointing-right');
      referenceContainer.toggle(100);
  });
  referenceContainer.hide();

  if (json.references) {
      for (var i = 0; i != json.references.length; i++) {
        EditRenderer._renderReference(json.references[i], referenceContainer);
      }
  }
  EditRenderer._updateReferencesNumber(referenceContainer);
}

/*********************************
 * QUALIFIER AND REFERENCE SNAKS *
 *********************************/

EditRenderer._renderSnak = function(json, container) {

  var qualifier = $('<div></div>').addClass('wbs-qualifier').appendTo(container);
  var toolbar1 = $('<div></div>').addClass('wbs-toolbar').appendTo(qualifier);
  var inputContainer = $('<div></div>').addClass('wbs-prop-input').appendTo(qualifier);
  var right = $('<div></div>').addClass('wbs-right').appendTo(qualifier);
  var statementContainer = $('<div></div>').addClass('wbs-statement-container').appendTo(right);
  EditRenderer._renderEntity(json.full_property, inputContainer);
  EditRenderer._renderValue(json, statementContainer);
}

/**************
 * REFERENCES *
 **************/

EditRenderer._renderReference = function(json, container) {
  var reference = $('<div></div>').addClass('wbs-reference').appendTo(container);
  var referenceHeader = $('<div></div>').addClass('wbs-reference-header').appendTo(reference);
  var right = $('<div></div>').addClass('wbs-right').appendTo(reference);
  var qualifierContainer = $('<div></div>').addClass('wbs-qualifier-container').appendTo(right);

  for (var pid in json.snaks) {
    if (json.snaks.hasOwnProperty(pid)) {
      var snaks = json.snaks[pid];
      for(var i = 0; i != snaks.length; i++) {
          EditRenderer._renderSnak(snaks[i], qualifierContainer);
      }
    }
  }
}

EditRenderer._updateReferencesNumber = function(container) {
  var childrenCount = container.children().length;
  var statement = container.parents('.wbs-statement');
  var a = statement.find('.wbs-references-toggle a').first();
  a.html(childrenCount+$.i18n._('wikidata-schema')["nb-references"]);
}

/*******************
 * VALUE RENDERING *
 *******************/

EditRenderer._renderEntity = function(json, container) {
  var html = WarningsRenderer._renderEntity(json);
  $(html).appendTo(container);
}

EditRenderer._renderValue = function(json, container) {
  var input = $('<span></span>').appendTo(container);
  var mode = json.datatype;
  
  if (mode === "wikibase-item" || mode === "wikibase-property") {
    EditRenderer._renderEntity(json.datavalue, container);
  } else {
    var params = {
          action: 'wbformatvalue',
          generate: 'text/html',
          datavalue: JSON.stringify(json.datavalue),
          options: '{"lang":"'+$.i18n._('core-recon')["wd-recon-lang"]+'"}',
          format: 'json'
    };
    if ('property' in json) {
       params.property = json.property;
    } else {
       params.datatype = json.datatype;
    }
    $.get(
        'https://www.wikidata.org/w/api.php',
        params,
        function (data) {
           if('result' in data) {
              $('<span>'+data.result+'</span>').appendTo(container);
           }
        },
        'jsonp'
    );
  }

/*
if (mode === "time") {
    input.text(json.datavalue.value.time);
  } else if (mode === "globe-coordinate") {
    // TODO
  } else if (mode === "language") {
    // TODO
  } else if (mode === "monolingualtext") {
     input.remove();
     var inputContainerLanguage = $('<div></div>')
     .addClass('wbs-monolingual-container')
     .width('30%')
     .appendTo(container);
     var inputContainerValue = $('<div></div>')
     .addClass('wbs-monolingual-container')
     .width('70%')
     .appendTo(container);

     EditRenderer._renderValue({datatype:"language",datavalue:json.language}, inputContainerLanguage);
     EditRenderer._renderValue({datatype:"string",datavalue:{value:json.value}}, inputContainerValue);
   } else if (mode === "quantity") {
     input.remove();
     var inputContainerAmount = $('<div></div>')
     .addClass('wbs-quantity-container')
     .width('60%')
     .appendTo(inputContainer);
     var inputContainerUnit = $('<div></div>')
     .addClass('wbs-quantity-container')
     .width('40%')
     .appendTo(inputContainer);
   
     var amountValue = null;
     var unitValue = null;
 
     // TODO
     //EditRenderer._renderValue(inputContainerAmount, "amount", amountValue, propagateValue);
     // EditRenderer._renderEntity(  , inputContainerUnit);

   } else {
      input.text(json.datavalue.value);
   } */
}