{% extends "base.html" %}
{% load static %}
{% load joinsep %}
{% block content %}
  <script src="{% static 'js/chart.js' %}"></script>
  <script>
    function setupTags() {
      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);
        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].trim();
        }
        populateSearch(field, value);
      });
    }
    function populateSearch(field, value) {
      var queryElement = document.getElementById('query');
      var present = true;
      if (present == true) {
        var combinations = [`${field}: "${value}"`,
                            `${field}: "${value}"`,
                            `${field}: ${value}`,
                            `${field}:${value}`,
                            `${field}:"${value}"`];
        var toAppend = ` AND ${field}: "${value}"`;
        // var toRemove = `${field}: "${value}"`;
        // var tagText = `${field}: ${value}`;
      } else {
        var combinations = [`NOT ${field}: "${value}"`,
                            `NOT ${field}: "${value}"`,
                            `NOT ${field}: ${value}`,
                            `NOT ${field}:${value}`,
                            `NOT ${field}:"${value}"`];
        // var toAppend = ` AND NOT ${field}: "${value}"`;
        // var toRemove = `NOT ${field}: "${value}"`;
      }
      var contains = combinations.some(elem => queryElement.value.includes(elem));
      if (!contains) {
          queryElement.value+=toAppend;
      } else {
        for (var index in combinations) {
          combination = combinations[index];
          queryElement.value = queryElement.value.replaceAll("AND "+combination, "");
          queryElement.value = queryElement.value.replaceAll(combination, "");
        }
          // queryElement.value = queryElement.value.replaceAll(toAppend, "");
          // queryElement.value = queryElement.value.replaceAll(toRemove, "");

      }
      // if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
      //   queryElement.value+=toAppend;
      // } else {
      //     queryElement.value = queryElement.value.replaceAll(toAppend, "");
      //     queryElement.value = queryElement.value.replaceAll(toRemove, "");

      // }
      if (field == "src") {
        document.getElementById("source").selectedIndex = 0;
      }
      if (queryElement.value.startsWith(" AND ")) {
        queryElement.value = queryElement.value.replace(" AND ", "");
      }
      if (queryElement.value.startsWith("AND ")) {
        queryElement.value = queryElement.value.replace("AND ", "");
      }
      htmx.trigger("#search", "click");
    }
  </script>
  <div>
    <form method="POST" hx-post="{% url 'home' %}"
          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 'home' %}"
                hx-trigger="keyup changed delay:200ms"
                hx-target="#results"
                hx-swap="innerHTML" id="query" name="query" value="{{ params.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 'home' %}"
                  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
              data-script="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 %}
                      {% if size == params.size %}
                        <option selected value="{{ size }}">{{ size }}</option>
                      {% else %}
                        <option value="{{ size }}">{{ size }}</option>
                      {% endif %}
                    {% 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">
                    {% if params.source == 'irc' %}
                      <option selected value="irc">IRC</option>
                    {% else %}
                      <option value="irc">IRC</option>
                    {% endif %}

                    {% if params.source == 'dis' %}
                      <option selected value="dis">Discord</option>
                    {% else %}
                      <option value="dis">Discord</option>
                    {% endif %}

                    {% if params.source == None %}
                      <option selected value="all">All</option>
                    {% elif params.source == 'all' %}
                      <option selected value="all">All</option>
                    {% else %}
                      <option value="all">All</option>
                    {% endif %}
                    
                  </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
                    {% if params.check_sentiment != "on" %}
                      disabled="undefined"
                    {% endif %}
                    name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1"
                    {% if params.sentiment == None %}
                      value="0"
                    {% else %}
                      value="{{ params.sentiment }}"
                    {% endif %}
                    step="0.05" type="range">
                  <output for="sliderWithValue" class="slider-output">
                    {% if params.sentiment == None %}
                      0
                    {% else %}
                      {{ params.sentiment }}
                    {% endif %}
                  </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"
                         {% if params.sentiment_method == 'below' %}
                           checked
                         {% endif %}
                         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"
                         {% if params.sentiment_method == 'exact' %}
                           checked
                         {% endif %}
                         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"
                         {% if params.sentiment_method == 'above' %}
                           checked
                         {% endif %}
                         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"
                         {% if params.sentiment_method == 'nonzero' %}
                           checked
                         {% endif %}
                         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"
                     {% if params.check_sentiment == "on" %}
                       checked
                     {% endif %}
                     data-script="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" value="{{ params.date }}">
                  <script>
                    var options = {
                      "type": "datetime",
                      "isRange": true,
                      "color": "info",
                      "validateLabel": "Save",
                      "dateFormat": "yyyy-MM-dd",
                      "startDate": "{{ params.from_date|escapejs }}",
                      "startTime": "{{ params.from_time|escapejs }}",
                      "endDate": "{{ params.to_date|escapejs }}",
                      "endTime": "{{ params.to_time|escapejs }}",
                    };
                    // 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"
                         {% if params.sorting == None %}
                           checked
                         {% elif params.sorting == 'desc' %}
                           checked
                         {% endif %}
                  >
                  <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"
                         {% if params.sorting == 'asc' %}
                           checked
                         {% endif %}>
                  <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"
                         {% if params.sorting == 'none' %}
                           checked
                         {% endif %}>
                  <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="{{ tags|joinsep:',' }}">
  </div>
  <div class="block">
    <div id="results">
      {% if results %}
        {% include 'ui/drilldown/results.html' %}
      {% endif %}
    </div>
  </div>
  <div id="modals-here">
  </div>
{% endblock %}