<!DOCTYPE html>
<html lang="en">
  <head>
      <% include ../partials/head %>
  </head>
  <body>
    <% include ../partials/nav %>
    <div class="container">
      <div class="jumbotron">
        <h1 class="display-4">AIFEX </h1>
        <p class="lead">Improve the quality, efficiency and diversity of your exploratory test sessions</p>
        <hr class="my-4"></hr>
        <h2>New Session</h2>
        <form name="sessionForm" action="/dashboard/session/start" method="post" id="createSessionWithEmptyAI">
          <div class="form-group row" >
            <label for="webSiteId" class="col-sm-2 col-form-label">WebSite</label>
            <div class="col-sm-10">
              <select name="webSiteId" id="webSiteId" class="form-control" form="createSessionWithEmptyAI">
                <% JSON.parse(webSiteList).forEach(function(webSite) { %>
                  <%if (webSite.name === defaultWebSiteName) { %>
                      <option value="<%=webSite.id %>" selected="selected"> <%=webSite.name %> </option>
                    <% } else{ %>
                      <option value="<%=webSite.id %>"> <%=webSite.name %> </option>
                  <% } %>
                <%})%>
              </select>
            </div>
          </div>

          <div class="form-group row">
            <label for="baseURL" class="col-sm-2 col-form-label">Exploration starting URL</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" form="createSessionWithEmptyAI" name="baseURL" id="baseURL">
              <small id="minLengthHelp" class="form-text text-muted">The testers' starting point.</small>
            </div>
          </div>

          <h2>Objectives</h2>
          <div class="form-group">
            <label for="actionList">Mandatory Steps</label>
            <select class="form-control" id="actionList"></select>
            <button id="addMandatoryAction" type="button" class="btn btn-primary">Add Action</button>

            <small id="minLengthHelp" class="form-text text-muted">You can add and remove actions separated by ~> directly in the text area.</small>
            <textarea id="mandatorySteps" class="form-control" name="mandatorySteps" ></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Create</button>
        </form>
      </div>
    </div>
  </body>

  <script>
    let webSiteList = <%- webSiteList %>;

    let selectedWebSiteId = document.getElementById("webSiteId").value;
    document.getElementById("addMandatoryAction").addEventListener("click", addMandatoryAction)

    updateSelectedWebSite()
    document.getElementById("webSiteId").addEventListener("change", updateSelectedWebSite)

    function updateSelectedWebSite() {
      selectedWebSiteId = document.getElementById("webSiteId").value;
      selectedWebSite = webSiteList.find(webSite => webSite.id === selectedWebSiteId);

      const eventListSelect = document.getElementById("actionList");

      while (eventListSelect.hasChildNodes()) {
        eventListSelect.removeChild(eventListSelect.firstChild);
      }

      selectedWebSite.mappingList.forEach(mapping => {
        let prefix = mapping.output.prefix;
        const option = document.createElement("option");
        option.value = prefix;
        option.innerText = prefix;
        eventListSelect.appendChild(option);
      });
    } 

    function addMandatoryAction() {
      const action = document.getElementById("actionList").value;
      const value = document.getElementById("mandatorySteps").value
      
      document.getElementById("mandatorySteps").value = `${value} ${action}`
    }

 </script>
</html>
