// ==UserScript==
// @name         New Userscript
// @namespace    https://forums.mst3k.com/*
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://forums.mst3k.com/*
// @icon         https://www.google.com/s2/favicons?domain=mst3k.com
// @grant        all
// ==/UserScript==


(function() {
    'use strict';

    const { REPLY } = require('discourse/models/composer').default;
    const composer = Discourse.__container__.lookup('controller:composer');


    var pageType;
    var pageId;
    var topicPost;

    var postStream;
    var streamIsEmpty = false;

    var posts;
    var postContainer;
    var loadedPosts = [];

    var insertedPosts = [];

    var csrf;

    setInterval(
        function(){
            if ((window.location.pathname.split("/")[1] == "t") && !(window.location.pathname.split("/")[3] == pageId)){
                if ( typeof window.location.pathname.split("/")[4] !== "undefined" ){
                    location.href = "/t/" + window.location.pathname.split("/")[3];
                    return;
                }
                pageType = window.location.pathname.split("/")[1];
                pageId   = window.location.pathname.split("/")[3];

                csrf = document.getElementsByName("csrf-token")[0].content;

                loadPostJson();
            }
            if ( !(window.location.pathname.split("/")[1] == "t") ){
                pageType = window.location.pathname.split("/")[1];
                pageId   = null;
            }
        }
    ,1000);

    function loadPostJson(){
        /*
        fetch( window.location.pathname + ".json" )
            .then(response => response.json())
            .then(data => createThreadedView(data));
            */
        var topic = Discourse.__container__.lookup("controller:topic").get("model");
        postStream = topic.postStream.stream;

        createThreadedView(topic);
    }

    function createThreadedView(data){
        console.log(data);
        postContainer = document.querySelector(".container.posts");
        postContainer.style.display = "block";
        posts = data.postStream.posts;

        postContainer.innerHTML = `
        <STYLE>
        .container.posts {
        }
        .threaded-post {
            display:block;
            box-sizing:border-box;
            width:100%;
            margin:0px;
            margin-top:10px;
            padding:10px;
            background:rgba(128,128,128,0.05);
            border-radius:8px;
            box-shadow:0px 2px 8px rgba(0,0,0,0.33);
        }
        .threaded-avatar {
            border-radius:50%;
        }
        .threaded-username {
            font-size:larger;
            font-weight:600;
            margin:10px;
        }
        .threaded-user-title, .threaded-post-date {
            color:#888;
        }
        .threaded-post-date {
            float:right;
        }
        .threaded-collapse-toggle {
            float:right;
            margin:5px;
            width:16px;
            height:16px;
            line-height:8px;
            text-align:center;
        }
        .threaded-post.collapsed > * {
           display:none;
        }
        .threaded-post.collapsed > .threaded-post-header {
           display:block;
           font-size:smaller;
           color:#888;
        }
        .threaded-post.collapsed > .threaded-post-header > img {
           display:none;
        }
        .post-action-zone > * {
           margin-right:10px;
        }
        .threaded-post-liked {
           background: #ff8888;
           border:1px solid #888;
           border-radius:4px;
        }
        </STYLE>`;

        for ( var i = 0; i < posts.length; i++ ){
            createPostElement(posts[i], i);

            insertedPosts[ posts[i].post_number ] = posts[i];

            var parentPost = insertedPosts[ posts[i].reply_to_post_number ];
            var parentElement = postContainer;

            if ( parentPost ){
                parentElement = parentPost.repliesElement;
            } else {
                if ( i > 0 ){ parentElement = posts[0].repliesElement; }
            }
            console.log(posts[i].element);
            parentElement.appendChild( posts[i].element );
        }

        if ( postStream.length > 0 ){
            console.log("*******************");
            console.log("**** FETCHING *****");
            console.log("*******************");
            loadMorePosts();
        }

    }

    function loadMorePosts(){
        var url = "/t/"+pageId+"/posts.json?";
        for ( var i = 0; i < 20; i++ ){
            if ( postStream[i] ){
                if ( i !== 0 ){ url = url + "&"; }
                url = url + "post_ids[]="+postStream[i];
            }
        }
        console.log(url);
        fetch( url ).then(response => response.json()).then( function(data){
            addThreadedPosts(data.post_stream.posts);
        });
    }

    function addThreadedPosts(newPosts){
        var start = posts.length;
        posts = posts.concat(newPosts);

        console.log(posts);

        for ( var i = start; i < posts.length; i++ ){
            createPostElement(posts[i], i);

            insertedPosts[ posts[i].post_number ] = posts[i];

            var parentPost = insertedPosts[ posts[i].reply_to_post_number ];
            var parentElement = postContainer;

            if ( parentPost ){
                parentElement = parentPost.repliesElement;
            } else {
                if ( i > 0 ){ parentElement = posts[0].repliesElement; }
            }
console.log("parent:");
            console.log(parentPost);
console.log("child:");
            console.log(posts[i]);
            parentElement.appendChild( posts[i].element );
        }

        if ( postStream.length > 0 ){
            console.log("*******************");
            console.log("**** FETCHING *****");
            console.log("*******************");
            loadMorePosts();
        }
    }

    function createPostElement(post, postId){
        var postDate = new Date(post.created_at);

        postStream = postStream.remove( post.id );

        post.element;
        post.element = document.createElement("div");
        post.element.setAttribute("id","post-"+postId);
        post.element.setAttribute("class","threaded-post");
        post.element.setAttribute("data-id",post.id);

        post.headerElement;
        post.headerElement = document.createElement("div");
        post.headerElement.setAttribute("id","post-header-"+postId);
        post.headerElement.setAttribute("class","threaded-post-header");
        post.headerElement.innerHTML = `
        <img src="`+post.avatar_template.replace("{size}","40")+`" class="threaded-avatar">
        <span class="threaded-username">`+post.username+`</span>
        <span class="threaded-user-title">`+post.user_title+`</span>
        `;

        post.dateTime = document.createElement("span");
        post.dateTime.setAttribute("class","threaded-post-date");
        post.dateTime.innerText = postDate.toLocaleDateString()+" "+postDate.toLocaleTimeString();

        post.collapse = document.createElement("button");
        post.collapse.setAttribute("class","threaded-collapse-toggle");
        post.collapse.innerText = "-";
        post.collapse.addEventListener("click",toggleCollapse);

        post.headerElement.appendChild(post.collapse);
        post.headerElement.appendChild(post.dateTime);

        post.bodyElement;
        post.bodyElement = document.createElement("div");
        post.bodyElement.setAttribute("id","post-body-"+postId);
        post.bodyElement.setAttribute("class","threaded-post-body");
        post.bodyElement.innerHTML = post.cooked;

        post.repliesElement;
        post.repliesElement = document.createElement("div");
        post.repliesElement.setAttribute("id","post-replies-"+postId);
        post.repliesElement.setAttribute("class","threaded-post-replies");

        post.actionZone;
        post.actionZone = document.createElement("div");
        post.actionZone.setAttribute("id","post-action-zone-"+postId);
        post.actionZone.setAttribute("class","post-action-zone");


        post.replyButton;
        post.replyButton = document.createElement("button");
        post.replyButton.setAttribute("id","post-reply-button-"+postId);
        post.replyButton.setAttribute("class","threaded-post-reply-button");
        post.replyButton.innerText = "Reply";
        post.replyButton.addEventListener("click",function(){
            composer.open({
                action: REPLY,
                draftKey: 'post_'+post.id,
                post
            })
        });

            post.likeButton;
            post.likeButton = document.createElement("button");
            post.likeButton.setAttribute("id","post-reply-button-"+postId);
            post.likeButton.setAttribute("class","threaded-post-reply-button threaded-post-action-button");
            post.likeButton.innerText = "Like";

            if ( post.actions_summary[0].hasOwnProperty("acted") ){
                if ( post.actions_summary[0].acted ){
                    post.likeButton.classList.add("threaded-post-liked");
                }
            }

            post.likeButton.addEventListener("click",function(){

                postData( "/post_actions", "id="+post.id+"&post_action_type_id=2&flag_topic=false" );
            });

            post.likeCounter;
            post.likeCounter = document.createElement("span");
            post.likeCounter.setAttribute("id","post-like-counter-"+postId);
            post.likeCounter.setAttribute("class","post-like-counter");
            post.likeCounter.innerText = post.actions_summary[0].count;

            post.actionZone.appendChild(post.replyButton);
            post.actionZone.appendChild(post.likeButton);
            post.actionZone.appendChild(post.likeCounter);


        post.element.appendChild(post.headerElement);
        post.element.appendChild(post.bodyElement);
        post.element.appendChild(post.actionZone);
        post.element.appendChild(post.repliesElement);

    }

    function toggleCollapse(event){
        var thread = event.target.closest(".threaded-post");

        if ( thread.classList.contains("collapsed") ){
            thread.classList.remove("collapsed");
        } else {
            thread.classList.add("collapsed");
        }
    }




    Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};

async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'same-origin', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        "sec-fetch-dest": "empty",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-origin",
        "sec-gpc": "1",
        "x-csrf-token": csrf,
        "x-requested-with": "XMLHttpRequest",
        "discourse-logged-in": "true",
        "discourse-present": "true"
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: data // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}


})();