{% extends 'base.html' %}

{% block title %}Bookmarks{% endblock %}
{% block header %}Bookmarks{% endblock %}

{% block body %}

<h1>{{ book.title }}</h1>

<table id="bookmarkstable" class="table dataTable stripe">
  <thead>
    <tr>
      <th style="text-align: left">Page</th>
      <th style="text-align: left">Description</th>
      <th style="text-align: left">Actions</th>
    </tr>
  </thead>
</table>

<!-- the config widget for datatables.  Moved into the datatables table footer during setup. -->
<div id="datatables_config_widget">
  <img
    src="{{ url_for('static', filename='icn/settings-gear-icon.svg') }}"
    title="configuration"
    id="datatables_config_toggle"
    style="width: 1rem"
    />
</div>

<div id="datatables_config_items" style="display: none;"></div>

<p>Return to <a href="/read/{{ book.id }}">{{ book.title }}</a></p>

<script>
  var bookmark_listing_table;
  let setup_bookmark_datatable = function(initial_search) {
    bookmark_listing_table = $('#bookmarkstable').DataTable({
      layout: {
        topStart: 'pageLength',
        topEnd: [
          'search'
        ],
        bottomStart: [
          function() {
            return $('#datatables_config_widget');
          },
          {
            info: {
              callback: function (s, start, end, max, total, result) {
                return `${start} to ${end} of ${max}`;
              }
            }
          },
          'buttons'
        ],
        bottomEnd: 'paging'
      },
      columns: [
        { name: "TxOrder", data: "TxOrder", width: "5%" },
        { name: "TbTitle", width: "70%", render: render_page_link },
        { data: null, width: "15%", searchable: false, orderable: false, render: render_bookmark_actions },
      ],
      buttons: [
        {
          extend: 'colvis'
        }
      ],
      responsive: true,
      select: false,
      lengthMenu: [ 10, 25, 50 ],
      pageLength: 25,
      paging: true,
      info: true,
      processing: true,
      serverSide: true,
      stateSave: true,
      searching: true,
      search: { search: initial_search },
      ajax: {
        url: "/bookmarks/{{book.id}}/datatables",
        type: "POST",
        dataType: "json",
      }
    })
  }

  let move_datatables_controls_to_config_widget = function() {
    const widget = $('#datatables_config_items');
    const append_children = [ '.dt-buttons', '.dt-length' ];
    for (let c of append_children) {
      const el = $(`div${c}`);
      el.css({ padding: '0.2rem', margin: '0rem', display: 'inline' });
      widget.append(el);
    }
  }

  $(document).ready(function () {
    setup_bookmark_datatable("{{ initial_search or '' }}");
    move_datatables_controls_to_config_widget();

    $("#datatables_config_toggle").click(function() {
      $("#datatables_config_items").toggle();
    });
  });

  const edit_bookmark = async function(e) {
    let title = e.dataset.title;
    const new_title = prompt("Update the bookmark description.", title);

    if (new_title) {
      await fetch("/bookmarks/edit", {
        method: "POST",
        cache: "no-cache",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          bookmark_id: e.dataset.bookmark_id,
          title: title,
          new_title: new_title,
        })
      }).then((resp) => resp.json()).then((json) => {
        if (json?.success) {
          // TODO: fix this hacky page reload
          window.location = ""
        } else {
          alert(`Unable to edit bookmark. ${json?.reason || "Unknown reason"}`);
        }
      })
    }
  }

  const delete_bookmark = async function(e) {
    let confirmed = confirm("Delete bookmark?")
    if (confirmed) {
      await fetch("/bookmarks/delete", {
        method: "POST",
        cache: "no-cache",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          bookmark_id: e.dataset.bookmark_id,
          title: e.dataset.title,
        })
      }).then((resp) => resp.json()).then((json) => {
        if (json?.success) {
          // TODO: fix this hacky page reload
          window.location = ""
        } else {
          alert(`Unable to delete bookmark. ${json?.reason || "Unknown reason"}`);
        }
      })

    }
  }

  let render_bookmark_actions = function(data, type, row, meta) {
    const links = [];
    const make_link = function(label, func) {
      const s = `<a href="#" data-bookmark_id="${row['TbID']}" data-title="${row['TbTitle']}" onclick="${func}(this)">${label}</a>`;
      links.push(s);
    };

    make_link('Edit', "edit_bookmark", row);
    make_link('Delete', "delete_bookmark", row);

    return `<div class="book-action-dropdown"><span>&hellip;</span>
      <div class="book-action-dropdown-content">${links.join('')}</div>
    </div>`;
  };

  const render_page_link = function(data, type, row, meta) {
    page_num = row['TxOrder'];
    return `<a href=/read/{{book.id}}/page/${page_num}>${row['TbTitle']}</a>`
  }

  /**
   * Clearing the state is required for acceptance tests,
   * because otherwise state is accidentally applied to
   * following tests, messing up test results.
   * I tried various things such as setting and clearing
   * the filter input box, but this was the only method
   * that worked reliably.
   * This is called from the lute_test_client.py.
   */
  function clear_datatable_state() {
    bookmark_listing_table.state.clear();
  }
</script>

{% endblock %}
