{% load static %}
<div
  class="modal fade"
  tabindex="-1"
  id="new_pathway_modal"
  role="dialog"
  aria-labelledby="new_pathway_modal"
  aria-hidden="true"
  style="overflow-y: auto;"
>
  <!-- FIXME: make width dynamic-->
  <div class="modal-dialog" id="new_pathway_modal_dialog" style="width:900px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="js-title-step"></h4>
      </div>
      <div class="modal-body hide" data-step="1" data-title="New Pathway">
        <div class="jumbotron">
          Create a new pathway by entering the root compound and a name. Then
          select if you want to use the prediction engine to generate a
          predicted pathway or create an empty pathway that you fill in by
          yourself. If you choose to predict a pathway, you can modify the
          settings for the prediction, or use the default settings and just
          click Submit.
        </div>
        <div class="modal-body">
          {% if current_user.name == 'anonymous' %}
            <div class="alert alert-warning">
              You are currently logged in as Anonymous. Please note: Pathways
              entered or predicted as anonymous user will be deleted after 30
              days. Please log in to save your results.
            </div>
          {% endif %}
        </div>
        <div class="row">
          <div class="col-md-6">
            <label for="name">Name</label>
            <input
              id="name"
              class="form-control"
              name="name"
              placeholder="Name"
            />
            <label for="description">Description</label>
            <input
              id="description"
              class="form-control"
              name="description"
              placeholder="no description"
            />
          </div>

          <div class="col-md-6">
            <label for="predict">Predict pathway or build yourself?</label>
            <div class="radio" id="predict">
              <p>
                <label>
                  <input
                    type="radio"
                    name="predict"
                    id="radioPredict"
                    value="predict"
                    checked
                  />Predict pathway
                </label>
              </p>
              <p>
                <label>
                  <input
                    type="radio"
                    name="predict"
                    id="radioIncremental"
                    value="incremental"
                  />Incremental prediction
                </label>
              </p>
              <p>
                <label>
                  <input
                    type="radio"
                    name="predict"
                    id="radioBuild"
                    value="build"
                  />Build pathway
                </label>
              </p>
            </div>
          </div>
        </div>
        <label for="smilesinput">SMILES</label>
        <table style="width: 100%">
          <colgroup>
            <col span="1" style="width: 90%;" />
            <col span="1" style="width: 10%;" />
          </colgroup>
          <tr>
            <td>
              <input
                id="smilesinput"
                class="form-control"
                name="smilesinput"
                placeholder="C1CCCCC1"
                autocapitalize="none"
              />
            </td>
            <td>
              <button type="button" class="btn btn-default" id="render-button">
                Render
              </button>
            </td>
          </tr>
        </table>
        <p id="ketcher_container"></p>
        <div>
          <iframe
            id="ifKetcher"
            src="{% static '/js/ketcher/ketcher.html' %}"
            width="850"
            height="510"
          ></iframe>
        </div>
      </div>
      <div
        class="modal-body hide"
        data-step="2"
        data-title="New Pathway - Advanced Settings"
      >
        <div class="jumbotron">
          Choose if you want to use an existing setting, or create a new one for
          this pathway prediction. Then click Submit to use the specified
          setting, or click next to set the parameters.
        </div>
        <div id="settings">
          <div class="radio" id="settingRadio">
            <p>
              <label>
                <input
                  type="radio"
                  name="existing"
                  id="radioDefault"
                  value="exisiting"
                  checked
                />
                Use Default
              </label>
            </p>
            <p>
              <label>
                <input
                  type="radio"
                  name="existing"
                  id="radioExists"
                  value="exisiting"
                />
                Select Existing
              </label>
            </p>
            <p>
              <label>
                <input
                  type="radio"
                  name="existing"
                  id="radioNew"
                  value="temporary"
                />
                Create New
              </label>
            </p>
          </div>

          <select id="settingSelect" name="settingSelect" class="form-control">
            {% for setting in available_settings %}
              <option value="{{ setting.id }}">{{ setting.name|safe }}</option>
            {% endfor %}
          </select>
          <p></p>
        </div>
      </div>
      {% with step_offset=1 %}
        {% include "templates/modals/collections/new_setting_modal_body.html" %}
      {% endwith %}
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-default js-btn-step pull-left"
          data-orientation="cancel"
          onclick="reset()"
          data-dismiss="modal"
        ></button>
        <button
          type="button"
          class="btn btn-default js-btn-step"
          data-orientation="previous"
          id="backbutton"
        ></button>
        <button
          type="button"
          class="btn btn-default js-btn-step"
          data-orientation="next"
          id="nextbutton"
        ></button>
        <a id="modal-form-submit" class="btn btn-primary" href="#">Submit</a>
      </div>
    </div>
  </div>
