// ==UserScript==
// @name               多重搜索MultipleSearch
// @name:zh-CN         多重搜索
// @name:zh-TW         多重搜索
// @name:zh-HK         多重搜索
// @author             Cassius0924
// @namespace          http://tampermonkey.net/
// @version            0.4.0
// @description        携带搜索词快捷切换搜索引擎、视频网站或博客网站。Quickly switch between search engines, video sites or blog sites with search words.
// @description:zh-CN  携带搜索词快捷切换搜索引擎、视频网站或博客网站。
// @description:zh-TW  攜帶搜索詞快捷切換搜索引擎、視頻網站或博客網站。
// @description:zh-HK  攜帶搜索詞快捷切換搜索引擎、視頻網站或博客網站。
// @license            MIT
// @icon               https://i.imgur.com/oqVZgBY.png
// @match               https://www.bing.com/search*
// @match               https://www.baidu.com/s?*
// @match               https://www.google.com/search?*
// @grant               GM_setValue
// @grant               GM_getValue
// @downloadURL none
// ==/UserScript==
(function () {
    //已经适配网页
    const handlers = {
        baidu: {
            //网页预处理
            preprocess: function () {
                let head = selectElement('#head');
                head.style = "height: 140px; transition:height 0.3s ease-in-out;";
                let div = createElement('div', 'ms-cover', 'background-color: white; height: 50px');
                let hw = selectElement('#head .head_wrapper');
                let u = selectElement('#u');
                let u1 = selectElement('#u1');
                let skt = selectElement('#head .search-keyboard-toast');
                div.appendChild(hw);
                div.appendChild(u);
                div.appendChild(u1);
                div.appendChild(skt);
                head.appendChild(div);
                selectElement('#s_tab').style = 'padding-top: 140px; transition: all 0.3s ease-in-out;';
                //TODO-1: 解决输入框无法使用快捷键的问题，难搞
            },
            //添加多重搜索组件
            addMSComponent: function () {
                let head = selectElement('#head');
                let div = createElement('div', 'ms-container', 'margin-left: 120px;');
                let css = "@media screen and (min-width: 1921px) { .ms-container { width: 1055px; margin: 0 auto !important;} }\n #ms-component .ms-dragging {opacity: 0.5; transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s}\n#ms-component .ms-crowded {transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;}";
                let style = createElement("style", '', '', css);
                div.appendChild(style);
                let msComponent = makeMSComponent();
                msComponent.style = 'bottom: 8px; position: absolute;';
                div.appendChild(msComponent);
                head.appendChild(div);
                addShortcutKeys();
            },
            //添加滚动监听
            addScrollListener: function () {
                window.onscroll = function () {
                    let head = selectElement('#head');
                    let searchTab = selectElement('#s_tab');
                    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    if (scrollTop > 12) {
                        selectElement('.cr-title').style.marginTop = '20px';
                    }
                    if (scrollTop > 0) {
                        head.style.height = '103px';
                        searchTab.style.paddingTop = '115px';
                    } else {
                        head.style.height = '140px';
                        searchTab.style.paddingTop = '140px';
                    }
                    toggleMSComponent(scrollTop, 0, 0);
                    turnOffToggleSortMode();
                }
            },
            //切换排序模式预处理
            preToggleSortMode: function () {
                if (GM_getValue('sortMode') === 'off') {
                    selectElement('#head').style.height = '155px';
                    selectElement('#s_tab').style.paddingTop = '155px';
                } else {
                    selectElement('#head').style.height = '140px';
                    selectElement('#s_tab').style.paddingTop = '140px';

                }
            },
            //获取搜索内容
            getSearchContent: function () {
                return selectElement('#kw').value;
            }
        },
        google: {
            preprocess: function () {
                let bg = selectElement('.sfbg');
                setTimeout(() => {
                    bg.style = 'height:190px; z-index:-100;';
                    bg.style.transition = 'height 0.3s ease-in-out';
                }, 0);
                let dodTBe = selectElement('.dodTBe');
                dodTBe.style.height = '125px';
                dodTBe.style.transition = 'all, 0.3s ease-in-out';
            },
            addMSComponent: function () {
                let head = selectElement('.CvDJxb');
                head.style = "display:flex; flex-direction: column; justify-content: center;";
                let css = "#ms-component{--ms-margin:165px;margin-left: calc(var(--ms-margin) - 15px);} @media(prefers-color-scheme:light){#ms-component{background:#fff !important;}} @media(prefers-color-scheme:dark){.ms-item {background: #303134 !important; color:#e8eaed !important; box-shadow: none !important; box-sizing: content-box ;border: 1px solid rgb(95,99,104);} .ms-item svg path:nth-child(2){fill: #e8eaed}.mss-content, .mss-icon-content{border: 1px solid rgb(95,99,104); background-color: #202124;}.mss-icon-close svg path:nth-child(2), .mss-del-btn svg path:nth-child(2){fill: #e8eaed;}.mss-title, .mss-icon-title {color: #e8eaed; border-bottom: 1px solid rgb(95,99,104);}.mss-item {background: #303134; border: 1px solid rgb(95,99,104); box-shadow: none;}.mss-item-name, .mss-item-url, .mss-del-btn, .mss-name-input, .mss-url-input, .mss-icon-input, .mss-add-btn, .mss-icon-cancel-btn, .mss-icon-confirm-btn {background: #303134; border: 1px solid rgb(95,99,104); box-shadow: none;}}@media (max-width: 1300px) {#ms-component{--ms-margin: 28px;}}@media (min-width: 1121px) and (max-width: 1300px) {#ms-component{--ms-margin:  calc((100vw - 1065px)/2);}}\n @media (min-width: 1459px) and (max-width: 1659px) {#ms-component{--ms-margin: calc(25vw + -200px);}}\n@media (min-width: 1659px) {#ms-component{--ms-margin: 215px;}}\n#ms-component .ms-dragging {opacity: 0.5; transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s}\n#ms-component .ms-crowded {transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;} .pin{z-index: 1000}";
                let style = createElement("style", '', '', css);
                let msComponent = makeMSComponent();
                msComponent.style = 'bottom: 8px; position: absolute; top: 60px;';
                msComponent.appendChild(style);
                head.appendChild(msComponent);
                addShortcutKeys();
            },
            addScrollListener: function () {
                window.onscroll = function () {
                    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    if (scrollTop > 120) {
                        selectElement('.sfbg').style.height = '135px';
                        selectElement('#ms-component').style.top = '52px';
                        selectElement('.dodTBe').style.height = '90px';
                    } else if (scrollTop <= 0) {
                        selectElement('.sfbg').style.height = '210px';selectElement('.dodTBe').style.height = '125px';
                    } else {
                        selectElement('#ms-component').style.top = '60px';
                    }
                    toggleMSComponent(scrollTop, 120, 0);
                    turnOffToggleSortMode();
                }
            },
            preToggleSortMode: function () {
                if (GM_getValue('sortMode') === 'off') {
                    selectElement('.sfbg').style.height = '240px';
                    selectElement('.dodTBe').style.height = '140px';
                } else {
                    selectElement('.sfbg').style.height = '210px';
                    selectElement('.dodTBe').style.height = '125px';
                }
            },
            getSearchContent: function () {
                return selectElement('.i4ySpb ~ .gLFyf').value;
            }
        },
        bing: {
            preprocess: function () {
                let head = selectElement('#b_header');
                head.style = 'transform: translateY(-75px);z-index: 10; transition:all, 0.3s ease-in-out;';
                let content = selectElement('#b_content');
                content.style = 'position: relative;z-index:9; top: -70px; transition:top, 0.3s ease-in-out;';
                let searchBox = selectElement('#sb_form_q');
                searchBox.onfocus = () => {
                    selectElement('#ms-component').classList.remove('top');
                };
                searchBox.onblur = () => {
                    selectElement('#ms-component').classList.add('top');
                }
            },
            addMSComponent: function () {
                let head = selectElement('#b_header');
                let body = selectElement('.b_respl');
                let css = ".ms-dragging {opacity: 0.5; transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s} #ms-component .ms-crowded {transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;} .top{z-index:100} .pin{z-index: 1000;}";
                let style = createElement("style", '', '', css);
                document.head.appendChild(style);
                let msComponent = makeMSComponent();
                msComponent.classList.add('top');
                msComponent.style = 'position: sticky; top: 0; height: 0px; margin-top:75px; padding-left: 150px;';
                let scopeBar = selectElement('.b_scopebar');
                scopeBar.style = 'margin-top: 70px; transition:all, 0.3s ease-in-out;';
                body.insertBefore(msComponent, head);
                addShortcutKeys();
            },
            addScrollListener: function () {
                window.onscroll = function () {
                    let msComponent = selectElement('#ms-component');
                    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    if (scrollTop > 60) {
                        msComponent.style.paddingBlock = '10px';
                    }
                    if (scrollTop <= 130) {
                        msComponent.style.paddingBlock = '0px';
                    }
                    if (scrollTop > 110) {
                        msComponent.style.height = '30px';
                        msComponent.style.boxShadow = '0 2px 10px 0 rgb(0 0 0 / 10%)';
                    }
                    if (scrollTop <= 140) {
                        msComponent.style.height = '0px';
                        msComponent.style.boxShadow = '';
                    }
                    toggleMSComponent(scrollTop, 70, 70);
                    turnOffToggleSortMode();
                }
            },
            preToggleSortMode: function () {
                let msComponent = selectElement('#ms-component');
                let scopeBar = selectElement('.b_scopebar');
                if (GM_getValue('sortMode') === 'off') {
                    scopeBar.style.marginTop = '85px';
                } else {
                    msComponent.style.marginTop = '75px';
                    scopeBar.style.marginTop = '70px';
                }
            },
            getSearchContent: function () {
                return selectElement('#sb_form_q').value;
            }
        },
        cnbing: {   //TODO-2: 中国版bing
            preprocess: function () {

            },
            addMSComponent: function () {

            },
            addScrollListener: function () {

            },
            preToggleSortMode: function () {

            },
            getSearchContent: function () {

            },
        }

    }

    const hostToHandler = {
        'www.baidu.com': 'baidu',
        'www.google.com': 'google',
        'www.bing.com': 'bing',
        'cn.bing.com': 'cnbing'
    };

    function getHandler() {
        const host = window.location.host;
        if (hostToHandler[host] === undefined) {
            return 'other';
        }
        return handlers[hostToHandler[host]];
    }

    function main() {
        if (GM_getValue('searchEngines') === null) {
            const searchEngines = [
                {
                    name: '百度',
                    url: 'https://www.baidu.com/s?wd=',
                    icon: 'https://icon.horse/icon/www.baidu.com'
                },
                {
                    name: '谷歌',
                    url: 'https://www.google.com/search?q=',
                    icon: 'https://icon.horse/icon/www.google.com'
                },
                {
                    name: '必应',
                    url: 'https://www.bing.com/search?q=',
                    icon: 'https://icon.horse/icon/www.bing.com'
                },
                {
                    name: 'YouTube',
                    url: 'https://www.youtube.com/results?search_query=',
                    icon: 'https://icon.horse/icon/www.youtube.com'
                },
                {
                    name: '哔哩哔哩',
                    url: 'https://search.bilibili.com/all?keyword=',
                    icon: 'https://icon.horse/icon/www.bilibili.com'
                },
                {
                    name: '知乎',
                    url: 'https://www.zhihu.com/search?type=content&q=',
                    icon: 'https://icon.horse/icon/www.zhihu.com'
                },
                {
                    name: 'CSDN',
                    url: 'https://so.csdn.net/so/search/s.do?q=',
                    icon: 'https://icon.horse/icon/so.csdn.net'
                },
                {
                    name: 'DuckDuckGo',
                    url: 'https://duckduckgo.com/?q=',
                    icon: 'https://icon.horse/icon/www.duckduckgo.com'
                },
                {
                    name: 'Setting',
                    toggleSortIcon: `<svg class='ms-toggle-sort-icon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="19" height="19"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.05 12.05L21 17l-4.95 4.95-1.414-1.414 2.536-2.537L4 18v-2h13.172l-2.536-2.536 1.414-1.414zm-8.1-10l1.414 1.414L6.828 6 20 6v2H6.828l2.536 2.536L7.95 11.95 3 7l4.95-4.95z"/></svg>`,
                    plusIcon: `<svg class='ms-plus-icon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 12c0-.865.11-1.703.316-2.504A3 3 0 0 0 4.99 4.867a9.99 9.99 0 0 1 4.335-2.505 3 3 0 0 0 5.348 0 9.99 9.99 0 0 1 4.335 2.505 3 3 0 0 0 2.675 4.63c.206.8.316 1.638.316 2.503 0 .865-.11 1.703-.316 2.504a3 3 0 0 0-2.675 4.629 9.99 9.99 0 0 1-4.335 2.505 3 3 0 0 0-5.348 0 9.99 9.99 0 0 1-4.335-2.505 3 3 0 0 0-2.675-4.63C2.11 13.704 2 12.866 2 12zm4.804 3c.63 1.091.81 2.346.564 3.524.408.29.842.541 1.297.75A4.993 4.993 0 0 1 12 18c1.26 0 2.438.471 3.335 1.274.455-.209.889-.46 1.297-.75A4.993 4.993 0 0 1 17.196 15a4.993 4.993 0 0 1 2.77-2.25 8.126 8.126 0 0 0 0-1.5A4.993 4.993 0 0 1 17.195 9a4.993 4.993 0 0 1-.564-3.524 7.989 7.989 0 0 0-1.297-.75A4.993 4.993 0 0 1 12 6a4.993 4.993 0 0 1-3.335-1.274 7.99 7.99 0 0 0-1.297.75A4.993 4.993 0 0 1 6.804 9a4.993 4.993 0 0 1-2.77 2.25 8.126 8.126 0 0 0 0 1.5A4.993 4.993 0 0 1 6.805 15zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
`
                }
            ];
            GM_setValue('searchEngines', searchEngines);
        }

        GM_setValue('themeColor', '#4e6ef2');
        GM_setValue('sortMode', 'off');

        let handler = getHandler();
        handler.preprocess.call();
        handler.addMSComponent.call();
        handler.addScrollListener.call();
    }

    //添加拖拽功能
    function addElementDragListener(element) {
        element.ondragover = function (e) {
            e.preventDefault(); //阻止默认事件
        }
        element.ondragstart = function (e) {
            e.target.parentNode.childNodes.forEach(element => {
                if (element === e.target) {
                    element.classList.toggle("ms-dragging");
                } else {
                    element.classList.toggle("ms-crowded");
                }
            });
            dragging = e.target;
            e.dataTransfer.effectAllowed = 'move';
        }

        element.ondragend = function (e) {
            setTimeout(() => {
                e.target.parentNode.childNodes.forEach(element => {
                    if (element === e.target) {
                        element.classList.toggle("ms-dragging");
                    } else {
                        element.classList.toggle("ms-crowded");
                    }
                });
            }, 0);
        }

        element.ondrop = function (e) {
            let delay = 0.5;   //延迟
            e.preventDefault();
            let target = e.target;
            let targetIndex = 0;
            if (!target.classList.contains('ms-dragging') && target.getAttribute('droppable') === 'true') {
                let draggingIndex = Array.prototype.indexOf.call(dragging.parentNode.children, dragging);
                if (target.classList.contains('ms-item')) {
                    // 啥也不干
                } else if (target.parentNode.classList.contains('ms-item')) {
                    target = target.parentNode;
                } else {
                    target = target.parentNode.parentNode;
                }
                targetIndex = Array.prototype.indexOf.call(target.parentNode.children, target);
                if (draggingIndex !== targetIndex) {
                    reorderElements(draggingIndex, targetIndex, dragging, target, delay);
                }
            }
        }

        // 插入元素
        function reorderElements(draggingIndex, targetIndex, dragging, target, delay) {
            let startPosition = dragging.getBoundingClientRect();
            let endPosition = target.getBoundingClientRect();
            if (draggingIndex < targetIndex) {
                addAnimation(draggingIndex, targetIndex, startPosition, endPosition, dragging, 1);
                setTimeout(() => {
                    dragging.parentNode.childNodes.forEach(element => {
                        element.style.transform = '';
                    });
                    target.parentNode.insertBefore(dragging, target.nextSibling);
                }, delay * 1000);
            } else {
                addAnimation(draggingIndex, targetIndex, startPosition, endPosition, dragging, -1);
                setTimeout(() => {
                    dragging.parentNode.childNodes.forEach(element => {
                        element.style.transform = '';
                    });
                    target.parentNode.insertBefore(dragging, target);
                }, delay * 1000);
            }
            updateData(draggingIndex, targetIndex);
        }

        // 添加动画
        function addAnimation(draggingIndex, targetIndex, startPosition, endPosition, dragging, direction) {
            let deltaX = 0;
            let component = dragging.parentNode;
            if (direction === 1) {
                //往右
                deltaX = endPosition.right - startPosition.right;
                console.log(draggingIndex, targetIndex);
                for (let i = draggingIndex + 1; i <= targetIndex; i++) {
                    let element = component.children[i];
                    let deltaX2 = startPosition.left - dragging.nextSibling.getBoundingClientRect().left;
                    element.style.transition = '';
                    element.style.transform = `translateX(${deltaX2}px)`;
                    element.offsetWidth;
                    element.style.transition = 'all 0s';
                }
            } else if (direction === -1) {
                //往左
                deltaX = endPosition.left - startPosition.left;
                for (let i = targetIndex; i < draggingIndex; i++) {
                    let element = component.children[i];
                    let deltaX2 = startPosition.right - dragging.previousSibling.getBoundingClientRect().right;
                    element.style.transition = '';
                    element.style.transform = `translateX(${deltaX2}px)`;
                    element.offsetWidth;
                    element.style.transition = 'all 0s';
                }
            }
            dragging.style.transition = '';
            dragging.style.transform = `translateX(${deltaX}px)`;
            dragging.offsetWidth;
            dragging.style.transition = 'all 0s';
        }

        // 更新数据
        function updateData(draggingIndex, targetIndex) {
            let engines = GM_getValue('searchEngines');
            let draggingEngine = engines.splice(draggingIndex, 1)[0];
            engines.splice(targetIndex, 0, draggingEngine);
            GM_setValue('searchEngines', engines);
        }
    }


    function makeMSComponent() {
        let msComponent = createElementWithId('div', 'ms-component');
        let searchEngines = GM_getValue('searchEngines');
        //添加元素
        searchEngines.forEach((searchEngine, index) => {
            let element = makeElement(searchEngine, index);
            msComponent.appendChild(element);
        });
        //添加样式
        let allStyle = getAllStyle();
        msComponent.appendChild(allStyle);
        //添加快捷键
        return msComponent;
    }


    //组件添加元素
    function makeElement(searchEngine) {
        let element = createElement('div', 'ms-item');
        element.setAttribute('droppable', true)
        if (searchEngine.name === 'Setting') {
            element.style.justifyContent = 'center';
            element.innerHTML = searchEngine.toggleSortIcon + searchEngine.plusIcon;
            let items = element.childNodes;
            items.forEach(item => {
                item.onmouseover = function () {
                    item.childNodes[1].style = `fill:${GM_getValue('themeColor')};`;
                }
                item.onmouseout = function () {
                    item.childNodes[1].style = ``;
                }
            })
            //切换排序模式
            items[0].onclick = function () {
                toggleSortMode();
            }
            //点击后弹出设置面板
            items[1].onclick = function () {
                popUpSettingPanel();
            }
        } else {
            element.onclick = function () {
                search(searchEngine.url);
            }
            let div = createElement('div', 'ms-item-content');
            div.setAttribute('droppable', true);
            let sortIcon = createElement('div', 'ms-sort-icon')
            sortIcon.setAttribute('droppable', true);
            let img = createElement('img', 'ms-icon');
            img.src = searchEngine.icon;
            img.draggable = '';
            img.setAttribute('droppable', true);
            let text = createElement('span', 'ms-text', '', searchEngine.name)
            text.setAttribute('droppable', true);
            let url = createInput('', 'ms-url', 'display:none', searchEngine.url);
            addElementDragListener(element);
            div.appendChild(sortIcon);
            div.appendChild(img);
            div.appendChild(text);
            div.appendChild(url);
            element.appendChild(div);
        }
        return element;
    }

    //切换排序模式
    function toggleSortMode() {
        let component = selectElement('#ms-component')
        let handler = getHandler();
        handler.preToggleSortMode();
        if (GM_getValue('sortMode') === 'off') {
            component.childNodes.forEach((element, index) => {
                if (index !== component.childNodes.length - 1) {
                    element.style.height = '63.5px';
                    element.draggable = 'true';
                }
            });
            GM_setValue('sortMode', 'on');
        } else {
            component.childNodes.forEach((element, index) => {
                if (index !== component.childNodes.length - 1) {
                    element.style.height = '48.5px';
                    element.draggable = '';
                    element.style.transition = '';
                }
            });
            GM_setValue('sortMode', 'off');
        }
    }

    function turnOnToggleSortMode() {
        if (GM_getValue('sortMode') === 'off') {
            toggleSortMode();
        }
    }

    function turnOffToggleSortMode() {
        if (GM_getValue('sortMode') === 'on') {
            toggleSortMode();
        }
    }


    //弹出添加面板
    function popUpSettingPanel() {
        let panel = createElementWithId('div', 'ms-setting-panel');
        let content = createElement('div', 'mss-content');
        let title = createElement('div', 'mss-title', '', '多重搜索设置');
        let container = createElement('div', 'mss-container');
        let left = createElement('div', 'mss-left');
        let list = createElement('div', 'mss-list');

        function listSearchEngines() {
            list.innerHTML = '';
            let searchEngines = GM_getValue('searchEngines');
            searchEngines.forEach((searchEngine, index) => {
                if (index !== searchEngines.length - 1) {
                    appendItem(searchEngine, index);
                }
            });
        }

        function appendItem(searchEngine, index) {
            index = index ? index : list.childNodes.length;
            let item = createElement('div', 'mss-item');
            let icon = createElement('img', 'mss-item-icon');
            icon.src = searchEngine.icon;
            icon.addEventListener('click', () => {
                popUpIconPanel(searchEngine, index);
            });
            let center = createElement('div', 'mss-center');
            let name = createInput('', 'mss-item-name', '', searchEngine.name, '名称');
            let url = createInput('', 'mss-item-url', '', searchEngine.url, '网址');
            let icon_ = createInput('', 'mss-item-icon_', '', searchEngine.icon);
            let delBtn = createElement('button', 'mss-del-btn', '', `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 4V2h10v2h5v2h-2v15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6H2V4h5zM6 6v14h12V6H6zm3 3h2v8H9V9zm4 0h2v8h-2V9z"/></svg>`);
            delBtn.addEventListener('click', (e) => {
                list.childNodes[index].style.display = 'none';
            });
            center.appendChild(name);
            center.appendChild(url);
            center.appendChild(icon_);
            item.appendChild(icon);
            item.appendChild(center);
            item.appendChild(delBtn);
            list.appendChild(item);
        }

        function popUpIconPanel(searchEngine, index) {
            let panel = createElement('div', 'mss-icon-panel');
            let content = createElement('div', 'mss-icon-content');
            let title = createElement('div', 'mss-icon-title', '', '修改图标');
            let container = createElement('div', 'mss-icon-container');
            let form = createElement('form', 'mss-icon-form');
            let iconInput = createInput('', 'mss-icon-input', '', selectElementAll('#ms-setting-panel .mss-item-icon_')[index].value, '图标地址（留空自动生成）');
            let close = createElement('div', 'mss-icon-close', '', `<svg class=\'mss-icon-editor-close-icon\' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`);
            close.addEventListener('click', () => {
                panel.remove();
            });
            let cancelBtn = createElement('button', 'mss-icon-cancel-btn', '', '取消');
            cancelBtn.addEventListener('click', (e) => {
                panel.remove();
            });
            let confirmBtn = createElement('button', 'mss-icon-confirm-btn', '', '确定');
            confirmBtn.addEventListener('click', (e) => {
                selectElementAll('#ms-setting-panel .mss-item-icon')[index].src = iconInput.value;
                selectElementAll('#ms-setting-panel .mss-item-icon_')[index].value = iconInput.value;
                panel.remove();
            });
            form.appendChild(iconInput);
            container.appendChild(form);
            content.appendChild(title);
            content.appendChild(container);
            content.appendChild(close);
            content.appendChild(cancelBtn);
            content.appendChild(confirmBtn);
            panel.appendChild(content);
            document.body.appendChild(panel);
        }

        listSearchEngines();
        let right = createElement('div', 'mss-right');
        let form = createElement('form', 'mss-form');
        let nameInput = createInput('', 'mss-name-input', '', '', '搜索引擎名称');
        let urlInput = createInput('', 'mss-url-input', '', '', '搜索引擎地址');
        let iconInput = createInput('', 'mss-icon-input', '', '', '图标地址（留空自动生成）');
        let addBtn = createElement('button', 'mss-add-btn', '', '添加');
        addBtn.addEventListener('click', (e) => {
            e.preventDefault();
            let name = nameInput.value;
            let url = urlInput.value;
            let hostname = '';
            try {
                hostname = new URL(url).hostname;
            } catch (e) {
                alert('网址格式错误');
                return;
            }
            let icon = iconInput.value ? iconInput.value : `https://icon.horse/icon/${hostname}`;
            if (name && url && icon) {
                let searchEngine = {
                    name: name,
                    url: url,
                    icon: icon
                };
                appendItem(searchEngine);
            }
        });
        let close = createElement('div', 'mss-icon-close', '', `<svg class='mss-close-icon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`);
        close.addEventListener('click', () => {
            panel.remove();
        });
        let cancelBtn = createElement('button', 'mss-icon-cancel-btn', '', '取消');
        cancelBtn.addEventListener('click', (e) => {
            panel.remove();
        });
        let confirmBtn = createElement('button', 'mss-icon-confirm-btn', '', '确定');
        confirmBtn.addEventListener('click', (e) => {
            let newSearchEngines = [];
            let setting = GM_getValue('searchEngines').pop();
            let list = selectElement('#ms-setting-panel .mss-list');
            list.childNodes.forEach((item,index) => {
                if (item.style.display !== 'none') {
                    let name = selectElementAll('.mss-item-name')[index].value;
                    let url = selectElementAll('.mss-item-url')[index].value;
                    let icon = selectElementAll('.mss-item-icon_')[index].value;
                    newSearchEngines.push({
                        name: name,
                        url: url,
                        icon: icon
                    });
                }
            });
            newSearchEngines.push(setting);
            GM_setValue('searchEngines', newSearchEngines);
            panel.remove();
            window.location.reload();
        });
        form.appendChild(nameInput);
        form.appendChild(urlInput);
        form.appendChild(iconInput);
        form.appendChild(addBtn);
        left.appendChild(list);
        right.appendChild(form);
        container.appendChild(left);
        container.appendChild(right);
        content.appendChild(close);
        content.appendChild(title);
        content.appendChild(container);
        content.appendChild(cancelBtn)
        content.appendChild(confirmBtn);
        panel.appendChild(content);
        document.body.appendChild(panel);
    }


    function getAllStyle() {
        let css = `#ms-component {background: white;border-radius: 10px;display: flex;flex-wrap: nowrap;flex-direction: row; transition: padding-block 0.3s ease-in-out 0s, box-shadow 0.3s ease-in-out 0s, height 0.3s ease-in-out, 0s margin-top 0.3s ease-in-out;}  .ms-container {margin-left: 120px;}  .ms-item {height: 48.5px;overflow-y: hidden;min-width: 30px;margin-inline: 10px;display: flex;padding: 6px 10px;flex-direction: column;align-items: center;justify-content: flex-end;cursor: pointer;background: linear-gradient(135deg, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 100%);box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);border-radius: 8px;color: black;text-decoration: none; transition: height 0.3s ease-in-out 0s}\n.ms-item:hover{color: #4e6ef2 !important;}\n .ms-item-content {display: flex;flex-direction: column;align-items: center;justify-content: flex-end;}  .ms-sort-icon {width: 10px;height: 3px;margin-bottom: 10px;border-radius: 3px;background: #909eb0;transition: height 0.3s ease-in-out;}  .ms-icon {width: 30px;height: 30px;border-radius: 5px;transition: all 0.3s ease-in-out;}  .ms-toggle-sort-icon {transition: all 0.3s ease-in-out;}  .ms-text {min-width: 36px;margin-top: 2px;font-size: 12px;font-weight: bold;white-space: nowrap;overflow: hidden; text-align: center;}  #ms-setting-panel {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);z-index: 1000;display: flex;justify-content: center;align-items: center;}  .mss-content {position: relative;width: 800px;height: 500px;border-radius: 10px;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;background: #EFEFEFFF;}  .mss-title {width: 100%;height: 15%;display: flex;justify-content: center;align-items: center;font-size: 20px;font-weight: bold;border-bottom: 1px solid #e5e5e5;}  .mss-container {width: 100%;height: 85%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}  .mss-left {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}  .mss-list {width: 400px;height: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;overflow-y: scroll;overflow-x: hidden;}  .mss-list::-webkit-scrollbar {}  .mss-item {width: auto;height: 60px;margin-block: 10px;padding-block: 10px;padding-inline: 10px;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;border-radius: 10px;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-item-icon {width: 45px;height: 45px;margin: 0 0;border-radius: 10px;cursor: pointer;}  .mss-center {margin: 0 10px;height: 100%;display: flex;flex-direction: column;justify-content: space-around;align-items: stretch;}  .mss-item-name {width: 80px;border: none;outline: none;border-radius: 3px;padding: 3px 10px 1px;font-weight: bold;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;background: linear-gradient(135deg, rgba(240, 240, 240, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-item-url {width: 185px;border: none;outline: none;border-radius: 3px;padding: 3px 10px 1px;font-weight: bold;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;background: linear-gradient(135deg, rgba(240, 240, 240, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-item-icon_ {display: none;}  .mss-del-btn {width: 45px;height: 45px;border: 1px solid #e5e5e5;border-radius: 10px;cursor: pointer;}  .mss-icon-panel {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);z-index: 1000;display: flex;justify-content: center;align-items: center;}  .mss-icon-content {position: relative;width: 400px;height: 300px;border-radius: 10px;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;background: #EFEFEFFF;}  .mss-icon-title {width: 100%;height: 20%;display: flex;justify-content: center;align-items: center;font-size: 20px;font-weight: bold;border-bottom: 1px solid #e5e5e5;}  .mss-icon-container {width: 100%;height: 80%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}  .mss-icon-form {width: 100%;height: 90px;display: flex;margin-bottom: 30px;flex-direction: column;justify-content: center;align-items: center;}  .mss-icon-input {width: 280px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;margin-bottom: 10px;padding: 0 10px;font-weight: bold;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;background: linear-gradient(135deg, rgba(240, 240, 240, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-icon-close {position: absolute;top: 20px;right: 10px;width: 30px;display: flex;flex-direction: row;justify-content: center;align-items: center;height: 30px;margin: 0 10px;cursor: pointer;}  .mss-icon-cancel-btn {position: absolute;bottom: 10px;right: 100px;width: 80px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;background: #e5e5e5;cursor: pointer;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-icon-confirm-btn {position: absolute;bottom: 10px;right: 10px;width: 80px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;background: #e5e5e5;cursor: pointer;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-right {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}  .mss-form {width: 100%;height: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;}  .mss-name-input {width: 300px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;margin-bottom: 10px;padding: 0 10px;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;background: linear-gradient(135deg, rgba(240, 240, 240, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-url-input {width: 300px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;margin-bottom: 10px;padding: 0 10px;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;background: linear-gradient(135deg, rgba(240, 240, 240, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-icon-input {width: 300px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;margin-bottom: 10px;padding: 0 10px;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;background: linear-gradient(135deg, rgba(240, 240, 240, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-add-btn {width: 300px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;margin-bottom: 10px;padding: 0 10px;background: #e5e5e5;cursor: pointer;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-close {position: absolute;top: 22.5px;right: 10px;width: 30px;display: flex;flex-direction: row;justify-content: center;align-items: center;height: 30px;margin: 0 10px;cursor: pointer;}  .mss-cancel-btn {position: absolute;bottom: 10px;right: 100px;width: 80px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;background: #e5e5e5;cursor: pointer;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);}  .mss-button-btn {position: absolute;bottom: 10px;right: 10px;width: 80px;height: 40px;border: 1px solid #e5e5e5;border-radius: 10px;background: #e5e5e5;cursor: pointer;box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);} input{box-sizing:border-box;-webkit-box-sizing: border-box;}`;
        return createElement('style', '', '', css);
    }

    // 展开或折叠组件
    function toggleMSComponent(scrollTop, expandCritical, collapseCritical) {
        let items = selectElementAll('.ms-item');
        let sortIcons = selectElementAll('.ms-sort-icon');
        let icons = selectElementAll('.ms-icon');
        let toggleSortIcon = selectElement('.ms-toggle-sort-icon');
        items.forEach((item, index) => {
            if (scrollTop > expandCritical) {
                if (index !== items.length - 1) {
                    sortIcons[index].style.height = '0px';
                    sortIcons[index].style.opacity = '0';
                    sortIcons[index].style.marginBottom = '0px';
                    icons[index].style.height = '0px';
                    icons[index].style.width = '0px';
                    icons[index].style.opacity = '0';
                }
                item.style.height = '18px';
                toggleSortIcon.style.height = '0px';
                toggleSortIcon.style.width = '0px';
                toggleSortIcon.style.opacity = '0';
            } else if (scrollTop <= collapseCritical) {
                if (index !== items.length - 1) {
                    sortIcons[index].style.height = '3px';
                    sortIcons[index].style.opacity = '1';
                    sortIcons[index].style.marginBottom = '10px';
                    icons[index].style.height = '30px';
                    icons[index].style.width = '30px';
                    icons[index].style.opacity = '1';
                }
                item.style.height = '48.5px';
                toggleSortIcon.style.height = '20px';
                toggleSortIcon.style.width = '20px';
                toggleSortIcon.style.opacity = '1';
            }
        });
    }

    function search(url) {
        let handler = getHandler();
        window.open(url + handler.getSearchContent.call());
    }

    // 添加快捷键
    function addShortcutKeys() {
        let urlInputs = selectElementAll('.ms-url');
        let texts = selectElementAll('.ms-text');
        let system = getSystem();
        let modifier = (system === 'mac' || system === 'ipad') ? '⌥' : 'Alt';
        let originalTexts = [];
        texts.forEach((text) => {
            originalTexts.push(text.innerHTML);
        });
        document.body.addEventListener('keydown', (event) => {
            event.altKey && (
                selectElement('#ms-component').classList.add('pin'),
                [...Array(9)].forEach((_, i) => {
                    let keyCode = 'Digit' + (i + 1);
                    texts.forEach((text, index) => {
                        text.style.width = text.offsetWidth + 'px';
                        text.innerHTML = `${modifier} + ${index + 1}`;
                    });
                    event.code === keyCode && (
                        event.preventDefault(), //阻止键盘输入
                        search(urlInputs[i].value)
                    )
                }));
        });
        document.body.addEventListener('keyup', (event) => {
            !event.altKey && (
                selectElement('#ms-component').classList.remove('pin'),
                texts.forEach((text, index) => {
                    text.style.width = '';
                    text.innerHTML = originalTexts[index];
                })
            )
        });
    }

    // 获取系统类型
    function getSystem() {
        let userAgent = navigator.userAgent;
        let isMac = userAgent.indexOf('Mac') > -1;
        let isIpad = userAgent.indexOf('iPad') > -1;
        if (isMac) {
            return 'mac';
        } else if (isIpad) {
            return 'ipad';
        } else {
            return 'win';
        }
    }

    function createElement(tag, className, style, content) {
        let element = document.createElement(tag);
        className && (element.className = className);
        style && (element.style = style);
        content && (element.innerHTML = content);
        return element;
    }


    function createElementWithId(tag, id, style, content) {
        let element = document.createElement(tag);
        id && (element.id = id);
        style && (element.style = style);
        content && (element.innerHTML = content);
        return element;
    }

    function createInput(type, className, style, value, placeholder) {
        let input = document.createElement('input');
        type && (input.type = type);
        className && (input.className = className);
        style && (input.style = style);
        value && (input.value = value);
        placeholder && (input.placeholder = placeholder);
        return input;
    }

    function selectElement(element) {
        return document.querySelector(element);
    }

    function selectElementAll(element) {
        return document.querySelectorAll(element);
    }


    main();


})();