<?php
session_start();
require_once("lti_util/lti_util.php");
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Python Automarker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen" />
    <link href="css/automarker.css" rel="stylesheet" media="screen" />
    <!--[if lt IE 9]>
      <script src="node_modules/html5shiv/dist/html5shiv-printshiv.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="node_modules/brython/brython.min.js"></script>
    <script type="text/javascript" src="node_modules/brython/brython_stdlib.js"></script>
    <script type="text/javascript" src="node_modules/monaco-editor/min/vs/loader.js"></script>
    <script type="text/javascript">
      exercise_id = <?php echo isset($_REQUEST["exercise_id"]) ? $_REQUEST["exercise_id"] : 0; ?>;
      editor = document.getElementById('editor');
      jQuery(document).ready(function() {
        require.config({ paths: { vs: 'node_modules/monaco-editor/min/vs' } });
        require(['vs/editor/editor.main'], function () {
          editor = monaco.editor.create(document.getElementById('editor'), {value: "", language: 'python', minimap: {enabled: false}});
          diffEditor = monaco.editor.createDiffEditor(document.getElementById('diffEditor'), {ignoreTrimWhitespace: false});
          brython();
        });
      });
    </script>
  </head>

  <body class="container">

    <div class="accordian col-md-12" id="accordianMain">
      <!-- Instructions -->
      <div class="accordian-item">
        <h2 class="accordian-header" id="headingOne">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <h1 id="exercise">Loading...</h1>
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionMain">
          <div class="accordion-body">
            <span id="instructions">Loading...</span>
          </div>
        </div>
      </div>

       <!-- Code -->
       <div class="accordion-item">
         <h2 class="accordion-header" id="headingTwo">
           <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
             Code
           </button>
         </h2>
         <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionMain">
           <div class="accordion-body">
             <div id="editor" style="height: 400px;"></div>
             <div class="form-group text-center">
               <button id="run" class="btn btn-secondary">Run</button>
               <button id="test-all" type="button" class="btn btn-primary">Run Tests</button>
               <button id="grade" type="button" class="btn btn-success disabled">Grade</button>
               <span id="nograde" class="visually-hidden">Connect through a LMS to submit grade information</span>
             </div>
             <div><span id="warning"></span></div>
             <div class="visually-hidden" id="output-row">
                 <h3>Output</h3>
                 <div class="form-group">
                   <textarea id="output" readonly class="form-control"></textarea>
                 </div>
           </div>
         </div>
       </div>

       <!-- Tests -->
       <div class="accordion-item">
         <h2 class="accordion-header" id="headingThree">
           <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controlls="collapseThree">
             Tests
           </button>
         </h2>
         <div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#accordionMain">
           <div class="accordion-body">
             <div id="tests" class="list-group"></div>

             <div class="visually-hidden" id="test-row">
                 <h3>Comparison of Expected and Actual Output</h3>
                 <div class="form-group">
                   <div id="diffEditor" style="height:400px; width: 800px;" class="form-control"></div>
                 </div>

                 <h3>Expected Output</h3>
                 <div class="form-group">
                   <textarea id="expected" readonly class="form-control"></textarea>
                 </div>

                <h3>Actual Output</h3>
                <div class="form-group">
                  <textarea id="actual" readonly class="form-control"></textarea>
                </div>

                <h3>Test Input</h3>
                <div class="form-group">
                  <textarea id="input" readonly class="form-control"></textarea>
                </div>

              </div>
            </div>
           </div>
         </div>
       </div>
    </div>

    <script type="text/javascript">
      submission_url = '';
      redirect_url = '';
<?php
  if (!is_lti_request()) {
    echo "jQuery(document).ready(function() {\n";
    echo "    jQuery('#grade').addClass('visually-hidden');\n";
    echo "    jQuery('#nograde').removeClass('visually-hidden');\n";
    echo "    jQuery('#nograde').show();\n";
    echo "});\n";
  } else {
    $oauth_consumer_key = "";
    $oauth_consumer_secret = "";
    if (isset($_POST['oauth_consumer_key'])) {
        $oauth_consumer_key = $_POST['oauth_consumer_key'];
        # TODO: Look this up, rather than just having the same value for everybody
        $oauth_consumer_secret = "12345";
        $_SESSION['oauth_consumer_key'] = $oauth_consumer_key;
        $_SESSION['oauth_consumer_secret'] = $oauth_consumer_secret;
    }
    $context = new BLTI($oauth_consumer_secret, true, false);
    if (!$context->valid) {
      echo "  jQuery(document).ready(function() {\n";
      echo "    jQuery('#grade').addClass('visually-hidden');\n";
      echo "    jQuery('#nograde').removeClass('visually-hidden');\n";
      echo "    jQuery('#nograde').show();\n";
      echo "  });\n";
    } else {
      echo "    submission_url = '" . $context->addSession("grade.php") . "';\n";
      if (isset($_POST['launch_presentation_return_url'])) {
        echo "    redirect_url = '" . $_POST['launch_presentation_return_url'] . "';\n";
      }
    }
  }
?>
      function submitGrade() {
        if (submission_url != "") {
          data = {
            exercise: exercise_id,
            code: editor.getValue()
          };
          jq.post(submission_url, data , function(data, textStatus){
            if (data["status"] == "success") {
              alert("Grade updated!");
              if (redirect_url != '') {
                window.location = redirect_url;
              }
            } else {
              alert("Error updating grade. Please try again.\nError: " + data["detail"]);
            }
          }, "json");
        } else {
          alert("Connect through a LMS to submit grade information");
        }
      }

      function updateDiff() {
        diffEditor.setModel({
          original: monaco.editor.createModel(document.getElementById("expected").value, "text/plain"),
          modified: monaco.editor.createModel(document.getElementById("actual").value, "text/plain")
        });
      }
    </script>
    <script type="text/python" src="automarker_client.py"></script>
  </body>
</html>