</div>

<script>
  s = new Setting(
    "settingName",
    "package_multi_select",
    "modelSelect",
    "cutoff",
    "evalType",
    "availableTS",
    "forms",
    "truncatorTable",
    "summaryTable",
  );

  $(function () {
    // hide all forms
    $("#forms").children().hide();

    $("#render-button").on("click", function () {
      syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
    });

    // If theres a change in the in '#smilesinput' sync the value to ketcher
    $("#smilesinput").on("input", function () {
      syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
    });

    // If theres an update in ketcher sync it to textinput
    setInterval(function () {
      syncKetcherAndTextInput("ketcher", "ifKetcher", "smilesinput");
    }, 250);

    $("#smilesinput").on("blur", function () {
      syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
    });

    $("#smilesinput").on("keypress", function (event) {
      if (event.keyCode == 13) {
        syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
      }
    });

    // Show forms depending on the selected TS
    $("#availableTS").on("change", function (e) {
      e.preventDefault();

      var type = $(this).val();
      // hide current content
      $("#forms").children().hide();

      if (type === "") {
        return;
      }

      $("#" + type + "_form").show();
    });

    $("#modelSelect").on("change", function () {
      setCutoff = function (thresh) {
        $("#cutoff").val(thresh);
      };

      var modelUri = $("#modelSelect :selected").val();
      fillPRCurve(modelUri, setCutoff);
    });

    // Add a TS to the setting
    $("#add-ts-button").on("click", function (e) {
      e.preventDefault();
      s.addTruncator();
    });

    $("input[type=radio][name=predict]").change(function () {
      if (this.id == "radioBuild") {
        $("#nextbutton").prop("disabled", true);
      } else {
        $("#nextbutton").prop("disabled", false);
      }
    });

    $("input[type=radio][name=existing]").change(function () {
      if (this.id == "radioDefault" || this.id == "radioExists") {
        if (this.id == "radioDefault") {
          $("#settingSelect").prop("disabled", true);
        } else {
          $("#settingSelect").prop("disabled", false);
        }
        $("#nextbutton").prop("disabled", true);
      } else {
        // build...
        $("#settingSelect").prop("disabled", true);
        $("#nextbutton").prop("disabled", false);
      }
    });

    var pwStep1 = function () {
      console.log("pw step 1");
      // Make "Next" to "Advanced"
      $("#nextbutton").val("Advanced");
    };

    var pwStep2 = function () {
      console.log("pw step 2");
      // Make "Advanced" to "Next"
      $("#nextbutton").val("Next");
      // As "Use default is preselected" disable "Next" button
      $("#nextbutton").prop("disabled", true);
      // Disable setting dropdown as long as the correspndonding radio isnt checked
      $("#settingSelect").prop("disabled", true);
      // Show submit button
      $("#modal-form-submit").show();
    };

    var settingStep1 = function () {
      // First step sets name and packages
      s.extractName();
      s.extractSelectedPackages();
    };

    var settingStep2 = function () {
      // Seconds step gathers relative reasoning params
      s.extractRelativeReasoning();
      s.extractCutoff();
      s.extractEvaluationType();
    };

    var settingStep3 = function () {
      s.updateTable();
      s.updateSummaryTable();
      // hide duplicate submit...
      $("#nextbutton").hide();
    };

    var postPathway = function () {
      console.log("Complete!");
      console.log(s.tsParams);
      console.log("Getting SMILES");
    };

    function dummy() {
      console.log("dummy");
    }

    $("#new_pathway_modal").modalSteps({
      btnCancelHtml: "Cancel",
      btnPreviousHtml: "Back",
      btnNextHtml: "Next",
      btnLastStepHtml: "Submit",
      disableNextButton: false,
      completeCallback: postPathway,
      callbacks: {
        1: pwStep1,
        2: pwStep2,
        3: dummy,
        4: settingStep1,
        5: settingStep2,
        6: settingStep3,
      },
    });

    $("#modal-form-submit").on("click", function () {
      e.preventDefault();
      postPathway();
    });
  });
</script>