{% load bootstrap4 tom_overrides %} {% include 'tom_dataproducts/partials/js9_scripts.html' %}
<h4>Data</h4>
<div class="row g-3">
  <div class="col-12">
    <div class="alert alert-info" role="alert">
      You can <strong>view files in JS9</strong> or
      <strong>send them to Astro Data Lab</strong> using the "Actions" dropdown. To send
      files, make sure your
      <a href="{% url 'user-list' %}" class="alert-link">Astro Data Lab credentials</a>
      are set up.
    </div>
  </div>
  <div class="col-lg-6 col-12 offset-lg-6">
    <input
      type="text"
      class="form-control"
      id="manageDataFileSearch"
      placeholder="Type to filter file names..." />
  </div>

  <div class="col-12">
    <div style="overflow-y: auto; height: 600px">
      <table class="table table-striped">
        <thead>
          <tr>
            <!-- <th></th> -->
            <th></th>
            <th>Filename</th>
            <th>Type</th>
            <!-- <th>Share</th> -->
            <th></th>
          </tr>
        </thead>
        {% define_data_product_type products %}
        <tbody id="manageDataTBody">
          {% for product in products %}
          <tr data-file="{{ product.product_id }}">
            <!-- {% if not product.featured %}
            <td><a href="{% url 'tom_dataproducts:feature' pk=product.id %}?target_id={{ target.id }}" title="Make Featured Image" class="btn btn-primary">Feature</a></td>
            {% else %}
            <td><span class="btn btn-secondary active featured">Featured</span></td>
            {% endif %} -->
            <td>
              <div class="dropdown">
                <button
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false">
                  <span class="button-text">Actions</span>
                  <span
                    class="spinner-border spinner-border-sm d-none"
                    role="status"
                    aria-hidden="true"></span>
                </button>
                <ul
                  class="dropdown-menu"
                  data-url="{{ product.data.url }}"
                  data-id="{{ product.id }}">
                  {% if 'fits' in product.get_file_name or product.data_product_type == 'fits_file' %}
                  <li>
                    <button type="button" class="dropdown-item" data-action="js9">
                      View with JS9
                    </button>
                  </li>
                  {% endif %}
                  <li>
                    <button
                      type="button"
                      class="dropdown-item"
                      data-action="astroDatalab">
                      Send to Astro Data Lab
                    </button>
                  </li>
                </ul>
              </div>
            </td>
            <td>
              <a href="{{ product.data.url }}" target="_blank"
                >{{ product }}</a
              >
            </td>
            <td>
              {% if product.data_product_type %} {{ product.get_type_display }} {% endif %}
            </td>
            <!-- <td>
              {% if sharing_destinations %}
                <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#share-{{ forloop.counter }}">Share</button>
              {% else %}
                <p>
                  <a href="https://tom-toolkit.readthedocs.io/en/stable/managing_data/tom_direct_sharing.html"
                    target="_blank">Not Configured</a>.
                </p>
              {% endif %}
            </td> -->
            <td>
              <a
                href="{% url 'tom_dataproducts:delete' product.id %}"
                class="btn btn-danger"
                >Delete</a
              >
            </td>
          </tr>
          <!-- <tr id="share-{{ forloop.counter }}" class="collapse">
            <td colspan=100%>
              <form method="POST" action="{% url 'tom_dataproducts:share' dp_pk=product.id %}" enctype="multipart/form-data">
                {% csrf_token %}
                {% for hidden in data_product_share_form.hidden_fields %}
                  {{ hidden }}
                {% endfor %}
                <div class="form-row">
                  <div class="col-sm-12">
                    {% bootstrap_field data_product_share_form.share_title %}
                  </div>
                </div>
                <div class="form-row">
                  <div class="col-sm-12">
                    {% bootstrap_field data_product_share_form.share_message %}
                  </div>
                </div>
                <div class="form-row">
                  <div class="col-sm-4">
                    {% bootstrap_field data_product_share_form.share_destination %}
                  </div>
                  <div class="col-sm-2 offset-sm-1">
                    {% buttons %}
                      <input type="submit" class="btn btn-primary" value="Submit" name="share_dataproduct_form" style="position:absolute; bottom:1rem">
                    {% endbuttons %}
                  </div>
                </div>
              </form>
            </td>
          </tr> -->
          {% endfor %}
          <tr id="manageDataNoMatchesRow" style="display: none">
            <td colspan="6" class="text-center">No matches found...</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    // Get references to the search input and the table body.
    const searchInput = document.getElementById("manageDataFileSearch");
    const tableBody = document.getElementById("manageDataTBody");
    const noMatchesRow = document.getElementById("manageDataNoMatchesRow");

    // Add an input event listener to the search field so the table updates as the user types.
    searchInput.addEventListener("input", () => {
      const query = searchInput.value.toLowerCase().trim();
      // Select all table rows that have a "data-file" attribute.
      const rows = tableBody.querySelectorAll("tr[data-file]");

      // Loop through each row and determine if it should be shown or hidden based on the query.
      let visibleCount = 0;
      rows.forEach((row) => {
        let fileName = row.getAttribute("data-file").toLowerCase();
        if (fileName.includes(query)) {
          row.style.display = "";
          visibleCount++;
        } else {
          row.style.display = "none";
        }
      });
      // If no rows are visible, show the "No matches found" row. Otherwise hide it.
      noMatchesRow.style.display = visibleCount === 0 ? "" : "none";
    });

    // Event listener for handling button actions inside the table body.
    tableBody.addEventListener("click", async (event) => {
      const button = event.target.closest("button[data-action]");

      if (!button) return;

      const { action } = button.dataset;
      const listItem = button.closest("ul.dropdown-menu");

      if (!listItem) return;

      const { url, id } = listItem.dataset;

      // Find the main dropdown button.
      const dropdown = button.closest(".dropdown");
      const mainButton = dropdown.querySelector(".btn-secondary");
      const buttonText = mainButton.querySelector(".button-text");
      const spinner = mainButton.querySelector(".spinner-border");

      // Define available actions with corresponding function calls.
      const actions = {
        js9: () => openJS9Window(url),
        astroDatalab: async () => {
          // Hide dropdown menu.
          const bsDropdown = bootstrap.Dropdown.getOrCreateInstance(mainButton);
          bsDropdown.hide();
          buttonText.classList.add("d-none");
          spinner.classList.remove("d-none");
          mainButton.disabled = true;
          try {
            await sendToAstroDataLab(id);
            buttonText.classList.remove("d-none");
            buttonText.textContent = "Sent";
            spinner.classList.add("d-none");
          } catch (error) {
            buttonText.classList.remove("d-none");
            buttonText.textContent = "Failed";
            spinner.classList.add("d-none");
          } finally {
            // Reset the button text when finished.
            setTimeout(() => {
              mainButton.disabled = false;
              buttonText.textContent = "Actions";
            }, 3000);
          }
        },
      };

      // Call the function if it exists.
      await actions[action]?.();
    });

    /**
     * Sends a file to Astro DataLab.
     * @param {string} id - The unique identifier of the file.
     * @returns {Promise<void>} - Resolves when the request is completed.
     */
    const sendToAstroDataLab = async (id) => {
      const url = `/api/astrodatalab/`;

      const response = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": "{{ csrf_token }}",
        },
        credentials: "same-origin",
        body: JSON.stringify({ data_product: id }),
      });
      if (!response.ok || response.status !== 201) {
        const data = await response.json();
        throw new Error(`Sending to Astro Data Lab failed: ${data.detail}`);
      }
      // Successfully sent to Astro Data Lab.
      const data = await response.json();
      console.log("Success:", data);
    };
  });
</script>