// ==UserScript==
// @name         lorka
// @namespace    http://tampermonkey.net/
// @version      0.1
// @author       vvn_black
// @match        https://www.linux.org.ru/*
// @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 } = data;

        var karma = document.createElement('div');
        karma.id = 'karma';

        var title = document.createElement('b');
        title.innerHTML = 'Карма: ';

        var thumbsUp = document.createElement('i');
        thumbsUp.style.cssText = 'margin-left:1em;cursor:pointer;';
        thumbsUp.id = `up`;
        thumbsUp.classList.add('fa', 'fa-thumbs-up');
        thumbsUp.addEventListener('click', () => {vote_karma(user, '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.id = `down`;
        thumbsDown.classList.add('fa', 'fa-thumbs-down');
        thumbsDown.addEventListener('click', () => {vote_karma(user, 'down');});

        karma.appendChild(title);
        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, up, down) => {
        const style = 'position: absolute; right: 3em; top: 0; margin-left=3em;';

        var score = document.createElement('div');
        score.id = `div-${a_id}`;
        score.style.cssText = 'text-align:right;margin-top:-40px;';

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

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

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

        return score;
    };

    const renderScores = data => {
        Object.keys(data).map(item => {
            const { up, down } = data[item];

            var article = document.querySelectorAll(`#comment-${item}`);
            if (!article.length) {
                article = document.querySelectorAll(`#topic-${item}`);
            }
            if (!article.length) {
                return;
            }

            const child = document.getElementById(`div-${item}`);
            if (child) {
                article[0].replaceChild(renderScore(item, up, down), child);
            } else {
                article[0].appendChild(renderScore(item, up, down));
            }
        });
    };


    // Append FontAwesome
    var head = document.getElementsByTagName('head')[0];
    var fa = document.createElement('link');
    fa.rel = 'stylesheet';
    fa.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());
    }

})();