// ==UserScript==
// @name         Get Twitch emojis
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  under construction ...
// @author       Lee-7723
// @match        https://www.twitch.tv/*
// @exclude      https://www.twitch.tv/
// @icon         https://static.twitchcdn.net/assets/favicon-16-52e571ffea063af7a7f4.png
// @grant        none
// @downloadURL none
// ==/UserScript==

'use strict';

function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

var main;
var emoji_btn;
var all_emojis = new Array();
var emojis;
var load_status;
var img_srcset = new Array();
var img_alt = new Array();



get_emoji_after_button ()
async function get_emoji_after_button () {
    await get_button()
    //await get_emoji()
    //console.log('loaded' + emoji_btn.getElementsByTagName('div')[0])
    main = document.getElementsByTagName('body')[0];
    emoji_btn.onclick = function(){output()}
}

//set_btn_click ()
//async function set_btn_click () {
//    emoji_btn.getElementBysTagName('div')[0].onclick = "function(){alert('clicked')}"
//    console.log('2nd' + emoji_btn)}
//}

async function get_button() {
    'use strict';
    for (var i = 0; !emoji_btn; i) {
        await sleep(1000);
        emoji_btn = document.querySelectorAll('button[data-a-target="emote-picker-button"]')[0];
        //console.log(emoji_btn)
    }
}

async function get_emoji() {
    
    for (var i = 0; !emojis; i) {
        console.log('starting to fetch emojis')
        await sleep(1000);
        all_emojis = document.getElementsByClassName('Layout-sc-nxg1ff-0 lmlxil');
        if(all_emojis.length == 1) emojis = all_emojis[0];
            else emojis = all_emojis[1]//.getElementsByTagName("img");
        //for (var j = 0; j < emojis.length; j++){
        //    console.log(emojis[j].srcset)
        //}
        if (emojis) {
            emojis = emojis.getElementsByTagName("img")
            for (var j = 0; j < emojis.length; j++) {
                if (j == 1) {
                    img_srcset[j-1] = emojis[j].srcset.replace(' 3.0x','').split(" 2.0x,")[1];
                } else {
                    img_srcset[j-1] = emojis[j].srcset.replace(' 3.0x','').split(" 2.0x, ")[1];
                }
                img_alt[j-1] = emojis[j].alt;
                //if (j != 0) console.log(img_alt[j-1])
        }
        //console.log(emojis)
        }
    }
}


async function output() {
    await get_emoji();
    var head;
    if(all_emojis.length == 1) head = all_emojis[0].children[0];
            else head = all_emojis[1].children[0];
    console.log(head)
    var log_button = document.createElement('div');
    log_button.className = "Layout-sc-nxg1ff-0 jreOmo";
    log_button.id = 'emoji_url_pop_box';
    log_button.innerHTML = `<div class="Layout-sc-nxg1ff-0 emWtQg">
    <div style="display: inherit;">
    <button id='emoji_url_pop' class="ScCoreButton-sc-1qn4ixc-0 jGqsfG ScButtonIcon-sc-o7ndmn-0 fNzXyu">
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentcolor">
    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 9h-4V3H9v6H5l7 7 7-7zm-8 2V5h2v6h1.17L12 13.17 9.83 11H11zm-6 7h14v2H5z"/></svg>
    </svg>
    </button>
    </div>
    </div>`;
    if(!document.getElementById('emoji_url_pop'))head.insertBefore(log_button , head.children[1])
    document.getElementById('emoji_url_pop').onclick=function(){pop_up()}
    function pop_up () {
        main.append(output_box)
    }


    var output_box = document.createElement("div")
    output_box.style = `position: absolute;
    top: 5rem; left: 5rem;
    padding: 10px;
    z-index: 9999;
    height: 500px;
    width: ${main.clientWidth*0.6}px;
    background-color: var(--color-background-alt);
    border-radius: 10px;
    border: 1.6px solid var(--color-background-pill);
    box-shadow: 4px 4px 10px #000a;`;
    output_box.id = "emoji_url_box";

    var output_text = document.createElement("textarea")
    output_text.style = `height: 400px; width: 100%; resize: none; padding: 12px; background-color: var(--color-background-input); color: var(--color-text-input);`;
    output_text.id = "emoji_url_text";

    var output_author = document.createElement("p")
    output_author.style = `color: #888; margin-left: 10px; position: absolute`;
    output_author.innerHTML = `script by Lee-7723`;

    var output_close_btn = document.createElement("button")
    output_close_btn.style = `left: ${output_box.style.width.replace('px','')-125}px; top: 8px; width: 50px; border-radius: 6px; `;
    output_close_btn.className = "ScCoreButton-sc-1qn4ixc-0 ScCoreButtonPrimary-sc-1qn4ixc-1 jGqsfG ksFrFH";
    output_close_btn.id = "emoji_url_close_btn";
    output_close_btn.onclick = function () {close_emoji_box()};
    output_close_btn.appendChild(document.createTextNode('关闭'))

    var preview_btn = document.createElement("button")
    preview_btn.style = `left: ${output_box.style.width.replace('px','')-140}px; top: 8px; width: 50px; border-radius: 6px; `;
    preview_btn.className = "ScCoreButton-sc-1qn4ixc-0 ScCoreButtonPrimary-sc-1qn4ixc-1 jGqsfG ksFrFH";
    preview_btn.id = "emoji_url_preview_btn";
    preview_btn.onclick = function () {preview_emoji_box()};
    preview_btn.appendChild(document.createTextNode('预览'))

    var usage = document.createElement("p")
    usage.style = `text-color: #FFF; margin-bottom: 10px; margin-left: 10px; font-weight: bold;`;
    usage.appendChild(document.createTextNode('将下面文本框中内容 全选->复制，粘贴到emoji.txt中'))
    usage.id = "function_readme";

    for (var i = 0; i < img_srcset.length; i++) {
        output_text.appendChild(document.createTextNode(img_alt[i] + ' ' + img_srcset[i] + '\n'))
    }
    output_box.append(usage,output_text,output_author,preview_btn,output_close_btn)
    //output_box.append()
/*     for (var j = 0; j < img_srcset.length; j++) {
        var pics = document.createElement("a")
        var pic_img ='<img src=' + img_srcset[j] + ' alt=' + img_alt[j] + '>';
        pics.innerHTML = pic_img;
        pics.href = img_srcset[j];
        pics.download = img_alt[j];
        output_box.appendChild(pics)
    } */
    //main.append(output_box)
}

