// ==UserScript==
// @name         DeepL翻译记录同步至notion
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  脚本将三秒内未变化的原始文本和翻译文本提交至服务器，由服务器上传至notion
// @author       You
// @match        https://www.deepl.com/*
// @icon         https://static.deepl.com/img/logo/DeepL_Logo_darkBlue_v2.svg
// @grant GM_xmlhttpRequest
// @license MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    let host = 'enter your ip:port'

    // Your code here...
    //提示信息 封装
    function Toast(msg,duration){
        // console.log('66666')
        duration=isNaN(duration)?3000:duration;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText="font-size: .45rem;color: rgb(255, 255, 255);background-color: rgba(48,111,112, 0.8);padding: 10px 15px;margin: 0 0 0 -60px;border-radius: 4px;position: fixed;    top: 45%;left: 50%;width: 180px;text-align: center;";
        //document.body.appendChild(m);
        m.setAttribute("class","text-sm font-semibold text-white")
        let card = document.getElementsByClassName('lmt__sides_container')[0]
        card.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.opacity = '0';
            setTimeout(function() { card.removeChild(m) }, d*1000);
        }, duration);
    }
    function SaveToRomote(text, translation, tags){
        console.log('上传成功!');
        console.log('save tags', tags);
        tags = JSON.stringify(tags)
        GM_xmlhttpRequest({
            method: 'POST',
            url: `http://${host}`,
            data: `text=${text}&translation=${translation}&tags=${tags}`,
            onload: response => { console.log(response); Toast('翻译记录自动保存成功～'); console.log('保存成功')}
        });
    }
    let tags = []
    function GetAllTags(){
        GM_xmlhttpRequest({
            method: 'GET',
            url: `http://${host}/tags`,
            responseType: 'json',
            timeout: 6000,
            onload: response => { tags = response.response.data; Toast('获取notion标签成功～'); AddTagSelectToPage();}
        });
    }
    let flag = true
    function AddTagSelectToPage(){
        if(JSON.stringify($('#headlessui-tabs-tab-3')) != '{}'){
            return
        }

        console.log('tags', tags);
        let tagCheckStr = '<form id="tagcheckbox">';
        for(let i = 0; i < tags.length; i++) {
            let tag = tags[i]
            let margin = i == 0 ? '' : "'margin-left: 5px !important'"
            tagCheckStr += `<input type="checkbox" id="${tag.id}" name="${tag.name}" style=${margin}><label style="margin-left: 3px !important" for="${tag.id}">${tag.name}</label>`
        }
        tagCheckStr += `<input type="checkbox" id="add_tag_checkbox" name="exart" style='margin-left: 5px !important'><input id='add_tag_input' disabled='true' style="margin-left: 5px; border: 2px solid gray; text-indent: 3px; border-radius: 10px; width: 80px" placeholder="新增标签">`
        tagCheckStr += '</form>'

        var $btn = `
        <button dl-test="doctrans-tabs-switch-docs" id="headlessui-tabs-tab-3" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="" aria-controls="panelTranslateFiles">
        <div class="cardButton--VaX9A " aria-label="标签"><div class="innerUpper--JA8Bf" tabindex="-1"><div class="logo--erUTh" tabindex="-1">
        <svg t="1675618863572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2682" width="200" height="200"><path d="M512 910.208L910.208 512 480.832 82.624l-378.816 24.448-19.776 373.376L512 910.208zM0 512L25.472 31.36 512 0l512 512-512 512-512-512z m293.376-128.96a85.952 85.952 0 1 0 0-171.904 85.952 85.952 0 0 0 0 171.904z" fill="#296290" p-id="2683"></path></svg>
        </div>
        <div class="text--HXdGT" tabindex="-1">
        <div class="textUpper--PrWcj" tabindex="-1">选择你需要为翻译加上的标签</div>
        <div class="textLower--BYwsB" tabindex="-1">
        ${tagCheckStr}
        </div></div></div>
        <div class="innerLower--yE4_4" tabindex="-1"></div></div>
        </button>`
        let tabbar = $('.flex.flex-row')
        //console.log('tabbar', tabbar)
        if(typeof(tabbar) == undefined) {
            return
        }
        flag = false
        tabbar.append($btn);
        $("#add_tag_checkbox").change(function(){
            let checkbox = document.getElementById('add_tag_checkbox');
            console.log('check', checkbox)
            if(checkbox.checked) {
                //console.log('123')
                $('#add_tag_input').css('border', '2px solid lightblue')
                $('#add_tag_input').removeAttr("disabled");
            } else {
                //console.log('456')
                $('#add_tag_input').css('border', '2px solid gray')
                $('#add_tag_input').attr("disabled","disabled");
            }
        })
        // console.log(tabbar);
        //$('.gap-[10px]').append(btn)
        //$('.gap-[10px]').append('123456')
        //console.log($('.gap-[10px]'))
    }
    function GetSelectTags(){
        if(JSON.stringify($('#headlessui-tabs-tab-3')) == '{}'){
            Toast('获取notion标签失败，正在重试')
            GetAllTags();
            return
        }
        let checkboxes = $('#tagcheckbox')[0]
        console.log(checkboxes)
        let selected = []
        for(let i = 0; i < checkboxes.length - 2; i++) {
            let item = checkboxes[i]
            if(item.checked){
                selected.push(item.name)
            }
        }
        let n = checkboxes.length;
        console.log(checkboxes)
        if(checkboxes[n - 2].checked) {
            selected.push(checkboxes[n - 1].value);
        }
        return selected
    }
    let my_text = '';
    let cnt = 3;
    let saved_set = new Set();
    let show_start = true
    let last = '';
    let init = '';
    console.log('DeepL translator logs auto save script start');
    Toast('翻译记录保存脚本启动～')
    GetAllTags();
    //let interval_tags = setInterval(AddTagSelectToPage, 2000);
    //AddTagSelectToPage();
    setInterval(function () {
        // 根据xpath获取文本框的值
        //let text = document.evaluate("/html/body/div[4]/main/div[6]/div[1]/div[2]/section[1]/div[3]/div[2]/d-textarea/div/p", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML;
        let text = $('#source-dummydiv').text().trim();
        let translation = $('#target-dummydiv').text().trim();

        //console.log('text', typeof(text), text.length, text);
        //console.log('translation', typeof(translation), translation.length, translation);
        let r = {'text': text, 'translation':translation};
        let rs = JSON.stringify(r)

        if(text.length == 0 || translation.length == 0) {
            return
        }
        if(init == ''){
            init = rs;
            last = rs;
        }
        if(rs == init) {
            return
        }
        init = '-1';

        if (last != rs) {
            cnt = 3;
            last = rs;
        } else {
            cnt -= 1;
            if(cnt == 0) {
                cnt = 3;
                if(!saved_set.has(rs)) {
                    saved_set.add(rs)
                    //console.log('new string', text);
                    //let translation = document.evaluate("/html/body/div[4]/main/div[6]/div[1]/div[2]/section[2]/div[3]/div[1]/d-textarea/div/p", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML;
                    Toast('翻译记录已自动上传～')
                    let select_tags = GetSelectTags();
                    //console.log('selected', select_tags)
                    SaveToRomote(text, translation, select_tags);
                    //Toast('翻译记录已保存～')
                } else {
                    console.log('chongfu', text, translation);
                }
            }
        }
    }, 1000);
})();