{% from qiita_core.qiita_settings import qiita_config %}
{% extends sitebase.html %}

{%block head%}
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/sharing.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

    $("#search").keyup(function() {
      var new_value = $(this).val().replace('`', "'")
                                   .replace('~', "'")
                                   .replace('´', "'");
      $(this).val(new_value);
    });

    qiita_websocket.init(window.location.host + '{% raw qiita_config.portal_dir %}/study/list/socket/', error, error);
    qiita_websocket.add_callback('sel', show_alert);
    $("#redbiom-table").dataTable({
      "dom": '<"ps">lfr<t><"footer">ip',
      'footerCallback': function ( row, data, start, end, display ) {
        var api = this.api(), artifacts = 0, samples = 0;

        api.column(0).nodes().each(function (cell, i) {
          var elements = $(cell).children().children().children();
          var idx = elements.length - 1;
          var text = $(elements[idx]).text();
          elements = text.split(" | ");
          artifacts += parseInt(elements[0].split(": ")[1]);
          samples += parseInt(elements[1].split(": ")[1]);
        });

        $('.footer').addClass("col-md-12 text-right");
        if (artifacts == 0) {
          text = '';
        } else {
            text = 'Found ' + artifacts + ' artifacts with ' + samples + ' samples.';
        }
        $('.footer').html(text)
      },
      "columns": [
        { "orderable": false,       "width": "20%", "data": "artifact_biom_ids"},
        { "data": "study_title",    "width": "70%" },
        { "data": "study_abstract", "width": "0%" },
        { "data": "study_id",       "width": "10%" },
        { "data": "study_alias",    "width": "0%" }],
      columnDefs: [
        // {type:'natural', targets:[2,6,7]},
        {"targets": [ 2, 4 ], "visible": false},
        // render zero
        {"render": function ( data, type, row, meta ) {
          if (data !== null && data !== undefined){
            var artifacts = 0, unique_samples = {};
            for (var d in data) {
              if (data.hasOwnProperty(d)) {
                // to get only unique sample names we will create a dict
                // and then just get the keys; by creating a dict we are
                // avoiding to check if an element is already in the list
                var samples = data[d];
                for (var i = 0; i < samples.length; i++) {
                  if (! unique_samples[samples[i]] ) {
                    unique_samples[samples[i]] = true;
                  }
                }
                artifacts++;
              }
            }
            unique_samples = Object.keys(unique_samples);
            if (artifacts != 0) {
              return '<div class="container" style="max-width: 15em;">'+
                '<div class="row justify-content-md-center">' +
                  {% if current_user is not None %}
                    '<div class="col-md-12 text-center details-control">&nbsp;</div>' +
                  {% end %}
                  '<div class="col-md-12 text-center">' +
                    'Artifacts: ' + artifacts + ' | ' +
                    'Samples: ' + unique_samples.length +
                  '</div>' +
                '</div>' +
              '</div>';
            }
          }
          return 'No BIOMs';
        }, targets: [0]},
        // render the title cell
        {"render": function ( data, type, row, meta ) {
          {% if current_user is not None %}
            result = "<a target='_blank' href='{% raw qiita_config.portal_dir %}/study/description/" + row.study_id +
              "' id='study"+ meta.row +"-title'>"+ data +"</a>";
          {% else %}
             result = data
          {% end %}
            return result
        }, targets: [1]},
        ],
      "language": {
          "search": "Filter results by column data:",
          "loadingRecords": "Please wait - loading information ...",
          "zeroRecords": "  "
      },
  });

  // Add event listener for opening and closing details
  $('#redbiom-table tbody').on('click', 'div.details-control', function () {
      var table = $('#redbiom-table').DataTable();
      var tr = $(this).closest('tr');
      var row = table.row( tr );

      if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        // Open this row
        // modified from: https://jsfiddle.net/8rejaL88/2/
        tr.addClass('shown');
        row.child('<p><center><img src="{% raw qiita_config.portal_dir %}/static/img/waiting.gif" style="display:block;margin-left: auto;margin-right: auto"/></center></p>', 'no-padding' ).show();

        var artifact_biom_ids = row.data().artifact_biom_ids;
        var artifact_biom_ids_keys = []
        $.each(artifact_biom_ids, function(e){ artifact_biom_ids_keys.push(e) });
        $.post('/artifact/info/', {ids: artifact_biom_ids_keys })
          .done(function ( data ) {
            if (data['status']=='success') {
              $('td', row.child()).html(format_biom_rows(data.data, row.index(), true, samples=artifact_biom_ids)).show();
            } else {
              bootstrapAlert('ERROR: ' + data['msg'], "danger", 10000);
            }
          });
      }
  });

  $("#submitForm").submit(function(event){
    event.preventDefault();

    show_loading("redbiom-info", true);

    var search = $("#search").val();
    var search_on = $("#search_on").val();
    var redbiom_info = $('#redbiom-info');

    $.post("/redbiom/", {'search': search, 'search_on': search_on})
      .done(function ( data ){
        var redbiom_table = $('#redbiom-table').DataTable();
        // the next 4 lines reset the column filtering
        var placer = $(".ps");
        redbiom_table.column(3).search("").draw();
        redbiom_table.clear().draw();
        placer.empty();
        if(data.status == "error") {
          bootstrapAlert(data.message.replace("\n", "<br/>"), "danger");
        } else {
          if(data.message != ''){
            redbiom_info.html(
              `<div class="alert alert-warning alert-dismissible" role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <strong>Warning!</strong> ` + data.message + `</div><br/>`)
          } else if(data.data){
            redbiom_table.rows.add(data.data).draw();
            redbiom_info.html('');
          }
        }
      })
    .fail(function(response, status, error) {
      var text = 'The query response is larger than is currently allowed, please try another. <a href="https://github.com/biocore/qiita/issues/2312" target="_blank">Track progress on this issue.</a>';
      if (response.status != 504) {
        text = 'Status code: "' + response.status + '" - ' + error + '.<br/>Please send a screenshot to <a href="mailto:{% raw qiita_config.portal_dir %}">{% raw qiita_config.portal_dir %}</a>.';
      }
      redbiom_info.html(
        `<div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Error!</strong> ` + text + `</div><br/>`)
    })
    });
  });