function close_emoji_box() {
    document.getElementById('emoji_url_box').remove()//document.getElementById('emoji_url_box')
    document.getElementById('emoji_url_pop_box').remove()
}

function preview_emoji_box() {
    document.getElementById('emoji_url_text').style.display = 'none';
    var preview_box = document.createElement("div")
    preview_box.style = `height: 400px; width: 100%;
    resize: none; margin: 2px 2px 5px;
    padding: 12px;
    background-color: var(--color-background-input);
    color: var(--color-text-input);
    border: 1px solid rgb(118, 118, 118);
    border-radius: 2px;
    overflow-y: scroll`;
    preview_box.id = "emoji_url_preview";

    for (var j = 0; j < img_srcset.length; j++) {
        var pics = document.createElement("a")
        var pic_img =`<img src=${img_srcset[j]} alt=${img_alt[j]} style="margin: 5px; border: 2px solid #FFF; border-radius: 4px">`;
        pics.innerHTML = pic_img;
        pics.href = img_srcset[j];
        pics.target = 'view emoji';
        pics.download = img_alt[j];
        preview_box.appendChild(pics)
    }

    document.getElementById('emoji_url_box').insertBefore(preview_box , document.getElementById('emoji_url_box').getElementsByTagName('p')[1])
    document.getElementById("emoji_url_preview_btn").innerHTML = '返回';
    document.getElementById("function_readme").innerHTML = '下列表情点击可跳转，可以手动保存';
    document.getElementById("emoji_url_preview_btn").onclick = function () {return_emoji_url_box()};
}

function return_emoji_url_box() {
    document.getElementById('emoji_url_text').style.display = 'block';
    document.getElementById('emoji_url_preview').style.display = 'none';
    document.getElementById("emoji_url_preview_btn").innerHTML = '预览';
    document.getElementById("function_readme").innerHTML = '将下面文本框中内容 全选->复制，粘贴到emoji.txt中';
    document.getElementById("emoji_url_preview_btn").onclick = function () {return_emoji_preview_box()};
}

function return_emoji_preview_box() {
    document.getElementById('emoji_url_text').style.display = 'none';
    document.getElementById('emoji_url_preview').style.display = 'block';
    document.getElementById("emoji_url_preview_btn").innerHTML = '返回';
    document.getElementById("function_readme").innerHTML = '下列表情点击可跳转，可以手动保存';
    document.getElementById("emoji_url_preview_btn").onclick = function () {return_emoji_url_box()};
}