{% extends 'base.html' %}

{% block title %}Terms{% endblock %}
{% block header %}Terms{% endblock %}

{% block body %}

<p>
  <img id="showHideFilters" src="{{ url_for('static', filename='icn/plus-button.png') }}" />
  Filters
</p>
<div id="filterControls" style="display: none; margin-left: 20px;">
  <table>
    <tr>
      <td>Language</td>
      <td>
        <select id="filtLanguage">
          {% for langopt in language_options %}
          <option value={{ langopt[0] }}>{{ langopt[1] }}</option>
          {% endfor %}
        </select>
      </td>
    <tr>
      <td>Parent terms only</td>
      <td>
        <input id="filtParentsOnly" type="checkbox" />
      </td>
    </tr>
    <tr>
      <td>Age (days since created)</td>
      <td>
        <input id="filtAgeMin" style="width: 50px;" type="text" placeholder="min" />
        to
        <input id="filtAgeMax" style="width: 50px;" type="text" placeholder="max" />
      </td>
    </tr>
    <tr>
      <td>Status range</td>
      <td>
        <select id="filtStatusMin">
          <option value="0" selected>Unknown</option>
          <option value="1">New (1)</option>
          <option value="2">New (2)</option>
          <option value="3">Learn (3)</option>
          <option value="4">Learn (4)</option>
          <option value="5">Learned</option>
          <option value="99">Well Known</option>
        </select>
        to
        <select id="filtStatusMax">
          <option value="0">Unknown</option>
          <option value="1">New (1)</option>
          <option value="2">New (2)</option>
          <option value="3">Learn (3)</option>
          <option value="4">Learn (4)</option>
          <option value="5">Learned</option>
          <option value="99" selected>Well Known</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Include Ignored</td>
      <td>
        <input id="filtIncludeIgnored" type="checkbox" />
      </td>
    </tr>
  </table>
  <button id="clearFilters">Clear all</button>
  <br />
</div>


<div id="term_actions" class="term-action-dropdown" onmouseover="activate_term_actions();">
  <button class="term-action-button">Actions</button>
  <div class="term-action-content">
    <a href="/term/new">Create new</a>
    <a id="term_action_bulk_edit" class="bulkActionLink" href="#" onclick="show_bulk_edit_form(event, this);">Bulk edit</a>
    <a id="term_action_bulk_delete" class="bulkActionLink" href="#" onclick="bulk_delete(event);">Delete selected</a>
    <a id="term_action_export_csv" href="#" onclick="export_csv(event);">Export CSV</a>
  </div>
</div>

<div id="bulkEditDiv" class="actionDiv" style="display: none;">
  <form id="term-form" name="term_bulk_form" method="POST" action="/term/bulk_edit_from_index">
    <div id="term-bulk-form-fields">
      {% include "term/_bulk_edit_form_fields.html" %}
      <div id="term-button-container">
        <button id="btnsubmit" type="submit" class="btn btn-primary" onclick="set_bulk_wordids(); return true;">Save</button>
        <button id="btncancel" type="button" class="btn btn-secondary" onclick="hide_bulk_edit_form(); return false;">Cancel</button>
      </div>
    </div>
  </form>
</div>

<table id="termtable" class="table dataTable stripe">
  <thead>
    <tr>
      <th style="width: 20px;"><input type="checkbox" id="chkAll" onclick="handleChkAll()"></th>
      <!-- adding text-align because sometimes datatables seemed to align them to right. -->
      <th style="text-align: left">Term</th>
      <th style="text-align: left">Parent</th>
      <th style="text-align: left">Translation</th>
      <th style="text-align: left">Language</th>
      <th style="text-align: left">Tags</th>
      <th style="text-align: left">Status</th>
      <th style="text-align: left">Added</th>
      <th style="text-align: left">TermID</th>
      <th style="text-align: left">LanguageID</th>
    </tr>
  </thead>
</table>