</script>

{%end%}

{%block content%}
  <small>
    <!-- Date to be fixed once we fix: https://github.com/biocore/qiita/issues/2773 -->
    Redbiom only searches on public data. Last update: <i>{{latest_release}}</i>. Note that you will only be able to expand and add artifacts to analyses if you are signed into Qiita.
    <br/><br/>
    <a href="{% raw qiita_config.portal_dir %}/static/doc/html/redbiom.html" class="btn btn-info btn-sm" target="_blank">Help and examples?</a>
    <br/>
  </small>
  <br/>
  <form data-toggle="validator" role="form" id="submitForm">
    <div class="form-group row">
      <div class="col-xs-8">
        <input type="text" class="form-control" name="search" id="search" placeholder="Search" required>
      </div>
      <div class="col-xs-2">
        <select class="selectpicker form-control col-xs-2" name="search_on" id="search_on">
          <option value="metadata">Metadata</option>
          <option checked value="feature">Feature</option>
          <option checked value="taxon">Taxon</option>
        </select>
      </div>
      <div class="col-xs-1">
        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
      </div>
    </div>
  </form>
  <hr>

  <div class="row">
    <div class="col-md-12" id="redbiom-info"></div>
  </div>
  <div class="row">
    <table id="redbiom-table" class="table table-bordered gray-msg">
      <thead>
        <tr>
          <th>Expand for analysis (artifact count)</th>
          <th>Title</th>
          <th>Abstract</th>
          <th>Study ID</th>
          <th>Study Alias</th>
        </tr>
      </thead>
    </table>
  </div>

{% end %}