{% extends "whispermaphone/page.html" %}
{% load static %}

{% block title %}Post{% endblock %}

{% block head %}
<link href="{% static 'main/post.css' %}" rel="stylesheet">
{% endblock %}

{% block navigation %}
    <a href="/" class="text" style="border: none">Thoughts</a>
    <a href="/about" class="text" style="border: none">About</a>
    <h1 class="text">Post</h1>
{% endblock %}

{% block main %}
    <form action="{% url 'post'%}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <textarea name="text" id="text" class="thought" rows="1" placeholder="What are you thinking?"></textarea>
        <textarea name="extended_text" id="extended_text" class="thought" rows="2" placeholder="Anything else?"></textarea>
        <input type="hidden" name="timezone_offset" id="timezone_offset">
        <input type="file" name="media" id="media"><br>

        <input type="submit" id="post-button" value="Submit">
    </form>
{% endblock %}

{% block scripts %}
<script>
    const textEl = document.getElementById("text");
    const textExtEl = document.getElementById("extended_text");

    function updateBoxHeight(box) {
        const rows = box.rows;
        box.rows = 1;

        //style.height doesn't include padding, .scrollHeight does
        box.style.height = "auto";
        const height = box.scrollHeight;

        if (rows > 1 && height < 36) {
            //set the rows back to 2, set the height to the height, and set top margin
            box.style.height = height + "px";
            box.rows = rows;
            box.style.marginTop = "15px";
        }else {
            box.style.height = height + "px";
            box.rows = rows;
            box.style.marginTop = "0";
        }
    }

    textEl.addEventListener("input", evt => {
        // If the length is more than 140
        const value = textEl.value;
        if (value.length > 140) {
            const splitAt = value.lastIndexOf(" ", 140) + 1; // Plus 1 keeps the space in the original text instead of moving it
            const toMove = value.substring(splitAt);
            const startPos = textEl.selectionStart;
            const endPos = textEl.selectionEnd;
            textEl.value = value.substring(0, splitAt - 1); //Remove word and space from original

            // Only move down if we're at the end of the first box
            console.log(startPos, endPos);
            if (startPos === 141 && endPos === 141) {
                textExtEl.value = toMove + textExtEl.value;

                // Place the cursor at the end of what we just moved down
                textExtEl.focus();
                textExtEl.selectionStart = toMove.length;
                textExtEl.selectionEnd = toMove.length;
            }else {
                // Move the last word down, adding a space
                textExtEl.value = toMove + " " + textExtEl.value;

                // Move cursor back to where it was
                textEl.selectionStart = startPos;
                textEl.selectionEnd = endPos;
            }
        }

        // TODO: Auto-set width of short text box
        //textEl.style.width = "auto";
        //textEl.style.width = textEl.scrollWidth + "px";
    });

    const textboxes = document.getElementsByClassName("thought");
    for (const box of textboxes) {
        //Set the initial heights of the boxes
        updateBoxHeight(box)
        box.addEventListener("input", evt => updateBoxHeight(box));

        //Allow pasting images into either text box
        box.addEventListener("paste", evt => {
            const files = evt.clipboardData.files;
            // We can only use the first image from the pasteboard
            if (files && files.length > 0) {
                // This seems to only allow entry of a single file
                const el = document.getElementById("media");
                el.files = files;
            }
        });
    }

    const timezoneOffsetEl = document.getElementById("timezone_offset");
    timezoneOffsetEl.value = (new Date()).getTimezoneOffset();
</script>
{% endblock %}