<script>

  let setup_term_datatable = function(initial_search) {
    var table = $('#termtable').DataTable({
      layout: {
        topStart: 'pageLength',
        topEnd: 'search',
        bottomStart: ['info', 'buttons'],
        bottomEnd: 'paging'
      },
      responsive: true,
      select: false,
      lengthMenu: [ 25, 50, 100, 500, 1000 ],

      // The button is included but the div.dt-buttons is hidden,
      // so that the button actions can be trigged by a link
      // in the "Actions" list.
      buttons: [
         {
           extend: 'download',
           url: '/term/export_terms',
           text: 'Export CSV',
         },
      ],
      paging: true,
      info: true,
      searching: true,
      processing: true,
      serverSide: true,
      stateSave: true,
      select: {
        style: 'multi',
        selector: 'td:first-child input[type="checkbox"]',
        className: 'row-selected'
      },
      search: { search: initial_search },
      columns: [
        { searchable: false, orderable: false, render: render_checkbox },
        { name: "WoText", render: render_text },
        { name: "ParentText", data: "ParentText" },
        { name: "WoTranslation", width: "40%", searchable: true, render: render_translation },
        { name: "LgName", data: "LgName" },
        { name: "TagList", data: "TagList" },
        { name: "StID", render: render_status },
        { name: "WoCreated", render: render_date_created },
        { name: "WoID", data: "WoID", visible: false },
        { name: "LgID", data: "LgID", visible: false },
      ],

      // Ajax call
      ajax: {
        url: '/term/datatables',
        type: "POST",

        // Additional filters.  func calls are required to get the
        // current filter field values.  These are included in the
        // data sent to the controller, and are used by the
        // TermRepository.
        data: {
          filtLanguage: () => $('#filtLanguage').val(),
          filtParentsOnly: () => $('#filtParentsOnly').prop('checked'),
          filtAgeMin: () => $('#filtAgeMin').val(),
          filtAgeMax: () => $('#filtAgeMax').val(),
          filtStatusMin: () => $('#filtStatusMin').val(),
          filtStatusMax: () => $('#filtStatusMax').val(),
          filtIncludeIgnored: () => $('#filtIncludeIgnored').prop('checked')
        },

        dataType: "json"
      },

    });
  } // end setup_term_datatable


  let render_text = function ( data, type, row, meta ) {
    return `<a href="/term/edit/${row['WoID']}">${row['WoText']}</a>`;
  };

  // Use the status ID for sorting, so Well Known comes after Learned (5),
  // but use the status text ("New (1)") for the cell display.
  let render_status = function ( data, type, row, meta ) {
    return row["StText"];
  };

  let render_checkbox = function (data, type, row, meta) {
    return `<input type="checkbox" class="chkWord" name="wordids" wordid="${row['WoID']}" langid="${row['LgID']}">`;
  };

  let render_translation = function ( data, type, row, meta ) {
    let tx = row["WoTranslation"] ?? '';
    tx = tx.replaceAll("\r\n", "<br />");
    let imgsrc = row["WiSource"] ?? '';
    if (imgsrc != '')
      imgsrc = `<img class="term-listing-image" style="margin-top: 5px;" src="${imgsrc}" />`;
    let ret = [ tx, imgsrc ].filter((s) => s != '');
    return ret.join('<br />');
  };

  let render_date_created = function (data, type, row, meta) {
    const dt = row["WoCreated"];
    const datepart = dt.split(' ')[0];
    return `<span title="${dt}">${datepart}</span>`;
  };


  let handleChkAll = function() {
    const v = $('#chkAll').prop('checked');
    $('.chkWord').each(function(i) {
      $(this).prop('checked', v);
    });
  }

  /** Deactivate term Actions, activate if they're possible. */
  function activate_term_actions() {
    const checked_count = $('.chkWord:checked').length;
    const lang_id = get_lang_id();
    let should_disable = (checked_count === 0 || lang_id == null);
    $(".bulkActionLink").toggleClass("actionDisabled", should_disable);
  }


  function show_bulk_edit_form(event, el, displaydiv, focusel) {
    event.preventDefault();
    if ($(el).hasClass("actionDisabled"))
      return;
    $(`#bulkEditDiv`).css("display", "block");
  }


  function hide_bulk_edit_form() {
    const f = $("#term-form");
    f.find("input, textarea, select").val("");
    f.find("input:checkbox, input:radio").prop("checked", false);
    $(`#bulkEditDiv`).css("display", "none");
  }

  // Return the clicked checkboxes' language ID,
  // or null if the lang id isn't the same for all.
  let get_lang_id = function() {
    let langids = [];
    $('.chkWord:checked').each(function(i) {
      langids.push($(this).attr('langid'));
    });
    const unique_langids = [...new Set(langids)];
    if (unique_langids.length == 1) {
      return unique_langids[0];
    }
    return null;
  }

  let _get_checked_wordids = function() {
    const wordids = [];
    $('.chkWord:checked').each(function(i) {
      wordids.push($(this).attr('wordid'));
    });
    return wordids;
  };

  function set_bulk_wordids() {
    $("#txtWordIds").val(_get_checked_wordids().join(","));
  }

  function bulk_delete(event) {
    event.preventDefault();
    if ($("#term_action_bulk_delete").hasClass("actionDisabled"))
      return;
    const checked = $('.chkWord:checked');
    const ids = checked.toArray().map(el => parseInt($(el).attr('wordid')));
    const t = (ids.length == 1) ? 'term' : 'terms';
    const resp = confirm(`Deleting ${ids.length} ${t}.  Continue?`);
    if (! resp)
      return;

    data = {
      wordids: ids
    };
    $.ajax({
      url: '/term/bulk_delete',
      method: 'POST',
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
      success: function(data) {
        location.reload();
      }
    });
  }


  /** Click the export button.
   * I'm doing this so that the Datatables "export" extension button
   * works out of the box, but the actual call to export the CSV
   * is in the "Actions" list.
   */
  function export_csv(event) {
    event.preventDefault();
    /*
    // TODO export_csv: only export selected/checked terms?
    const checked = $('.chkWord:checked');
    const ids = checked.toArray().map(el => parseInt($(el).attr('wordid')));
    */
    const export_button = $('.dt-button:contains("Export CSV")');
    if (export_button.length === 0) {
      throw new Error("Export CSV button not found");
    }
    export_button.click();
  };


  let handle_filter_update = function() {
    const store = {
      filtLanguage: $('#filtLanguage').val(),
      filtDisplay: $('#filterControls').css('display'),
      filtParentsOnly: $('#filtParentsOnly').prop('checked'),
      filtAgeMin: $('#filtAgeMin').val(),
      filtAgeMax: $('#filtAgeMax').val(),
      filtStatusMin: $('#filtStatusMin').val(),
      filtStatusMax: $('#filtStatusMax').val(),
      filtIncludeIgnored: $('#filtIncludeIgnored').prop('checked')
    };
    // console.log('saving: ' + JSON.stringify(store));
    sessionStorage.setItem('termtable_filters', JSON.stringify(store));
    $('#termtable').DataTable().draw();
  };


  let load_filters_from_storage = function() {
    fs = sessionStorage.getItem('termtable_filters');
    // console.log(fs);
    if (fs == null)
      return;
    store = JSON.parse(fs);
    $('#filterControls').css('display', store.filtDisplay);

    $('#showHideFilters').prop('src', "{{ url_for('static', filename='icn/minus-button.png') }}");
    $('#filtLanguage').val(parseInt(store.filtLanguage ?? '0'));
    $('#filtParentsOnly').prop('checked', store.filtParentsOnly ?? false);
    if ((store.filtAgeMin ?? '') != '')
      $('#filtAgeMin').val(parseInt(store.filtAgeMin));
    if ((store.filtAgeMax ?? '') != '')
    $('#filtAgeMax').val(parseInt(store.filtAgeMax));
    $('#filtStatusMin').val(parseInt(store.filtStatusMin ?? '1'));
    $('#filtStatusMax').val(parseInt(store.filtStatusMax ?? '99'));
    $('#filtIncludeIgnored').prop('checked', store.filtIncludeIgnored);
  };
  
  let handle_show_hide_filter_click = function() {
    const fc = $('#filterControls');
    const is_hidden = (fc.css('display') == 'none');
    const new_src = is_hidden ? "{{ url_for('static', filename='icn/minus-button.png') }}" : "{{ url_for('static', filename='icn/plus-button.png') }}";
    $('#showHideFilters').prop('src', new_src);
    handle_clear_filters();
    fc.css('display', is_hidden ? 'block' : 'none');
    handle_filter_update();
  };

  let handle_clear_filters = function() {
    $('#filtLanguage').val(0);
    $('#filtParentsOnly').prop('checked', false);
    $('#filtAgeMin').val('');
    $('#filtAgeMax').val('');
    $('#filtStatusMin').val(1);
    $('#filtStatusMax').val(99);
    $('#filtIncludeIgnored').prop('checked', false);
    handle_filter_update();
  };

  $(document).ready(function () {
    $('#showHideFilters').click(handle_show_hide_filter_click);
    $('#filtLanguage').change(handle_filter_update);
    $('#filtParentsOnly').change(handle_filter_update);
    $('#filtAgeMin').keyup(handle_filter_update);
    $('#filtAgeMax').keyup(handle_filter_update);
    $('#filtStatusMin').change(handle_filter_update);
    $('#filtStatusMax').change(handle_filter_update);
    $('#filtIncludeIgnored').change(handle_filter_update);
    $('#clearFilters').click(handle_clear_filters);

    load_filters_from_storage();

    // Setting up the datatable now, so the filters are
    // taken into account.
    setup_term_datatable("{{ initial_search or '' }}");
  });


</script>

{% endblock %}
