// ==UserScript==
// @name         按行驼峰命名单词转换器
// @namespace    chatGPTFucker
// @version      0.0.1
// @description  将每行以空格分隔的单词，按驼峰命名合并为一行，并提供复制功能。
// @author       chatGPTFucker
// @match        https://www.sogou.com/camelfucker
// @grant        GM_setClipboard
// @icon         data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iNTEyLjAwMDAwMHB0IiBoZWlnaHQ9IjUxMi4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDUxMi4wMDAwMDAgNTEyLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsNTEyLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTAgNDMyMCBsMCAtNDgwIDMyMCAwIDMyMCAwIDAgMTYwIDAgMTYwIDMyMCAwIDMyMCAwIDAgLTE2MDAgMAotMTYwMCAtMzIwIDAgLTMyMCAwIDAgLTMyMCAwIC0zMjAgOTYwIDAgOTYwIDAgMCAzMjAgMCAzMjAgLTMyMCAwIC0zMjAgMCAwCjE2MDAgMCAxNjAwIDMyMCAwIDMyMCAwIDAgLTE2MCAwIC0xNjAgMzIwIDAgMzIwIDAgMCA0ODAgMCA0ODAgLTE2MDAgMCAtMTYwMAowIDAgLTQ4MHoiLz4KPHBhdGggZD0iTTI1NjAgMjcyMCBsMCAtNDgwIDMyMCAwIDMyMCAwIDAgMTYwIDAgMTYwIDE2MCAwIDE2MCAwIDAgLTgwMCAwCi04MDAgLTE2MCAwIC0xNjAgMCAwIC0zMjAgMCAtMzIwIDY0MCAwIDY0MCAwIDAgMzIwIDAgMzIwIC0xNjAgMCAtMTYwIDAgMAo4MDAgMCA4MDAgMTYwIDAgMTYwIDAgMCAtMTYwIDAgLTE2MCAzMjAgMCAzMjAgMCAwIDQ4MCAwIDQ4MCAtMTI4MCAwIC0xMjgwIDAKMCAtNDgweiIvPgo8L2c+Cjwvc3ZnPgo=
// ==/UserScript==

(function() {
    'use strict';
    // 修改标题 ( 脚本功能: i love you => iLoveYou )
    document.title = '按行驼峰命名单词转换器';
    // 在网页上添加需要的元素
    const wrapper = document.createElement('div');
    wrapper.style.display = 'flex';
    wrapper.style.flexDirection = 'column';
    wrapper.style.alignItems = 'stretch';
    wrapper.style.width = '300px';
    wrapper.style.padding = '10px';
    const inputLabel = document.createElement('label');
    inputLabel.textContent = '输入单词：(e.g. Lorem ipsum dolor sit amet)';
    const outputLabel = document.createElement('label');
    outputLabel.textContent = '输出结果：(e.g. loremIpsumDolorSitAmet)';
    const inputBox = document.createElement('textarea');
    inputBox.style.resize = 'none';
    inputBox.style.height = '120px';
    inputBox.addEventListener('input', convertWords);
    const outputBox = document.createElement('textarea');
    outputBox.style.resize = 'none';
    outputBox.style.height = '120px';
    outputBox.setAttribute('readonly', '');
    const copyButton = document.createElement('button');
    copyButton.style.width = '100%';
    copyButton.textContent = '复制';
    copyButton.addEventListener('click', copyOutput);

    wrapper.appendChild(inputLabel);
    wrapper.appendChild(inputBox);
    wrapper.appendChild(outputLabel);
    wrapper.appendChild(outputBox);
    wrapper.appendChild(copyButton);

    document.body.prepend(wrapper);

    /**
     * 将每行以空格分隔的单词，按驼峰命名合并为一行
     */
    function convertWords() {
        const lines = inputBox.value.trim().split('\n');
        const result = lines.map(line => {
            const words = line.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1));
            return words.map((word, index) => index === 0 ? word.toLowerCase() : word).join('');
        }).join('\n');
        outputBox.value = result;
    }

    /**
     * 复制输出结果
     */
    
    function copyOutput() {
        GM_setClipboard(outputBox.value);
        // alert('复制成功！');
        const message = new Message();
        message.show('复制成功！','tick');
    }
    // 添加 style 元素
    const style = document.createElement('style');
    style.innerHTML = `
        center, hr {
            display: none;
        }
    `;
    document.head.appendChild(style);

    // My Message 实现类似this.$message的效果
    class Message {
        constructor() {
            this.container = document.createElement('div');
            this.container.id = 'messageContainer';
            this.container.style.position = 'fixed';
            this.container.style.top = '20px';
            this.container.style.left = '50%';
            this.container.style.transform = 'translateX(-50%)';
            this.container.style.display = 'flex';
            this.container.style.alignItems = 'center';
            this.container.style.justifyContent = 'center';
            this.container.style.zIndex = '9999';
            document.body.appendChild(this.container);
        }

        show(message, iconType) {
            const p = document.createElement('p');
            p.style.margin = '10px';
            p.style.padding = '10px';
            p.style.backgroundColor = '#f5f5f5';
            p.style.borderRadius = '4px';
            p.style.display = 'flex';
            p.style.alignItems = 'center';

            let icon;
            if (iconType === 'tick') {
            icon = document.createElement('span');
            icon.style.width = '16px';
            icon.style.height = '16px';
            icon.style.backgroundColor = 'green';
            icon.style.borderRadius = '50%';
            icon.style.marginRight = '10px';
            const checkmark = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            checkmark.setAttribute("viewBox", "0 0 24 24");
            checkmark.setAttribute("width", "16");
            checkmark.setAttribute("height", "16");
            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
            path.setAttribute("d", "M9 16.2l-3.6-3.6c-.8-.8-.8-2 0-2.8s2-.8 2.8 0L9 11.6l6.2-6.2c.8-.8 2-.8 2.8 0s.8 2 0 2.8L11.8 16.2c-.4.4-.8.6-1.3.6-.5 0-.9-.2-1.3-.6z");
            path.setAttribute("fill", "white");
            checkmark.appendChild(path);
            icon.appendChild(checkmark);
            } else {
            icon = document.createElement('span');
            icon.style.width = '16px';
            icon.style.height = '16px';
            icon.style.backgroundColor = 'green';
            icon.style.borderRadius = '50%';
            icon.style.marginRight = '10px';
            }

            p.appendChild(icon);
            const text = document.createTextNode(message);
            p.appendChild(text);
            this.container.appendChild(p);

            setTimeout(() => {
            this.container.removeChild(p);
            }, 3000);
        }
    }
    // 使用示例
    // const message = new Message();
    // message.show('这是一条消息提示');
    // message.show('这是一条消息提示', 'tick'); // 显示绿色勾图标的消息提示
})();