{% extends "base.html" %}


{% block content %}

<div class="table-responsive">
  <table id="results" class="table">
      <thead>
          <tr>
              <th scope="col" class="order">Artist</th>
              <th scope="col" class="order">Song</th>
              <th scope="col" class="order">Rating</th>
              <th scope="col" class="order">Type</th>
              <th scope="col">Favorite</th>
          </tr>
      </thead>
      <tbody>
          {% if search_results %}
              {% for result in search_results.results %}
              <tr>
                  <td class="artist"><a href="/search?search_term={{ result.artist_name }}">{{ result.artist_name}}</a></td>
                  <td class="song"><a href="{{ result.tab_url}}">{{ result.song_name}} (ver {{result.version}})</a></td>
                  <td class="rating" data-value="{{ result.rating }}">{{ result.rating}}/5 ({{result.votes}})</td>
                  <td class="type">{{ result._type}}</td>
                  <td>
                    <span data-artist="{{result.artist_name}}" data-song="{{result.song_name}}" data-type="{{result._type}}" data-rating="{{result.rating}}" data-url="{{ result.tab_url }}" class="favorite">★</span>
                  </td>
              </tr>
              {% endfor %}
          {% endif %}
      </tbody>
  </table>
</div>

<div>
  {% if search_results %}
        <table>
            <tr>
                <td>
                {% if search_results.current_page > 1 %}
                    &nbsp;
                    <a href="/search?search_term={{ search_term }}&page={{ search_results.current_page - 1 }}" >⇐&nbsp;</a>
                {% else %}
                    &nbsp;⇐
                {% endif %}
                </td>
                {% for page in range(search_results.total_pages) %}
                <td>
                    <a    
                        {% if page + 1 != search_results.current_page %}
                            href="/search?search_term={{ search_term }}&page={{ page + 1 }}"
                        {% endif %}
                    >{{ page + 1 }}
                    </a>
                </td>
                {% endfor %}
                <td>
                {% if search_results.current_page < search_results.total_pages %}
                    <a href="/search?search_term={{ search_term }}&page={{ search_results.current_page + 1 }}" >&nbsp;⇒</a>
                    &nbsp;
                {% else %}
                    &nbsp;⇒
                {% endif %}
                </td>
            </tr>
        </table>
  {% endif %}
</div>

<details><summary>Advanced</summary>
  <strong class="d-block">Export favorites</strong>
  <button type="button" class="btn btn-secondary" onclick="exportFavorites()">Export</button><br/>
  <strong class="mt-3 d-block">Import favorites</strong>
<input type="file" class="form-control" onchange="importFavorites(this)" />
</details>

<script>

    if (window.location.pathname === "/") {

        const favorites = JSON.parse(localStorage.getItem("favorites")) || {};
        const resultsBody = document.querySelector('#results tbody');

        Object.values(favorites).forEach(song => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${song.artist_name}</td>
                <td class="song">
                    <a href="${song.tab_url}">${song.song}</a>
                </td>
                <td>${song.rating}</td>
                <td>${song.type}</td>
                <td><span data-artist="${song.artist_name}" data-song="${song.song}" data-type="${song.type}" data-rating="${song.rating}" data-url="${song.tab_url}" class="favorite">★</span></td>
            `;
            resultsBody.appendChild(row);
        });
    }

  function exportFavorites() {
    const blob = new Blob([localStorage.getItem("favorites")], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "freetar-favorites.json";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  function importFavorites(input) {
    const file = input.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function (e) {
        const content = e.target.result;
        localStorage.setItem("favorites", content);
      };
      reader.readAsText(file);
      location.reload();
    }
  }
</script>

<script>
    const favoritesData = JSON.parse(localStorage.getItem("favorites")) || {};
    const favorites_url = Object.keys(favoritesData);
    for (const fav of document.querySelectorAll('.favorite')) {
      if (favorites_url.includes(fav.getAttribute('data-url').split("?")[0])) {
        fav.style.color = "#ffae00";
      }
    } 

    // Add sorting to the table
    // taken from https://stackoverflow.com/a/70024272
    function table_sort() {
        console.log('Running table sort code')
        const styleSheet = document.createElement('style')
        styleSheet.innerHTML = `
        .order-inactive span {
            visibility:hidden;
        }
        .order-inactive:hover span {
            visibility:visible;
        }
        .order-active span {
            visibility: visible;
        }
        `
        document.head.appendChild(styleSheet)

        document.querySelectorAll('th.order').forEach(th_elem => {
            let asc = true
            const span_elem = document.createElement('span')
            span_elem.style = "font-size:0.8rem; margin-left:0.5rem"
            span_elem.innerHTML = "▼"
            th_elem.appendChild(span_elem)
            th_elem.classList.add('order-inactive')

            const index = Array.from(th_elem.parentNode.children).indexOf(th_elem)
            th_elem.addEventListener('click', (e) => {
                document.querySelectorAll('th.order').forEach(elem => {
                    elem.classList.remove('order-active')
                    elem.classList.add('order-inactive')
                })
                th_elem.classList.remove('order-inactive')
                th_elem.classList.add('order-active')

                if (!asc) {
                    th_elem.querySelector('span').innerHTML = '▲'
                } else {
                    th_elem.querySelector('span').innerHTML = '▼'
                }
                const arr = Array.from(th_elem.closest("table").querySelectorAll('tbody tr'))
                arr.sort((a, b) => {
                    const a_val = a.dataset.value || a.children[index].innerText
                    const b_val = b.dataset.value || b.children[index].innerText
                    return (asc) ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)
                })
                arr.forEach(elem => {
                    th_elem.closest("table").querySelector("tbody").appendChild(elem)
                })
                asc = !asc
            })
        })
    }
    table_sort()
</script>

{% endblock %}