// ==UserScript==
// @name         油管评论编辑修改 youtube 搬运烤肉翻译man辅助
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  可以直接修改youtube视频评论区
// @author       manakanemu
// @match        *://*.youtube.com/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    (function (){
        const css = document.createElement('style')
        css.innerHTML = '#expander{cursor: pointer;}'
        document.head.appendChild(css)
    })();

    function itFormat(words){
        if(words === ''){
            return ''
        }else{
            return '<span-it dir="auto" class="italic style-scope yt-formatted-string">'+words+'</span-it>'
        }
    }
    function bfFormat(words){
        if(words === ''){
            return ''
        }else{
            return '<span-bold dir="auto" class="bold style-scope yt-formatted-string">'+words+'</span-bold>'
        }
    }
    function bbfFormat(words){
        if(words === ''){
            return ''
        }else{
            return '<strong>'+words+'</strong>'
        }
    }
    function colorFormat(words,color){
        if(words === ''){
            return ''
        }else{
            return '<span-color style="color:'+color+';">'+words+'</span-color>'
        }
    }
    function basicFormat(words){
            if(words === ''){
                return ''
            }else{
                return '<span dir="auto" class="style-scope yt-formatted-string">'+words+'</span>'
            }
    }
    function sizeFormat(words,size){
        if(words === ''){
            return ''
        }else{
            return '<span-size style="line-height:normal;font-size:'+size+'px;">'+words+'</span-size>'
        }
    }
    function newlineFormat(words){
       return  words+'<span dir="auto" class="style-scope yt-formatted-string">\n</span>'
    }


    function parseBracketStart(string,index){
        if(string[index] !== '{'){
            return -1
        }else{
            let count = 1
            for(let i = index+1;i<string.length;i++){
                if(string[i] === '{' && string[i-1] !== '\\'){
                    count += 1
                }
                if(string[i] === '}' && string[i-1] !=='\\'){
                    count -= 1
                }
                if(count === 0){
                    return i
                }
            }
            return -1
        }
    }

    function parseKey(string,key,group=0,times = 1){
        let index = string.search(key)
        const pairs = new Array()
        let t= 0
        while(index > -1 && t < times){
            const keyword = string.substring(index).match(key)[group]
            const start = index + keyword.length-1
            const end = parseBracketStart(string,start)
            pairs.push([index,start,end])
            const newIndex = string.substring(index+1).search(key)
            if(newIndex > -1){
                index += newIndex+1
            }else{
                index = newIndex
            }
            t += 1
        }
        return pairs
    }
    function parseIt(string){
        let pair = parseKey(string,/\\it{/)
        while(pair.length > 0){
            string = string.substring(0,pair[0][0]) + itFormat(string.substring(pair[0][1]+1,pair[0][2])) + string.substring(pair[0][2]+1)
            pair = parseKey(string,/\\it{/)
        }
        return string
    }

    function parseBF(string){
        let pair = parseKey(string,/\\bf{/)
        while(pair.length > 0){
            string = string.substring(0,pair[0][0]) + bfFormat(string.substring(pair[0][1]+1,pair[0][2])) + string.substring(pair[0][2]+1)
            pair = parseKey(string,/\\bf{/)
        }
        return string
    }
    function parseBbf(string){
        let pair = parseKey(string,/\\bbf{/)
        while(pair.length > 0){
            string = string.substring(0,pair[0][0]) + bbfFormat(string.substring(pair[0][1]+1,pair[0][2])) + string.substring(pair[0][2]+1)
            pair = parseKey(string,/\\bbf{/)
        }
        return string
    }

    function parseColor(string){
        let pair = parseKey(string,/\\color\{.*?\}\{/)
        while(pair.length > 0){
            const color = string.substring(pair[0][0],pair[0][1]).match(/\{(.*?)\}/)[1]
            string = string.substring(0,pair[0][0]) + colorFormat(string.substring(pair[0][1]+1,pair[0][2]),color) + string.substring(pair[0][2]+1)
            pair = parseKey(string,/\\color\{.*?\}\{/)
        }
        return string
    }
    function parseSize(string){
        let pair = parseKey(string,/\\size\{.*?\}\{/)
            while(pair.length > 0){
                const size = string.substring(pair[0][0],pair[0][1]).match(/\{(.*?)\}/)[1]
                string = string.substring(0,pair[0][0]) + sizeFormat(string.substring(pair[0][1]+1,pair[0][2]),size) + string.substring(pair[0][2]+1)
                pair = parseKey(string,/\\size\{.*?\}\{/)
            }
            return string
    }
    function parseNormal(string){
        return basicFormat(string)
    }
    function parseComments(string,newline=true){
        let html = parseBF(string)
        html = parseBbf(html)
        html = parseIt(html)
        html = parseColor(html)
        html = parseSize(html)
        // html = parseNormal(html)
        if(newline){
            return newlineFormat(html)
        }else{
            return html
        }
    }

    function commentClick(){
        const container = this.getElementsByTagName('yt-formatted-string')[1]
        let strings = ''
        if(container.children.length == 0){
            strings += container.innerText
        }else{
            const raw = container.innerHTML
            strings = raw
            strings = strings.replace(/\n/g,'#%')
            strings = strings.replace(/<span dir="auto" class="style-scope yt-formatted-string">#%<\/span>/g,'#%')
            // color
            while(strings.search(/<span-color style="color:(.*?);">(.*?)<\/span-color>/) > -1){
                strings = strings.replace(/<span-color style="color:(.*?);">(.*?)<\/span-color>/g,'\\color{$1}{$2}')
            }
            // size
            while(strings.search(/<span-size.*?font-size:(.*?)px;">(.*?)<\/span-size>/) > -1){
                strings = strings.replace(/<span-size.*?font-size:(.*?)px;">(.*?)<\/span-size>/g,'\\size{$1}{$2}')
            }
            // normal
            while(strings.search(/<span dir="auto" class="style-scope yt-formatted-string">(.*?)<\/span>/) > -1){
                strings = strings.replace(/<span dir="auto" class="style-scope yt-formatted-string">(.*?)<\/span>/g,'$1')
            }
            // bold
            while(strings.search(/<span-bold .*?">(.*?)<\/span-bold>/) > -1){
                strings = strings.replace(/<span-bold .*?>(.*?)<\/span-bold>/g,'\\bf{$1}')
            }
            while(strings.search(/<span dir="auto" class="bold style-scope yt-formatted-string">(.*?)<\/span>/) > -1){
                strings = strings.replace(/<span dir="auto" class="bold style-scope yt-formatted-string">(.*?)<\/span>/g,'\\bf{$1}')
            }
            // strong
            while(strings.search(/<strong>(.*?)<\/strong>/) > -1){
                strings = strings.replace(/<strong>(.*?)<\/strong>/g,'\\bbf{$1}')
            }
            // italic
            while(strings.search(/<span dir="auto" class="italic style-scope yt-formatted-string">(.*?)<\/span>/) > -1){
                strings = strings.replace(/<span dir="auto" class="italic style-scope yt-formatted-string">(.*?)<\/span>/g,'\\it{$1}')
            }
            while(strings.search(/<span-it .*?">(.*?)<\/span-it>/) > -1){
                strings = strings.replace(/<span-it .*?>(.*?)<\/span-it>/g,'\\it{$1}')
            }
            strings = strings.replace(/#%/g,'\n')


        }
        const textarea = document.createElement('textarea')
        textarea.id = 'my-comment-textarea'
        textarea.value = strings
        textarea.style.position = 'absolute'
        textarea.style.height = '200px'
        textarea.style.width = this.offsetWidth + 'px'
        textarea.style.top = this.offsetTop+'px'
        textarea.style.left = this.offsetLeft+'px'
        document.body.appendChild(textarea)
        this.style.height = textarea.offsetHeight+'px'
        this.removeAttribute('should-use-number-of-lines')

        textarea.focus()

        textarea.onblur = function(){
            const comment = this.value
            this.parentElement.removeChild(this)
            container.parentElement.parentElement.style.height = ''
            let htmls = ''
            container.innerHTML = parseComments(comment,false)
        }



    }

    function commentsObservation(mutations,observe){
        for(let mutation of mutations){
            if(mutation.target.id == 'content-text'){
                mutation.target.parentElement.parentElement.onclick = commentClick
            }
        }
    }

    function initalObservation(mutations,observer) {
        if(document.getElementById('comments')){
            observer.disconnect()
            const commentsObserver = new MutationObserver(commentsObservation)
            commentsObserver.observe(document.getElementById('comments'),config)
        }
    }




    const config = {childList: true, subtree: true };
    const initalObserver = new MutationObserver(initalObservation)
    initalObserver.observe(document.body,config)

})();