// ==UserScript==
// @name         lor karma and scores
// @namespace    http://tampermonkey.net/
// @version      0.2.0
// @author       vvn_black
// @match        https://www.linux.org.ru/*
// @updateURL    https://lorka.sytes.net/lorka.user.js
// @grant       none
// ==/UserScript==

(function() {
    'use strict';


    const articles = () => [...document.querySelectorAll('article.msg')].map(item => item.id.split('-')[1]);

    const get_score = ids => {
        fetch(`https://lorka.sytes.net/scores/?ids=${ids.join(',')}`)
            .then(response => response.json())
            .then(renderScores)
            .catch(error => console.log(error));
    };

    const vote_comment = (a_id, vote) => {
        fetch(`https://lorka.sytes.net/vote/${a_id}/${vote}`)
            .then(response => response.json())
            .then(json => {
                const data = {};
                data[a_id] = json;
                renderScores(data);
            })
            .catch(error => console.log(error));
    };

    const vote_karma = (user, vote = '') => {
        fetch(`https://lorka.sytes.net/karma/${user}/${vote}`)
            .then(response => response.json())
            .then(json => {
                renderKarma(json, user);
            })
            .catch(error => console.log(error));
    };

    const renderKarma = (data, user) => {
        const { up, down, vote } = data;

        var karma = document.createElement('div');
        karma.id = 'karma';
        karma.innerHTML = '<b>Карма: </b>';

        var thumbsUp = document.createElement('i');
        thumbsUp.style.cssText = 'margin-left:1em;cursor:pointer;';
        thumbsUp.classList.add('fa', vote === 'up' ? 'fa-thumbs-up' : 'fa-thumbs-o-up');
        thumbsUp.addEventListener('click', () => {vote_karma(user, vote === 'up' ? 'zero' : 'up');});

        var score = document.createElement('span');
        score.style.cssText = 'margin-left:1em;';
        score.innerHTML = `${up - down}`;

        var thumbsDown = document.createElement('i');
        thumbsDown.style.cssText = 'margin-left:1em;cursor:pointer;';
        thumbsDown.classList.add('fa', vote === 'down' ? 'fa-thumbs-down' : 'fa-thumbs-o-down');
        thumbsDown.addEventListener('click', () => {vote_karma(user, vote === 'down' ? 'zero' : 'down');});

        karma.appendChild(thumbsUp);
        karma.appendChild(score);
        karma.appendChild(thumbsDown);


        const vcard = document.querySelector('.vcard');
        const parent = vcard.parentNode;
        var child = document.getElementById('karma');
        if (child) {
            parent.replaceChild(karma, child);
        } else {
            parent.insertBefore(karma, vcard.nextSibling);
        }
    };

    const renderScore = (a_id, state = {}) => {
        const { up = 0, down = 0, vote = 'zero' } = state;

        var score = document.createElement('div');
        score.id = `score-${a_id}`;
        score.style.cssText = 'float: right;';

        var thumbsUp = document.createElement('i');
        thumbsUp.style.cssText = 'cursor:pointer;';
        thumbsUp.style.display = 'none';
        thumbsUp.classList.add('fa', vote === 'up' ? 'fa-thumbs-up' : 'fa-thumbs-o-up');
        thumbsUp.innerHTML = `<span>&nbsp;${up}</span>`;
        thumbsUp.addEventListener('click', () => {vote_comment(a_id, vote === 'up' ? 'zero' : 'up');});

        var handO = document.createElement('i');
        handO.classList.add('fa', 'fa-hand-o-right');
        handO.innerHTML = `<span>&nbsp;&nbsp;${up - down}</span>`;

        var thumbsDown = document.createElement('i');
        thumbsDown.style.cssText = 'margin-left:1em;cursor:pointer;';
        thumbsDown.style.display = 'none';
        thumbsDown.classList.add('fa', vote === 'down' ? 'fa-thumbs-down' : 'fa-thumbs-o-down');
        thumbsDown.innerHTML = `<span>&nbsp;${down}</span>`;
        thumbsDown.addEventListener('click', () => {vote_comment(a_id, vote === 'down' ? 'zero' : 'down');});

        score.appendChild(thumbsUp);
        score.appendChild(handO);
        score.appendChild(thumbsDown);

        score.addEventListener('mouseover', () => {
            handO.style.display = 'none';
            thumbsUp.style.display = 'inline';
            thumbsDown.style.display = 'inline';
        });
        score.addEventListener('mouseout', () => {
            thumbsUp.style.display = 'none';
            thumbsDown.style.display = 'none';
            handO.style.display = 'inline';
        });

        return score;
    };

    const renderScores = data => {
        Object.keys(data).map(item => {
            var article = document.querySelectorAll(`#comment-${item}`);
            if (!article.length) {
                article = document.querySelectorAll(`#topic-${item}`);
            }
            if (!article.length) {
                return;
            }

            var landing = article[0].getElementsByClassName('sign');

            const child = document.getElementById(`score-${item}`);
            if (child) {
                landing[0].replaceChild(renderScore(item, data[item]), child);
            } else {
                landing[0].appendChild(renderScore(item, data[item]));
            }
        });
    };


    // Append FontAwesome
    var head = document.getElementsByTagName('head')[0];
    var fa = document.createElement('link');
    fa.innerHTML = '<link rel="stylesheet" ' +
                   'href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />';
    head.appendChild(fa);

    // Entry point
    if (window.location.href.indexOf('profile') != -1) {
        vote_karma(window.location.href.split('/')[4]);
    } else {
        get_score(articles());
    }

})();