{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}

<h3>{{problem.name}}</h3>
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/xterm/dist/xterm.css')}}" /> 
<script src="{{ url_for('static', filename='node_modules/xterm/dist/xterm.js')}}"></script>

<style>
    #terminal {
      overflow: hidden;
      width: 31vw;
      height: 28vh; /* <- fixed height */
      font-size: 16px;
      line-height: 17px; /* <- initial line-height */
    }
    #loadingElement{
        text-align: center;
        overflow:fixed;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
    }
</style>
    <div class="justify-content-center" id="loadingElement">
        <h1 style="display: block;">One Moment Please</h1>
        <img src="https://media0.giphy.com/media/pOKrXLf9N5g76/giphy.gif" alt="Loading" width="400" height="400" style="margin-left: auto;margin-right: auto;left: 0;
        right: 0;margin-top: auto;margin-bottom: auto;top: 0;bottom: 0;display: block;">
    </div>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <div id="container" style="width:65vw;height:75vh;border:1px solid grey"></div>
            <button type="button" id="generate" class="btn btn-primary btn-lg btn-block" 
            style="display: none;">Compile</button>
            
        </div>
        <div class="col-lg-4">
            <div class="row mb-3">
                <div class="col-lg" style="font-size: 16pt; color: white; padding-left: 20px;">
                    {{problem.description|safe}}
                </div>
            </div>
            <h3 style="padding-left: 20px;">Program output</h3>
            <div id="terminal"></div>
            <div id="displayResults" style="display: none; position: absolute; top: 0; right: 0;">
                <div class="row">
                    <div class="col-lg">
                        <table class="table table-dark table-bordered">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Expected</th>
                                    <th scope="col">Run</th>
                                    <th scope="col">Result</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for case in problem.test_cases %}
                                <tr>
                                    <th scope = "row">{{loop.index}}</th>
                                    <td id = "results_{{loop.index}}_1">{{case.input}}</td>
                                    <td id = "results_{{loop.index}}_2"></td>
                                    <td id = "results_{{loop.index}}_3"></td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="problemsList" style="display:none">
  <div class="sidenav">
            <table class="table table-dark table-bordered" > 
              <thead>
                <tr>
                  <th width= 30%>Current HW</th>
                  <th>Class</th>
                  <th>Due Date</th>
                </tr>
              </thead>
              <tbody>
                {% for case in current_problems %}
                  <tr>
                    <th>
                      {#<button onclick="{{case}}()" class="btn btn-primary btn-lg btn-block" style="padding: 5px;">{{case.name}}</button>#}
                      <a href="{{ url_for('homepage') }}">{{case.name}}</a></th>
                    <th>{{case.class}}</th>
                    <th>{{case.due_date}}</th>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
        </div>
  </div>
</div>
<style>
    .sidenav {
  width: 400px;
  position: fixed;
  z-index: 1;
  top: 65px;
  left: 10px;
  background: #eee;
  overflow: auto;
}
.sidenav a {
  color: #2196F3;
  display: block;
}
.sidenav a:hover {
  color: #064579;
}
</style>
<script>function displayProblems() {
  var x = document.getElementById("problemsList");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
<script>function displayResults() {
  var x = document.getElementById("displayResults");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
<script>function loadingElement() {
  var a = document.getElementById("loadingElement");
  var b = document.getElementById("container");
  var c = document.getElementById("generate");
  if (a.style.display === "none") {
    a.style.display = "block";
    b.style.display = "none";
    c.style.display = "none";
  } else {
    a.style.display = "none";
    b.style.display = "block";
    c.style.display = "block";
  }
}
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename='node_modules/monaco-editor/min/vs/loader.js')}}"></script>
<script>
    // Borrowed from: http://tomeko.net/online_tools/cpp_text_escape.php?lang=en
    function cstr_encode(input) {
        var output = "\"";
        var splitLines = false;
        for (i = 0; i < input.length; i++) {
            switch (input[i]) {
                case '\f':
                    output += "\\f";
                    break;
                case '\n':
                    if (splitLines) {
                        output += "\\n\"\n\"";
                    } else {
                        output += "\\n";
                    }
                    break;
                case '\r':
                    output += "\\r";
                    break;
                case '\t':
                    output += "\\t";
                    break;
                case '\"':
                    output += "\\\"";
                    break;
                case '\\':
                    output += "\\\\";
                    break;
                default:
                    output += input[i];
                    break;
            }
        }
        output += "\"";
        return output;
    }

    var editor;
    require.config({
        paths: {
            'vs': "{{ url_for('static', filename='node_modules/monaco-editor/min/vs')}}"
        }
    });

    require(['vs/editor/editor.main'], function () {
        console.log("loading");
        editor = monaco.editor.create(document.getElementById("container"), {
            value: "import java.util.Scanner; \npublic class HelloWorld { \n\n    public static void main(String[] args) { \n\t    Scanner in = new Scanner(System.in); \n        String s = in.nextLine(); \n        System.out.println(s); \n    }\n\n}",
            language: "java",
            readOnly: false,
            theme: "vs-dark",
            lineNumbers: "on"
        });
        var x = document.getElementById("generate");
        if (x.style.display === "none") {
            x.style.display = "block";
        }
        loadingElement();
    });
</script>

<script type="text/javascript" charset="utf-8">
    var term = new Terminal();
    term.open(document.getElementById('terminal'));
    //term.writeln('Hello from \x1B[1;3;31mxterm.js\x1B[0m')
    
    var socket;
    $(document).ready(function(){
        socket = io.connect('http://' + document.domain + ':' + location.port);
        socket.on('connect', function() {
            socket.emit('my event', {data: 'I\'m connected!'});
            console.log("socketio connected");
        });
        socket.on('problem_result', function(data) {
            console.log(data);
            var i;
            for (i = 0; i < data.length; i++) {
                $("#results_"+ (i+1).toString() + "_2").html(data[i].stdout);
                $("#results_"+ (i+1).toString() + "_3").html(data[i].pass_status.toString());
                if(data[i].pass_status == true){
                    $("#results_"+ (i+1).toString() + "_3").css("background-color", "green");
                }else{
                    $("#results_"+ (i+1).toString() + "_3").css("background-color", "red");
                }
                term.writeln(data[i].stdout);
            }
            loadingElement();
            document.getElementById("displayResults").style.display = "block";
        });
        
    });
    $('#generate').on('click', function (e) {
        loadingElement();
        console.log("Sending code to backend");
        //socket.emit("new_problem_from_user", {data: cstr_encode(editor.getValue())})
        socket.emit("new_problem_from_user", {data: editor.getValue()});
    });
    
</script>

{% endblock %}