// ==UserScript==
// @name        Patchouli
// @description An image searching/browsing tool on Pixiv
// @namespace   https://github.com/FlandreDaisuki
// @include     http://www.pixiv.net/*
// @require     https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js
// @require     https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.1/URI.min.js
// @version     2017.02.06
// @author      FlandreDaisuki
// @grant       none
// @noframes
// @downloadURL none
// ==/UserScript==
/* jshint esnext: true */

function fetchWithcookie(url) {
    return fetch(url, {credentials: 'same-origin'})
        .then(response => response.text())
        .catch(err => { console.error(err); });
}

function getBookmarkCountAndTags(illust_id) {
    const url = `http://www.pixiv.net/bookmark_detail.php?illust_id=${illust_id}`;
    
    return fetchWithcookie(url)
        .then(html => parseToDOM(html))
        .then(doc => $(doc))
        .then($doc => {
            let m = $doc.find('a.bookmark-count').text();
            const bookmark_count =  m ? parseInt(m) : 0;
            const tags = Array.from($doc.find('ul.tags:first a')).map(x => x.innerText);

            return {
                bookmark_count,
                illust_id,
                tags,
            };
        })
        .catch(err => { console.error(err); });
}

function getBatch(url) {
    return fetchWithcookie(url)
        .then(html => parseToDOM(html))
        .then(doc => $(doc))
        .then($doc => {
            removeAnnoyance($doc);
            const next = $doc.find('.next a').attr('href');
            const nextLink = (next) ? new URI(BASE.baseURI).query(next).toString() : null;
            
            const illust_ids = $doc
                .find('li.image-item > a.work')
                .toArray()
                .map(x => URI.parseQuery($(x).attr('href')).illust_id);

            return {
                nextLink,
                illust_ids,
            };
        })
        .catch(err => { console.error(err); });
}

/**
 * return object which key is illust_id
 */
function getIllustsDetails(illust_ids) {
    const api = `http://www.pixiv.net/rpc/index.php?mode=get_illust_detail_by_ids&illust_ids=${illust_ids.join(',')}&tt=${BASE.tt}`;
    
    return fetchWithcookie(api).then(json => JSON.parse(json).body).catch(err => { console.error(err); });
}

/**
 * return an array
 */
function getUsersDetails(user_ids) {
    const api = `http://www.pixiv.net/rpc/get_profile.php?user_ids=${user_ids.join(',')}&tt=${BASE.tt}`;
    return fetchWithcookie(api).then(json => JSON.parse(json).body).catch(err => { console.error(err); });
}

function parseDataFromBatch(batch) {
    const illust_d = batch.illust_d;
    const user_d = batch.user_d;
    const bookmark_d = batch.bookmark_d;

    return batch.illust_ids
        .filter(x => x)
        .map(x => {
            const iinfo = illust_d[x];
            const uinfo = user_d[iinfo.user_id];
            const binfo = bookmark_d[x];
            const is_ugoira = iinfo.illust_type === '2';
            const is_manga = iinfo.illust_type === '1';
            const src150 = (is_ugoira) ?
                iinfo.url.big.replace(/([^-]+)(?:-original)([^_]+)(?:[^\.]+)(.+)/,'$1-inf$2_s$3') : 
                iinfo.url.m.replace(/600x600/,'150x150');
            
            return {
                is_ugoira,
                is_manga,
                src150,
                srcbig: iinfo.url.big,
                is_multiple: iinfo.is_multiple,
                illust_id: iinfo.illust_id,
                illust_title: iinfo.illust_title,
                user_id: uinfo.user_id,
                user_name: uinfo.user_name,
                is_follow: uinfo.is_follow,
                tags: binfo.tags,
                bookmark_count: binfo.bookmark_count,
            };
        });
}

function parseToDOM(html) {
    return (new DOMParser()).parseFromString(html, 'text/html');
}

