{% extends "base.html" %}
{% load static %}
{% load hy %}
{% block content %}
  <script src="{% static 'js/chart.js' %}"></script>
  <script>
    function addTag(value) {
      var inputTags = document.getElementById('tags');
      var btiInstance = inputTags.BulmaTagsInput();
      btiInstance.add(value);
    }
    function delTag(value) {
      var inputTags = document.getElementById('tags');
      var btiInstance = inputTags.BulmaTagsInput();
      btiInstance.remove(value);
    }
    function toggleTag(field, value) {
      var queryElement = document.getElementById('query');
      var tagText = `${field}: ${value}`;
      var present = true;
      if (present == true) {
        var toAppend = ` AND ${field}: "${value}"`;
        var toRemove = `${field}: "${value}"`;
        var tagText = `${field}: ${value}`;
      } else {
        var toAppend = ` AND NOT ${field}: "${value}"`;
        var toRemove = `NOT ${field}: "${value}"`;
      }
      if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
        addTag(tagText);
      } else {
        delTag(tagText);
      }
    }
    function populateSearch(field, value, fromTag=false) {
      var queryElement = document.getElementById('query');
      var present = true;
      if (present == true) {
        var toAppend = ` AND ${field}: "${value}"`;
        var toRemove = `${field}: "${value}"`;
        var tagText = `${field}: ${value}`;
      } else {
        var toAppend = ` AND NOT ${field}: "${value}"`;
        var toRemove = `NOT ${field}: "${value}"`;
      }
      if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
        
        if (fromTag) {
          queryElement.value+=toAppend;
        } else {
          queryElement.value+=toAppend;
        }
      } else {
          if (fromTag) {
            queryElement.value = queryElement.value.replaceAll(toAppend, "");
            queryElement.value = queryElement.value.replaceAll(toRemove, "");
          } else {
          }
      }
      if (field == "src") {
        document.getElementById("source").selectedIndex = 0;
      }
      if (queryElement.value.startsWith(" AND ")) {
        queryElement.value = queryElement.value.replace(" AND ", "");
      }
      htmx.trigger("#search", "click");
    }
  </script>
  <div>
    <form method="POST" hx-post="{% url 'search_drilldown' %}"
    hx-trigger="change"
    hx-target="#results"
    hx-swap="innerHTML"
    hx-indicator="#spinner">
      {% csrf_token %}

      <div class="columns">
        <div class="column">
          <div class="field has-addons">
            <div class="control is-expanded has-icons-left">
              <input
              hx-post="{% url 'search_drilldown' %}"
              hx-trigger="keyup changed delay:200ms"
              hx-target="#results"
              hx-swap="innerHTML" id="query" name="query" class="input" type="text" placeholder="msg: science AND nick: BillNye AND channel: #science">
              <span class="icon is-small is-left">
                <i class="fas fa-magnifying-glass"></i>
              </span>
            </div>
            <div class="control">
              <div class="field">
                <button
                  id="search"
                  class="button is-info is-fullwidth"
                  hx-post="{% url 'search_drilldown' %}"
                  hx-trigger="click"
                  hx-target="#results"
                  hx-swap="innerHTML">
                  Search
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="column is-3">
          <div class="nowrap-parent">
            <div
              {{ hy }} = "on click toggle .is-hidden on #options"
              class="button is-light has-text-link is-right nowrap-child">
              Options
            </div>
            <div class="nowrap-child">
              <span id="spinner" class="button is-light has-text-link is-loading htmx-indicator">Static</span>
            </div>
          </div>
        </div>
      </div>
      <div id="options" class="box is-hidden">
        <div class="columns is-multiline">
          <div class="column is-narrow">
            <div class="field has-addons">
              <div class="control has-icons-left">
                <span class="select">
                  <select name="size">
                    {% for size in sizes %}
                      <option value="{{ size }}">{{ size }}</option>
                    {% endfor %}
                  </select>
                  <span class="icon is-small is-left">
                    <i class="fas fa-magnifying-glass"></i>
                  </span>
                </span>
              </div>
              <p class="control">
                <a class="button is-static">
                  results
                </a>
              </p>
            </div>
          </div>
          <div class="column is-narrow">
            <div class="field has-addons">
              <div class="control has-icons-left">
                <span class="select">
                  <select id="source" name="source">
                    <option selected value="all">All</option>
                    <option value="irc">IRC</option>
                    <option value="dis">Discord</option>
                  </select>
                  <span class="icon is-small is-left">
                    <i class="fas fa-magnifying-glass"></i>
                  </span>
                </span>
              </div>
              <p class="control">
                <a class="button is-static">
                  source
                </a>
              </p>
            </div>
          </div>
          <div class="column is-narrow">
            <div id="sentiment">
              <div class="field has-addons">
                <div class="control">
                  <input disabled="undefined" name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1" value="0" step="0.05" type="range">
                  <output for="sliderWithValue" class="slider-output">0</output>
                  <script>bulmaSlider.attach();</script>
                </div>
                <p class="control">
                  <a class="button is-static">
                    sentiment
                  </a>
                </p>
              </div>
              <div class="control">
                <label class="radio button has-text-link">
                  <input type="radio" value="below" name="sentiment-method">
                  <span class="icon" data-tooltip="Below">
                    <i class="fa-solid fa-face-frown"></i>
                  </span>
                </label>
                <label class="radio button has-text-link is-hidden">
                  <input type="radio" value="exact" name="sentiment-method">
                  <span class="icon" data-tooltip="Exact">
                    <i class="fa-solid fa-face-smile"></i>
                  </span>
                </label>
                <label class="radio button has-text-link">
                  <input type="radio" value="above" name="sentiment-method">
                  <span class="icon" data-tooltip="Above">
                    <i class="fa-solid fa-face-smile"></i>
                  </span>
                </label>
                <label class="radio button has-text-link">
                  <input type="radio" value="nonzero" name="sentiment-method">
                  <span class="icon" data-tooltip="Nonzero">
                    <i class="fa-solid fa-face-meh-blank"></i>
                  </span>
                </label>
              </div>
            </div>

            <label class="checkbox">
              <input type="checkbox" name="check-sentiment"
                _="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
                Check sentiment
            </label>
          </div>
          <div class="column is-narrow">
            <div id="date">
              <div class="field">
                <div class="control">
                  <input type="date" name="dates">
                  <script>
                    var options = {
                      "type": "datetime",
                      "isRange": true,
                      "color": "info",
                      "validateLabel": "Save",
                      "dateFormat": "yyyy-MM-dd",
                    };
                    // Initialize all input of type date
                    var calendars = bulmaCalendar.attach('[type="date"]', options);

                    // Loop on each calendar initialized
                    for(var i = 0; i < calendars.length; i++) {
                      // Add listener to select event
                      calendars[i].on('save', date => {
                        htmx.trigger("#search", "click");
                      });
                    }
                  </script>
                </div>
              </div>
              <div class="control">
                <label class="radio button has-text-link">
                  <input type="radio" value="desc" name="sorting" checked>
                  <span class="icon" data-tooltip="Sort descending">
                    <i class="fa-solid fa-sort-down"></i>
                  </span>
                </label>
                <label class="radio button">
                  <input type="radio" value="asc" name="sorting">
                  <span class="icon" data-tooltip="Sort ascending">
                    <i class="fa-solid fa-sort-up"></i>
                  </span>
                </label>
                <label class="radio button">
                  <input type="radio" value="none" name="sorting">
                  <span class="icon" data-tooltip="No sort">
                    <i class="fa-solid fa-sort"></i>
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="is-hidden"></div>
    </form>
  </div>
  <div class="block">
    <input id="tags" class="input" type="tags" placeholder="Add query" value="">
    <script>
      var inputTags = document.getElementById('tags');
      new BulmaTagsInput(inputTags);
      inputTags.BulmaTagsInput().on('before.add', function(item) {
        if (item.includes(": ")) {
          var spl = item.split(": ");
        } else {
          var spl = item.split(":");
        }
        var field = spl[0];
        try {
          var value = JSON.parse(spl[1]);
        } catch {
          var value = spl[1];
        }
        populateSearch(field, value, fromTag=true);
        return `${field}: ${value}`;
      });
      inputTags.BulmaTagsInput().on('after.remove', function(item) {
        var spl = item.split(": ");
        var field = spl[0];
        try {
          var value = JSON.parse(spl[1]);
        } catch {
          var value = spl[1];
        }
        populateSearch(field, value, fromTag=true);
      });
    </script>
  </div>
  <div class="block">
    <div id="results">
    </div>
  </div>
  <div id="modals-here">
  </div>
{% endblock %}