{% extends "base.html" %}
{% load static %}

{% block body %}

  <!-- Section -->
  <section id="editProject">
    <h2>Project: {{ project.project_name }}</h2>

    <form id="new-project-form" method="post" action="#">{% csrf_token %}
      <div class="row uniform">
        <div class="12u$ code-info">
          <p>Try this code out now by running  </p>
          <div class="box">
            <pre>$ frida --codeshare {{ project.owner.nickname }}/${projectSlug} -f YOUR_BINARY</pre>
          </div>
        </div>

        <!-- Break -->
        <div class="12u$">
          <div @keyup="validateForm" v-model="projectSource" id="editor"></div>
        </div>

        <!-- Break -->
        <div class="12u$">
          <p>Fingerprint: {{ fingerprint }}</p>
          <p class="error-message" v-model="errorMsg">${errorMsg}</p>
          <ul class="actions">
            {% if project.owner == request.user %}
            <li><a href="{{ project.url }}edit/" class="button special">Edit</a></li>
            {% endif %}
            {% if user.is_authenticated %}
              <li>
                <template v-if="!likeButtonDisabled">
                  <a @click.prevent="sendLike" :class="{ disabled: likeButtonLoading }" :disabled="likeButtonLoading" href="#" class="button">
                    <i aria-hidden="true" class="fa fa-thumbs-o-up"></i> Like Project
                  </a>
                </template>
                <template v-else>
                  <a href="" class="disabled button" disabled="disabled" class="button">
                    <i class="fa fa-heart" aria-hidden="true"></i> Thanks!
                  </a>
                </template>
              </li>
            {% endif %}
            <li><input type="button" class="cancel-button" value="Back"/></li>
          </ul>
        </div>
      </div>
    </form>

  </section>

{% endblock %}

{% block extrascripts %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.14/beautify.min.js"></script>
  <script>

      var app = new Vue({
          el: '#editProject',
          delimiters: ['${', '}'],
          data: {
              isValid: false,
              projectName: "{{ project.project_name | escapejs }}",
              projectSlug: "{{ project.project_slug | escapejs }}",
              projectCategory: "{{ project.category.name | escapejs }}",
              projectSource: "{{ project.project_source | escapejs }}",
              projectDesc: "{{ project.description | escapejs }}",
              errorMsg: "",
              projectUUID: "{{ project.project_id }}",
              likeButtonDisabled: false,
      {% if user_has_liked_project %}
              likeButtonLoading: true,
      {% else %}
              likeButtonLoading: false,
      {% endif %}

          },
          methods: {
              validateForm: function(){
                  return
              },
              updateProject: function(){
                  return
              },
              sendLike: function(){
                  var that = this;
                  this.likeButtonLoading = true;
                  $.post("/api/like/", JSON.stringify({project_uuid: that.projectUUID}))
                      .then(function success(result) {
                          that.likeButtonDisabled = true;
                      },
                      function error(){
                          that.errorMsg = "Unable to like this project! Support has been notified. Sorry 😓"
                      })
                      .always(function(){
                          that.likeButtonLoading = false;
                      });

                  return false
              }
          },
          watch: {
              projectName: function(val, oldval){
                  if (val.match(/[^a-zA-Z0-9\-\s]/gi)){
                      this.projectName = this.projectName.replace(/[^a-zA-Z0-9\-\s]/gi, '')
                  }
                  this.projectSlug = this.projectName.replace(/\s/gi, '-').toLowerCase()
              }
          }
      })

      $('.cancel-button').click(function(){
          window.history.back()
      })

      $('.delete-button').click(function(){
          if(confirm("Are you sure you want to remove the project '" + app.projectName + "'? THIS CAN NOT BE UNDONE!")){
              $.ajax({
                  url: "/api/update/{{ project.owner.nickname }}/{{ project.project_slug }}/",
                  type: 'DELETE',
                  success: function(result) {
                      window.location = "/@{{ project.owner.nickname }}/"
                  }
              });
          };
      })

      $('.beautify-content').click(function(e){
          e.preventDefault();
          var session = editor.getSession();
          session.setValue(js_beautify(session.getValue()));
      })

      var beautify = ace.require("ace/ext/beautify");
      var editor = ace.edit("editor");
      editor.setTheme("ace/theme/monokai");
      editor.getSession().setMode("ace/mode/javascript");
      editor.setShowPrintMargin(false);
      editor.setReadOnly(true);

      editor.on('change', function(e){
          app.projectSource = editor.getSession().getValue()
          app.validateForm()
      })

      if (app.projectSource){
          editor.getSession().setValue(app.projectSource);
      }


  $(document).ready(function(){

    var heightUpdateFunction = function() {

        // http://stackoverflow.com/questions/11584061/
        var newHeight =
                  editor.getSession().getScreenLength()
                  * editor.renderer.lineHeight
                  + editor.renderer.scrollBar.getWidth();

        $('#editor').height(newHeight.toString() + "px");
        $('#editor-section').height(newHeight.toString() + "px");

        // This call is required for the editor to fix all of
        // its inner structure for adapting to a change in size
        editor.resize();
    };

    // Set initial size to match initial content
    heightUpdateFunction();

    // Whenever a change happens inside the ACE editor, update
    // the size again
    editor.getSession().on('change', heightUpdateFunction);
})

  </script>
  <style>
  #editor {
      min-height: 16rem;
  }
  </style>
{% endblock %}