{% extends "base_generic.html" %}

{% load tz %}
{% get_current_timezone as TIME_ZONE %}
{% block content %}
<form method="POST" id="posting-form">
    {% csrf_token %}
    <div class="posting-form-group">
      <label>Post</label>

      <textarea id="post_text" name="post_text" placeholder="What do you want to post?"
      maxlength="500" style="resize: none;"  oninput="auto_expand(this)"></textarea>
    </div>

    {% csrf_token %} 

    <label for="privilege">Privileges:</label>

    <select name="privilege" id="privil_choosing">
      <option value="public" selected>Public Timeline</option>
      <option value="unpublic">Not in Public Timeline</option>
      <option value="private">Private</option>
    </select> 

     <button id="submit_post"  type="button" class="btn">Post!</button>
  </form>

  <div id="public_timeline">
    <div id="new_post_notifier" value=""></div>
    <div id="latest_time" style="display: block;">{{latest_received_time|date:"Y-m-d H:i:s.u"}}+0000</div>

    {% for public_post in public_timeline_list %}

  <div id="post-{{public_post.id}}" class="post"><a href="user/{{public_post.poster}}">{{public_post.poster.shown_name}}</a>
    at <a href="post/{{public_post.id}}" class="post-time">{{public_post.post_time|date:"Y-m-d H:i:s.u"}}+0000</a><br/>
    {{public_post.text|linebreaksbr}}<br/>
    <span id="reply-{{public_post.id}}" value="{{public_post.id}}" class="reply">↩️</span>
    - <span id="repost-{{public_post.id}}" value="{{public_post.id}}" class="repost">🔁</span> 
    - <span id="fav-{{public_post.id}}" value="{{public_post.id}}" class="fav">⭐</span>
</div>
  {% endfor %}
  <div id="previous_post_loader">More posts</div>
  <div id="oldest_time" style="display: block;">{{oldest_received_time|date:"Y-m-d H:i:s.u"}}+0000</div>

  </div>


  <script>


timezoneChangingOne = (x)=>{var date= new Date(x.innerHTML);
                var year = date.getFullYear().toString();
                var month = (date.getMonth()+1).toString().padStart(2, '0');
                var day = date.getDate().toString().padStart(2, '0');
                var hour = date.getHours().toString().padStart(2, '0');
                var min = date.getMinutes().toString().padStart(2, '0');
                var sec = date.getSeconds().toString().padStart(2, '0');
                local_date_string = `${year}-${month}-${day} ${hour}:${min}:${sec}`;
                x.innerHTML=local_date_string;}

function timezoneChanging(){
        document.querySelectorAll(".post-time").forEach(
            x => timezoneChangingOne(x)
                );
    }



    $name = (x) => document.getElementsByName(x);
    $ = (x) => document.getElementById(x);
    var httpRequest;
    $("submit_post").addEventListener('click', make_req);

async function make_req() {

    post_text = $('post_text').value;
    post_privilage = $('privil_choosing').value;

    if (post_text != ""){

        await fetch('/api/post', {
        method: 'POST',
        headers: {
            "X-CSRFToken": "{{ csrf_token }}",
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "privilage" : post_privilage,
            "text": post_text,
        })
        
        }).then(response => {if (response.ok == true)
            {$('post_text').value = "";
            getLatestPosts(); // wait for a moment then get latest posts
            }}
            
        );
    }



}

function auto_expand(element) {
    element.style.height = 6+"em";
    element.style.height = (element.scrollHeight)+"px";
}

timezoneChanging();

function adjust_post_text(){
    var post_text = $("post_text");
    post_text.style.height = 6+"em";
    post_text.style.height = (post_text.scrollHeight)+"px";
}


async function getRecentPostsCounter(){
    latest_time_string = $("latest_time").innerHTML;
    await fetch('/api/get_recent_posts_counter', {
        method: 'POST',
        headers: {
            "X-CSRFToken": "{{ csrf_token }}",
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "latest_time" : latest_time_string,
    })

}).then(response => response.json())
    .then(the_json => {console.log(the_json);let newer_posts_num = the_json['newer_posts_num'];
if (newer_posts_num == 1)
    {   $("new_post_notifier").style.display = "block";
        $("new_post_notifier").innerHTML = `1 new post`}
if (newer_posts_num > 1)
    {   $("new_post_notifier").style.display = "block";
        $("new_post_notifier").innerHTML = `${newer_posts_num} new posts`} });

}

var intervalID = window.setInterval(getRecentPostsCounter, 20000);

function appendPostToTheEnd(post){
    var public_tl = $("public_timeline");
    var new_div = createPostDiv(post);


    public_tl.insertBefore(new_div, $('previous_post_loader'));
}

async function getPreviousPosts(){
    var new_oldest_time;
    oldest_time_string = $("oldest_time").innerHTML;
    await fetch('/api/get_previous_posts', {
        method: 'POST',
        headers: {
            "X-CSRFToken": "{{ csrf_token }}",
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "oldest_time" : oldest_time_string,
    }) }).then(response => response.json())
    .then(item => {new_oldest_time_raw = item['oldest_time'];
                    new_oldest_time =  new_oldest_time_raw.substring(0,10) + " " + new_oldest_time_raw.substring(11,26) + "+0000";
                    return item['older_posts'];})
    .then(posts => {if (posts.length == 0)
                    {$('previous_post_loader').style.display = 'none';}
                    else{posts.forEach(post => appendPostToTheEnd(post));
                                $('oldest_time').innerHTML = new_oldest_time;}})
}


async function getLatestPosts(){
    latest_time_string = $("latest_time").innerHTML;
    await fetch('/api/get_latest_posts', {
        method: 'POST',
        headers: {
            "X-CSRFToken": "{{ csrf_token }}",
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "latest_time" : latest_time_string,
    }) }).then(response => response.json())
    .then(item => item['newer_posts'])
    .then(posts => {posts.forEach(post => addPostToTheBeginning(post));
            $('new_post_notifier').style.display = "none";
            var nowTime = new Date();
            var nowTimeString = nowTime.toISOString();
            $("latest_time").innerHTML = nowTimeString.substring(0,10) + " " + nowTimeString.substring(11,23) + "000+0000"; });
}

function createPostDiv(post){
    
    var new_div = document.createElement("div");
    new_div.id =  `post-${post.id}`;
    new_div.className = "post";
    post_text_replaced = post.text.replace(/(\r\n|\n\r|\r|\n)/g, "<br>" );
    console.log(post_text_replaced);
    new_div.innerHTML = `<a href="user/${post.poster_username}">${post.poster_shown_name}</a>
    at <a href="post/${post.id}" class="post-time">${post.post_time}</a><br>
    ${post_text_replaced}<br>
    <span id="reply-${post.id}" value="${post.id}" class="reply">↩️</span>
    - <span id="repost-${post.id}" value="${post.id}" class="repost">🔁</span> 
    - <span id="fav-${post.id}" value="${post.id}" class="fav">⭐</span>`;

    new_div_timestamp = new_div.getElementsByClassName('post-time')[0];

    timezoneChangingOne(new_div_timestamp);

    return new_div;
}

function addPostToTheBeginning(post){
    var public_tl = $("public_timeline");
    var new_div = createPostDiv(post);


    public_tl.insertBefore(new_div, $('latest_time').nextSibling);

}

$("new_post_notifier").addEventListener('click', getLatestPosts);
$("previous_post_loader").addEventListener('click', getPreviousPosts);



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