function removeAnnoyance($doc = $(document)) {
    [
        'iframe',
        //Ad
        '.ad',
        '.ads_area',
        '.ad-footer',
        '.ads_anchor',
        '.ads-top-info',
        '.comic-hot-works',
        '.user-ad-container',
        '.ads_area_no_margin',
        //Premium
        '.ad-printservice',
        '.bookmark-ranges',
        '.require-premium',
        '.showcase-reminder',
        '.sample-user-search',
        '.popular-introduction',
    ].forEach((e) => {
        $doc.find(e).remove();
    });
}

const BASE = (() => {
    const bu = new URI(document.baseURI);
    const pn = bu.pathname();
    const ss = URI.parseQuery(bu.query());
    const baseURI = bu.toString();
    const tt = $('input[name="tt"]').val();
    const container = $('li.image-item').parent()[0];
    const $fullwidthElement = $('#wrapper div:first');

    let supported = true;
    let li_type = 'search';
    /** li_type - the DOM type to show li.image-item
     *
     *  'search'(default) : illust_150 + illust_title + user_name + bookmark_count
     *  'member-illust'   : illust_150 + illust_title +           + bookmark_count
     *  'mybookmark'      : illust_150 + illust_title + user_name + bookmark_count + checkbox + editlink
     */

    if (pn === '/member_illust.php' && ss.id) {
        li_type = 'member-illust';
    } else if (pn === '/search.php') {
    } else if (pn === '/bookmark.php' && !ss.type) {
        if (!ss.id) {
            li_type = 'mybookmark';
        }
    } else if (pn === '/bookmark_new_illust.php') {
    } else if (pn === '/new_illust.php') {
    } else if (pn === '/mypixiv_new_illust.php') {
    } else if (pn === '/new_illust_r18.php') {
    } else if (pn === '/bookmark_new_illust_r18.php') {
    } else {
        supported = false;
    }

    return {
        tt,
        baseURI,
        li_type,
        supported,
        container,
        $fullwidthElement,
    };
})();



Vue.filter('illust_href', function(illust_id) {
    return 'http://www.pixiv.net/member_illust.php?mode=medium&illust_id='+illust_id;
});

Vue.component('img150', {
    props:['thd'],
    template: `<a class="work _work"
                 :href="thd.illust_id | illust_href"
                 :class="{
                    'ugoku-illust': thd.is_ugoira,
                    'manga': thd.is_manga,
                    'multiple': thd.is_multiple}">
                    <div class="_layout-thumbnail"><img class="_thumbnail" :src="thd.src150"></img></div></a>`,

});

Vue.component('illust-title', {
    props:['thd'],
    template: '<a :href="thd.illust_id | illust_href"><h1 class="title" :title="thd.illust_title">{{thd.illust_title}}</h1></a>',
});

Vue.component('user-name', {
    props:['thd'],
    template: `<a class="user ui-profile-popup"
                 :href="thd.user_id | user_href"
                 :title="thd.user_name"
                 :data-user_id="thd.user_id"
                 :data-user_name="thd.user_name"
                 :class="{'followed': thd.is_follow}"> {{thd.user_name}}</a>`,
    filters: {
        user_href: function(user_id) {
            return 'http://www.pixiv.net/member_illust.php?id='+user_id;
        },
    },
});

Vue.component('count-list', {
    props:['thd'],
    template: `<ul class="count-list">
                    <li v-if="thd.bookmark_count > 0">
                        <a class="bookmark-count _ui-tooltip"
                          :href="thd.illust_id | bookmark_detail_href"
                          :data-tooltip="thd.bookmark_count | datatooltip">
                            <i class="_icon sprites-bookmark-badge"></i>{{thd.bookmark_count}}</a></li></ul>`,
    filters: {
        datatooltip: function(bookmark_count) {
            return bookmark_count+'件のブックマーク';
        },
        bookmark_detail_href: function(illust_id) {
            return 'http://www.pixiv.net/bookmark_detail.php?illust_id='+illust_id;
        },
    },
});

