<!-- Search widget that can be inserted anywhere -->
<!-- Arguments: query - the last search -->
<script src="https://cdn.jsdelivr.net/gh/nobleclem/jQuery-MultiSelect/jquery.multiselect.min.js"></script>

<input type="hidden" id="tagsAndNames" value="<%= JSON.stringify(subjectTags) %>">
<script>
  $(document).ready(function() {
    let unitPresets = JSON.parse($("#tagsAndNames").val());
    $('select[id=subjects-query]').multiselect({
      placeholder: "Subject (optional)",
      onOptionClick: function(element, option) {
        let currentlySelected = $('#tags-query').val();
        let subjectTags = [];
        let unitsToAppend = [];
        $('#subjects-query').val().forEach(element => subjectTags.push(unitPresets[element]['Units']));
        $('#units-query').multiselect('reset');
        if (unitPresets.length != 0) {
          subjectTags.forEach(element => Object.keys(element).forEach(key => unitsToAppend.push({
            name: element[key],
            value: key,
            checked: currentlySelected.includes(key)
          })))
          $('#tags-query').multiselect('loadOptions', unitsToAppend);
        } else {
          $('#tags-query').multiselect('reset');
        }
      }
    })
    $('select[id=tags-query]').multiselect({
      placeholder: "Units (optional)",
      search: true,
      selectAll: true
    })

    unitsToAppend = [];
    let subjectTags = [];
    $('#subjects-query').val().forEach(element => subjectTags.push(unitPresets[element]['Units']));
    $('#tags-query').multiselect('reset');
    if (unitPresets.length != 0) {
      subjectTags.forEach(element => Object.keys(element).forEach(key => unitsToAppend.push({
        name: element[key],
        value: key,
        checked: (new URLSearchParams(window.location.search)).get("tags").includes(key)
      })))
      $('#tags-query').multiselect('loadOptions', unitsToAppend);
    } else {
      $('#tags-query').multiselect('reset');
    }

    const doSearch = () => {
      // Now we have plaintext query, units, and tags
      let text = $("#text-query").val();
      let subjects = $('#subjects-query').val().join(',');
      let tags = $('#tags-query').val().join(',');
      window.location.href = `/search?text=${text}&subjects=${subjects}&tags=${tags}`;
    };

    $('#text-query').focus().select();
    $("#search-submit").click(doSearch);
    $("#search-form input").on("keyup", (e) => {
      if (e.key === "Enter" || e.keyCode === 13) {
        doSearch();
      }
    });
  });
</script>

<form class="row" id="search-form">
  <div class="col-md-10">
    <label class="d-none" for="text-query">Text query</label>
    <input class="form-control form-control-lg my-2" type="text" placeholder="Search for questions, users, etc." id="text-query" value="<%= query.text %>">
    <select class="form-control form-control-lg my-2" id="subjects-query" multiple="multiple">
      <option value="Physics" <%if(query.subjects != undefined && query.subjects.includes("Physics")) {%> selected <%}%>>Physics
            </option>
            <option value="Chemistry"<%if(query.subjects != undefined && query.subjects.includes("Chemistry")) {%> selected <%}%>>Chemistry
            </option>
            <option value="Biology"<%if(query.subjects != undefined && query.subjects.includes("Biology")) {%> selected <%}%>>Biology
            </option>
            <option value="ESS"<%if(query.subjects != undefined && query.subjects.includes("ESS")) {%> selected <%}%>>ESS
            </option>
        </select>
        <select class="form-control form-control-lg my-2" id="tags-query" multiple="multiple">
        </select>		
    </div>
    <div class="col-md-2">
        <input class="btn btn-primary btn-lg w-100 my-2" value="Search" type="button" id="search-submit">
    </div>
    <p>Selecting subjects automatically disables searching for anything other than questions.</p>
</form>
