{% load envipytags %}
{% 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|nh_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>