Vue.component('edit-link', {
    props:['thd'],
    template: '<a :href="thd.illust_id | edit_href" class="edit-work"><span class="edit-bookmark edit_link">編集</span></a>',
    filters: {
        edit_href: function(illust_id) {
            return `http://www.pixiv.net/bookmark_add.php?type=illust&illust_id=${ illust_id }&tag=&rest=show&p=1`;
        },
    },
});

Vue.component('imageitem-search', {
    props:['thdata'],
    template: `<li class="image-item">
                   <img150 :thd="thdata"></img150>
                   <illust-title :thd="thdata"></illust-title>
                   <user-name :thd="thdata"></user-name>
                   <count-list :thd="thdata"></count-list>
               </li>`,
});

Vue.component('imageitem-member-illust', {
    props:['thdata'],
    template: `<li class="image-item">
                    <img150 :thd="thdata"></img150>
                    <illust-title :thd="thdata"></illust-title>
                    <count-list :thd="thdata"></count-list>
               </li>`,
});

Vue.component('imageitem-mybookmark', {
    props:['thdata'],
    template: `<li class="image-item">
                    <bookmark-checkbox v-if="false" :thd="thdata"></bookmark-checkbox>
                    <img150 :thd="thdata"></img150>
                    <illust-title :thd="thdata"></illust-title>
                    <user-name :thd="thdata"></user-name>
                    <count-list :thd="thdata"></count-list>
                    <edit-link :thd="thdata"></edit-link>
               </li>`,
});

