<%# Page to select units for training %>
<%# ARGUMENTS: units - list of units to train on, subject - the subject, unitPresets - object of unit presets, qNum - weird ID number %>

<%- include("../../partials/header") -%>
<%- include("../../partials/navigationPrivate") -%>

<script>
  $(document).ready(function() {
    // TEMPORARY: hide unused units on frontend (physics only right now)
    if ('<%= subject %>' == 'Physics') {
      var toHide = [];
      toHide.forEach((element) => {
        console.log('Now hidden: ' + element);
        document.getElementById('DIV ' + element).style.display = 'none';
      });
    }

    // function to set cookie data
    let saveSelectionAsCookie = () => {
      units = [];
      let unitInputs = document.getElementsByName('unitChoice');
      for (let i = 0; i < unitInputs.length; i++) {
        if (unitInputs[i].checked) {
          units.push(unitInputs[i].id);
        }
      }

      let cookieData = units.join('@');
      if (cookieData == '') {
        cookieData = 'none';
      }
      document.cookie = cookieData;
    };

    // make select and deselect all buttons work
    $('#select-all').click(function() {
      document.getElementsByName('unitChoice').forEach((checkbox) => {
        if (checkbox.type == 'checkbox') {
          checkbox.checked = true;
        }
        saveSelectionAsCookie();
      });
    });
    $('#deselect-all').click(function() {
      document.getElementsByName('unitChoice').forEach((checkbox) => {
        if (checkbox.type == 'checkbox') {
          checkbox.checked = false;
        }
        saveSelectionAsCookie();
      });
    });

    // make unit clustering buttons work
    var unitPresets = JSON.parse($('#stringifiedUnits').val());
    Object.keys(unitPresets).forEach((preset) => {
      $(document.getElementById(preset.replace(/\s+/g, ''))).click(function() {
        document.getElementsByName('unitChoice').forEach((checkbox) => {
          if (checkbox.type == 'checkbox') {
            checkbox.checked = false;
          }
        });

        unitPresets[preset].forEach((unit) => {
          document.getElementById(unit).checked = true;
        });

        saveSelectionAsCookie();
      });
    });

    // cookies to save current selection of units upon change and load last selection upon loading
    $('.unit-checkbox').change(function() {
      saveSelectionAsCookie();
    });

    let savedSelection = document.cookie.split(';')[0].split('@');
    try {
      savedSelection.forEach((unit) => {
        document.getElementById(unit).checked = true;
      });
    } catch (error) {
      console.log('Hit end of saved last selection');
    }
  });
</script>


<div class="jumbotron container mt-5">
  <%- include ("../../partials/flashes") -%>
  <h1 class="display-2 text-center"><%= subject %></h1>

  <div class="row">
    <div class="col-lg-1"></div>

    <div class="col-12 col-lg-6 mt-5">
      <h3 class="mb-2">Select units to train in:</h3>

      <form action="/selQ" method="POST">
        <div id="units">
          <% units.forEach((unit) => { %>
          <div class="form-check my-1 me-sm-2" id="DIV <%= unit %>">
            <input type="checkbox" name="unitChoice" class="form-check-input unit-checkbox" id="<%= unit %>" value="<%= subject %> - <%= unit %>">
            <label class="form-check-label" for="<%= unit %>"><%= unit %></label>
          </div>
          <% }) %>
        </div>

        <div class="mt-4">
          <a href="/train/chooseSubject"><button type="button" class="btn btn-secondary" id="previous">Previous</button></a>
          <input type="submit" class="btn btn-primary" id="next" value="Next">
        </div>

        <input type="hidden" name="qNum" value="<%= qNum %>">
        <input type="hidden" name="subj" value="<%= subject %>">
      </form>
    </div>

    <div class="col-12 col-lg-4 mt-5">
      <h3 class="mb-2">Quick Select</h3>

      <button type="button" class="btn my-1 btn-warning w-100" id="select-all">
        <font color="white">Select All</font>
      </button>
      <button type="button" class="btn my-1 btn-warning w-100" id="deselect-all">
        <font color="white">Deselect All</font>
      </button>

      <% if(Object.entries(unitPresets).length > 0) { %>
      <% Object.entries(unitPresets).forEach((preset) => { %>
      <button type="button" class="btn my-1 btn-info w-100" id="<%= preset[0].replace(/\s+/g, '') %>"><%= preset[0] %></button>
      <% }); %>
      <% } %>

      <input type="hidden" id="stringifiedUnits" value="<%= JSON.stringify(unitPresets) %>">
    </div>
  </div>

  <div class="col-lg-1"></div>
</div>

<%- include("../../partials/footer") -%>
