{% extends "base.html" %}
{% block title %}{{ sketch_name }}{% endblock title %}

{% block extra_head %}
    <link rel="stylesheet" href="/static/styles/highlightjs.min.css">
    <style>
        html {
          overflow-y: scroll;
          overflow-x: scroll;
        }

        .demoContainer {
          display: flex;
          align-items: center;
        }

        pre {
            margin-right: 2em;
        }

        #text-editor {
            width: 700px;
            height: 800px;
            float: left;
            margin: 1.5em;
        }

        #sketch-buttons {
            margin: 0 1.5em;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="demoContainer">

      <div style="display: block">
          <a href="/">Back to sketchbook</a>
          <form action="." method="POST">
            <textarea class="display-none" id="id_py_code" name="py_code">{{ py_code }}</textarea>

            <div id="text-editor">{{ py_code }}</div>

            <div id="sketch-buttons" class="clearfix">
              {% if live_run %}
              <button id="executeBtn" title="(Ctrl/Cmd + Enter) to refresh the skecth" type="button" class="btn btn-primary bg-green rounded py1 px2 mb1">Update</button>
              <button id="clearBtn" title="(Ctrl/Cmd + .) to clear the skecth" type="button" class="btn btn-primary rounded bg-red py1 px2 mb1">Clear</button>
              {% endif %}
              <input id="submitBtn" title="(Ctrl/Cmd + s) to save the sketch" style="float: right" class="btn btn-primary rounded py1 px2 mb1" type="submit" value="Save">
            </div>
          </form>
      </div>

      <div id="sketch-holder">
        <!-- You sketch will go here! -->
      </div>
    </div>
{% endblock content %}

{% block custom_js %}
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
    <script src="/static/js/ace/ace.js"></script>

    <script type="text/javascript">
        var editor = ace.edit("text-editor");

        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/python");
        editor.setFontSize(16);
        editor.session.setOptions({
          tabSize: 4,
        });

        editor.session.on('change', function(){
          document.getElementById("id_py_code").innerHTML = editor.getSession().getValue();
        });
    </script>

    {% if live_run %}
    <script src="https://pyodide-cdn2.iodide.io/v0.18.1/full/pyodide.js"></script>
    {% endif %}

    <script src="{{ p5_js_url }}"></script>

    <script src="{{ sketch_js_url }}" {% if js_as_module %}type="module"{% endif %}></script>

    <script type="text/javascript">
      $(document).ready(() => {
        $("#executeBtn").on("click", () => {
          const code = editor.getSession().getValue();
          window.runSketchCode(code);
        });


        $("#clearBtn").on("click", () => {
          $("#sketch-holder").html("");
        });

        $("body").bind("keydown",keyDown);

        function cleanKeyCode(e) {
          // Shortcuts work for Ctrl or Cmd
          if (e.ctrlKey || e.metaKey) {
            return e.keyCode;
          }
        }

        function keyDown(e){
            if(cleanKeyCode(e) === 83){  // Ctrl + s to save
              e.preventDefault();
              $("#submitBtn").click();
            {% if live_run %}
            } else if (cleanKeyCode(e) === 13) {  // Ctrl + Enter to run
              e.preventDefault();
              $("#executeBtn").click();
            } else if(cleanKeyCode(e) === 190){  // Ctrl + . to clear
              e.preventDefault();
              $("#clearBtn").click();
            {% endif %}
            }
        }

      });
    </script>
{% endblock %}