function setupHTML() {
    $(`
    <div id="Koa-controller" class="tachi">
        <div id="Koa-controller-child">
            <div id="Koa-found"><span id="Koa-found-value">0</span></div>
            <div id="Koa-bookmark">
                <span>★書籤</span>：
                <input id="Koa-bookmark-input" type="number" min="0" step="1" value="0" required/>
            </div>
            <div id="Koa-btn">
                <input id="Koa-btn-input" type="button" value="找"/>
            </div>
            <div id="Koa-options">
                全<input id="Koa-fullwidth-input" type="checkbox"/>
                排序<input id="Koa-ordering-input" type="checkbox"/>
            </div>
        </div>
    </div>`).appendTo('body');

    $(`
    <style>
    #Koa-controller.tachi {
        background-color: #8F2019;
        position: fixed;
        bottom: 0px;
        left: 0px;
        margin: 10px 30px;
        padding: 15px 8px 0px;
        border-radius: 15px 15px 8px 8px;
        font-size: 16px;
        cursor: default;
        z-index: 10;
    }

    #Koa-controller::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 30px 0 0 100px;
        border-color: transparent transparent transparent #000000;
        left: 0px;
        top: 0px;
        z-index: -1;
        transform-origin: 50% 50%;
        transform: translate(-45px,40px) skew(20deg, 0deg) rotate(-20deg);
    }

    #Koa-controller::after {
        border-width: 0 0 30px 100px;
        border-color: transparent transparent #000000 transparent;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        right: 0px;
        top: 0px;
        z-index: -1;
        transform-origin: 50% 50%;
        transform: translate(45px,40px) skew(-20deg, 0deg) rotate(20deg);
    }

    #Koa-controller.chibi {
        width: 60px;
        background-color: #8F2019;
        position: fixed;
        bottom: 0px;
        left: 0px;
        margin: 10px 30px;
        padding: 10px 4px 15px;
        border-radius: 50%;
        font-size: 16px;
        cursor: default;
        z-index: 10;
        color: white;
    }
    
    #Koa-controller.chibi::before {
        transform: translate(-45px,10px) skew(20deg, 0deg) rotate(-10deg) scale(0.4);
    }

    #Koa-controller.chibi::after {
        transform: translate(45px,10px) skew(-20deg, 0deg) rotate(10deg) scale(0.4);
    }
    
    #Koa-controller.tachi #Koa-controller-child {
        background-color: #FEE6CA;
        border-bottom: 30px solid black;
        border-radius: 10px 10px 20px 20px;
    }

    #Koa-controller.chibi #Koa-controller-child {
        background-color: #8F2019;
        width: 100%;
        height: 30px;
        border-radius: 50%;
        margin-top: -2px;
    }

    #Koa-controller.chibi #Koa-controller-child::after {
        content: " ' ' ";
        display: block;
        text-align: center;
        font-size: 32px;
        padding-right: 5px;
        transform: rotate(10deg);
    }
    
    #Koa-controller.chibi #Koa-controller-child > div {
        display: none;
    }

    #Koa-found,
    #Koa-btn {
        text-align: center;
    }

    #Koa-controller.tachi #Koa-btn {
        border-left: 15px solid white;
        border-right: 15px solid white;
        background-color: black;
        color: white;
    }

    #Koa-controller.tachi #Koa-options {
        border-left: 15px solid white;
        border-right: 15px solid white;
        background-color: black;
        color: white;
    }

    #Koa-bookmark > span {
        color: #0069b1;
        background-color: #cceeff;
    }

    input#Koa-bookmark-input::-webkit-inner-spin-button, 
    input#Koa-bookmark-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input#Koa-bookmark-input {
        -moz-appearance: textfield;
    }

    input#Koa-bookmark-input {
        border: none;
        background-color: transparent;
        padding: 0px;
        color: blue;
        font-size: 16px;
        display: inline-block;
        width: 50px;
        cursor: ns-resize;
        text-align: center;
    }

    input#Koa-bookmark-input:focus {
        cursor: initial;
    }

    #Koa-controller.tachi #Koa-btn-input {
        border: none;
        background-color: #FFFF00;
        height: 100%;
        margin: 0px auto;
        display: block;
        border-radius: 0% 0% 50% 50%;
        font-size: 22px;
    }

    #Koa-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-left: initial;
    }

    .fullwidth {
        width: initial;
    }

    .layout-a.fullwidth {
        display: flex;
        flex-direction: row-reverse;
    }

    .layout-a.fullwidth .layout-column-2{
        flex: 1;
        margin-left: 20px;
    }

    .layout-body.fullwidth,
    .layout-a.fullwidth {
        margin: 10px 20px;
    }
    .followed.followed.followed {
        font-weight: bold;
        color: red;
    }
    </style>`).appendTo('head');
}

function setupEvent() {

    const $KoaController = $('#Koa-controller');
    const $KoaBookmarkInput = $('#Koa-bookmark-input');
    const $KoaBtnInput = $('#Koa-btn-input');
    const $KoaFullwidthInput = $('#Koa-fullwidth-input');
    const $KoaOrderingInput = $('#Koa-ordering-input');

    $KoaController
        .on('click', function() {
            if($(this).hasClass('chibi')){
                $(this).removeClass('chibi');
                $(this).addClass('tachi');
            }
        })
        .on('mouseleave', function() {
            $(this).addClass('chibi');
            $(this).removeClass('tachi');
            $KoaBookmarkInput.focusout();
        });


    $KoaBookmarkInput
        .on('wheel', function(event) {
            this.blur();
            if(event.originalEvent.deltaY > 0) {
                this.stepDown(20);
            } else {
                this.stepUp(20);
            }
            MuQ.Koakuma.$data.limit = parseInt(this.value);
            return false;
        })
        .on('focusout', function(event) {
            this.blur();
            if(!this.validity.valid){
                console.log(this.validationMessage);
            } else {
                MuQ.Koakuma.$data.limit = parseInt(this.value);
            }
        });

    $KoaBtnInput.click(function(event) {
        if(!$KoaBookmarkInput[0].validity.valid){
            console.log($KoaBookmarkInput[0].validationMessage);
        } else {
            if (MuQ.intervalID) {
                clearInterval(MuQ.intervalID);
                MuQ.intervalID = null;
                this.value = '找';
                $KoaController.removeClass('working');
            } else {
                MuQ.intervalID = setInterval(function(){
                    MuQ.nextPage();
                }, 1000);
                this.value = '停';
                $KoaController.addClass('working');
            }
        }
        return false;
    });

    $KoaFullwidthInput.click(function(event){
        const node = BASE.$fullwidthElement;
        if (this.checked) {
            node.addClass('fullwidth');
        } else {
            node.removeClass('fullwidth');
        }
    });

    $KoaOrderingInput.click(function(event){
        const order_t = this.checked ? 'bookmark_count' : '';
        MuQ.Koakuma.$data.order_t = order_t;
    });
}

