{% extends "wiki/base.html" %}
{% block title %}Wiki | Edit: {{ page }}{% endblock %}
{% block og_title %}Wiki | Edit: {{ page }}{% endblock %}
{% block og_description %}{% endblock %}

{% block page_classes %}uses-rst{% endblock %}

{% block content %}
    <form uk-grid class="uk-grid-small" action="{{ url_for("wiki.edit", page=page) }}" method="post">
        <div class="uk-width-expand">
            <input name="title" id="title" placeholder="Page Title" value="{{ title }}" class="uk-input" required />
        </div>
        <div class="uk-width-auto">
            <button class="uk-button uk-button-secondary" type="button" value="Preview" id="preview">Preview</button>
        </div>
        <div class="uk-width-auto">
            <input class="uk-button uk-button-primary" type="submit" id="submit" value="Save" disabled />
        </div>
        <div class="uk-width-1-1">
            <div id="editor" class="uk-textarea">{{ rst }}</div>
            <input type="hidden" name="rst" id="rst" />
        </div>

        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    </form>

    <div class="uk-container uk-container-small preview-title">
        <h2 id="preview-title">{{ title }}</h2>

        <div id="preview-div">
            {{ preview | safe }}
        </div>
    </div>

    <script type="application/javascript">
        "use strict";

        let csrf_token = "{{ csrf_token() }}";

        function do_preview(_) {
            let oReq = new XMLHttpRequest();

            oReq.addEventListener("load", function() {
                let response = JSON.parse(this.responseText);

                if (response.error !== undefined) {
                    document.getElementById("submit").disabled = true;

                    if (response.error_lines !== undefined) {
                        editor.session.setAnnotations(response.error_lines);
                        document.getElementById("preview-div").innerHTML ="<h3>Error - see editor margin</h3>";
                    } else {
                        console.log("Error: " + response.error);
                        document.getElementById("preview-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>";
                    }
                } else {
                    document.getElementById("submit").disabled = false;
                    document.getElementById("preview-div").innerHTML = response.data;

                    editor.session.setAnnotations([]);
                }
            });

            let data = editor.getValue();

            if (data.replace("\s", "").length < 1 || document.getElementById("title").value.length < 1) {
                document.getElementById("submit").disabled = true;
                return false;
            }

            oReq.open("POST", "/render");

            oReq.setRequestHeader("Content-type", "application/json");
            oReq.setRequestHeader("X-CSRFToken", csrf_token);

            oReq.send(JSON.stringify({"data": editor.getValue()}));

            return false;
        }

        document.getElementById("preview").onclick = do_preview;

        let editor = ace.edit("editor");
        let timer;

        editor.session.setMode("ace/mode/rst");
        editor.session.setUseWrapMode(true);

        editor.setTheme("ace/theme/iplastic");
        editor.setShowPrintMargin(false);

        editor.on("input", function() {
            document.getElementById("submit").disabled = true;
            document.getElementById("rst").value = editor.getValue();

            if (timer !== undefined) {
                clearTimeout(timer);
            }
            timer = setTimeout(do_preview, 1000);
        });

        document.getElementById("title").oninput = function() {
            if (document.getElementById("title").value.length < 1) {
                document.getElementById("submit").disabled = true;
            }

            document.getElementById("preview-title").textContent = document.getElementById("title").value;

            document.getElementById("rst").value = editor.getValue();

            if (timer !== undefined) {
                clearTimeout(timer);
            }
            timer = setTimeout(do_preview, 1000);
        };

        function refreshLock() {
            console.log("Refreshing lock");
            let xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 204) {
                    console.log("Lock refreshed")
                } else if(this.readyState === 4 && this.status !== 204) {
                    console.log("Could not refresh lock")
                }
            };

            xhttp.open("PATCH", document.location.pathname, true);
            xhttp.send();
        }

        // Lock refreshing
        setInterval(refreshLock, (60 * 4) * 1000)
    </script>
{% endblock %}