const MuQ = {
    nextLink: location.href,
    intervalID: null,
    init: function() {
        if(BASE.supported){
            if(BASE.container) {
                BASE.container.id = 'Koa-container';
            }
            $('#wrapper').width('initial');
            setupHTML();
            setupEvent();

            this.Koakuma.$watch('thumbs', function(newVal, oldVal) {
                $('#Koa-found-value').text(newVal.length);
            });

            this.page = this.np_gen();
            this.np = this.page.next().value.then(v => {
                this.Koakuma.$mount('#Koa-container');
                return v;
            });
        }
    },
    nextPage: function() {
        this.np = this.np
            .then(n => this.page.next(n.nextLink).value )
            .catch(err => {
                console.error(err);
                clearInterval(this.intervalID);
                this.intervalID = null;
                $('#Koa-btn-input').attr('disabled', true).val('完');
            });
    },
    np_gen: function* () {
        while(this.nextLink) {
            this.nextLink = yield getBatch(this.nextLink)
                .then(bat => {
                    return getIllustsDetails(bat.illust_ids)
                        .then(illust_d => {
                            bat.illust_d = illust_d;
                            return bat;
                        });
                })
                .then(bat => {
                    return getUsersDetails(Object.keys(bat.illust_d)
                        .map((k) => bat.illust_d[k].user_id))
                        .then(user_d => {
                            bat.user_d = {};
                            user_d.forEach(x => bat.user_d[x.user_id] = x);
                            return bat;
                        });
                })
                .then(bat => {
                    return Promise.all(Object.keys(bat.illust_d)
                        .map((k) => bat.illust_d[k])
                        .map(x => getBookmarkCountAndTags(x.illust_id)))
                        .then(bookmark_d => {
                            bat.bookmark_d = {};
                            bookmark_d.forEach(x => bat.bookmark_d[x.illust_id] = x);
                            return bat;
                        });
                })
                .then(bat => {
                    this.Koakuma.$data.thumbs.push(...parseDataFromBatch(bat));
                    return bat;
                }).catch(err => {
                    console.error(err);
                });
        }
    },
    Koakuma: new Vue({
        template: `<ul><component :is="li_type" v-for="th in thumbs | bookmark_gt limit | orderBy order_t -1" :thdata="th"></component></ul>`,
        data: {
            thumbs: [],
            order_t: '',
            limit: 0,
        },
        computed: {
            li_type: function() {
                return 'imageitem-' + BASE.li_type;
            },
        },
        filters: {
            bookmark_gt: function(data, limit) {
                return data.filter(x => x.bookmark_count >= limit);
            },
        },
    }),
};

removeAnnoyance();
MuQ.init();

//Debugging
window.fetchWithcookie = fetchWithcookie;
window.getBookmarkCountAndTags = getBookmarkCountAndTags;
window.getBatch = getBatch;
window.getIllustsDetails = getIllustsDetails;
window.getUsersDetails = getUsersDetails;
window.parseToDOM = parseToDOM;
window.parseDataFromBatch = parseDataFromBatch;
window.removeAnnoyance = removeAnnoyance;
window.BASE = BASE;
window.MuQ = MuQ;
window.Vue = Vue;
window.URI = URI;