(() => {

goog.require('ace');
goog.require('ace.ExtLanguageTools');
goog.require('layui');
goog.require('store');
goog.require('$.select2');
goog.require('$.fomanticUI');
goog.require('Mixly.XML');
goog.require('Mixly.LayerExt');
goog.require('Mixly.Msg');
goog.require('Mixly.BoardManager');
goog.require('Mixly.Config');
goog.require('Mixly.Env');
goog.require('Mixly.MJson');
goog.require('Mixly.Storage');
goog.require('Mixly.WebSocket.Socket');
goog.provide('Mixly.Setting');

const {
    XML,
    LayerExt,
    Msg,
    BoardManager,
    Config,
    Env,
    MJson,
    Storage,
    Setting
} = Mixly;

const { LANG } = Msg;
const { element, form, layer } = layui;
const { USER, SOFTWARE } = Config;

Setting.ID = 'setting-menu';
Setting.CONFIG = {}
Setting.nowIndex = 0;
Setting.config = {};

Setting.init = () => {
    element.tab({
        headerElem: '#setting-menu-options>li',
        bodyElem: '#setting-menu-body>.menu-body'
    });
    element.render('nav', 'setting-menu-filter');
    Setting.addOnchangeOptionListener();

    form.on('switch(setting-theme-filter)', function(data) {
        const { checked } = data.elem;
        USER.theme = checked ? 'dark' : 'light';
        $('body').removeClass('dark light')
                 .addClass(USER.theme);
        $('html').attr('data-bs-theme', USER.theme);
        Storage.user('/', USER);
    });

    form.on('submit(open-setting-dialog-filter)', function(data) {
        Setting.onclick();
        return false;
    });

    form.on('submit(board-reset-filter)', function(data) {
        BoardManager.resetBoard((error) => {
            if (error) {
                console.log(error);
            }
            BoardManager.screenWidthLevel = -1;
            BoardManager.screenHeightLevel = -1;
            BoardManager.loadBoards();
            BoardManager.updateBoardsCard();
        });
        return false;
    });
}

Setting.menuInit = () => {
    $('#setting-menu-options').children('.layui-this').removeClass('layui-this');
    $('#setting-menu-options').children('li').first().addClass('layui-this');
    $('#setting-menu-body').children('.layui-show').removeClass('layui-show');
    $('#setting-menu-body').children('div').first().addClass('layui-show');
    form.render(null, 'setting-form-filter');
    form.val('setting-form-filter', USER);
}

Setting.onclick = () => {
    Setting.menuInit();
    let obj = $(".setting-menu-item").select2({
        width: '100%',
        minimumResultsForSearch: 10
    });
    Setting.configMenuSetValue(obj, USER);
    element.render('collapse', 'menu-user-collapse-filter');
    Setting.nowIndex = 0;
    LayerExt.open({
        title: [Msg.getLang('SETTING'), '36px'],
        id: 'setting-menu-layer',
        content: $('#' + Setting.ID),
        shade: LayerExt.SHADE_ALL,
        area: ['50%', '50%'],
        min: ['400px', '200px'],
        success: () => {
        }
    });
    $('#setting-menu-user button').off().click((event) => {
        const type = $(event.currentTarget).attr('value');
        switch (type) {
        case 'apply':
            let oldTheme = USER.themeAuto? 'auto' : USER.theme;
            let oldLanglage = USER.languageAuto? 'auto' : USER.language;
            let updateTheme = false, updateLanguage = false;
            let value = Setting.configMenuGetValue(obj);
            for (let i in value) {
                USER[i] = value[i];
            }
            updateTheme = oldTheme !== USER.theme;
            updateLanguage = oldLanglage !== USER.language;
            if (updateTheme) {
                if (USER.theme === 'auto') {
                    const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
                    USER.theme = themeMedia.matches ? 'light' : 'dark';
                    USER.themeAuto = true;
                } else {
                    USER.themeAuto = false;
                }
                $('body').removeClass('dark light')
                         .addClass(USER.theme);
                $('html').attr('data-bs-theme', USER.theme);
            }
            if (updateLanguage) {
                if (USER.language === 'auto') {
                    switch (navigator.language) {
                        case 'zh-CN':
                            USER.language = 'zh-hans';
                            break;
                        case 'zh-HK':
                        case 'zh-SG':
                        case 'zh-TW':
                            USER.language = 'zh-hant';
                            break;
                        default:
                            USER.language = 'en';
                    }
                    USER.languageAuto = true;
                } else {
                    USER.languageAuto = false;
                }
                Msg.nowLang = USER.language ?? 'zh-hans';
            }
            if (updateTheme || updateLanguage) {
                BoardManager.screenWidthLevel = -1;
                BoardManager.screenHeightLevel = -1;
                BoardManager.updateBoardsCard();
            }
            Storage.user('/', USER);
            layer.closeAll(() => {
                XML.renderAllTemplete();
                layer.msg(Msg.getLang('CONFIG_UPDATE_SUCC'), { time: 1000 });
            });
            break;
        case 'reset':
            Setting.configMenuReset(obj);
            break;
        }
    }); 
}

Setting.addOnchangeOptionListener = () => {
    element.on('tab(setting-menu-filter)', function(data) {
        const { index } = data;
        const type = $(data.elem.prevObject).data('type');
        if (type === 'import-board') {
            if (data.index !== Setting.nowIndex) {
                goog.isElectron && BoardManager.onclickImportBoards();
            } else {
                layui.table.resize('cloud-boards-table');
            }
        } else if (type === 'ws-update') {
            if (data.index !== Setting.nowIndex) {
                $('#setting-menu-update').loading({
                    background: USER.theme === 'dark' ? '#807b7b' : '#fff',
                    opacity: 1,
                    animateTime: 0,
                    imgSrc: 1
                });
                const { Socket } = Mixly.WebSocket;
                Socket.updating = true;
                Socket.sendCommand({
                    obj: 'Socket',
                    func: 'getConfigByUrl',
                    args: [ SOFTWARE.configUrl ]
                });
            }
        } else if (type === 'nw-update') {
            fetch('/api/check-update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then((response) => response.json())
            .then((result) => {
                const {
                    localVersion,
                    cloudVersion,
                    needsUpdate,
                    cloudFile
                } = result;
                Setting.refreshUpdateMenuStatus(localVersion, cloudVersion, needsUpdate, cloudFile);
            })
            .catch((error) => {
                console.log(error)
            });
        }
        Setting.nowIndex = index;
    });
}

Setting.configMenuReset = (obj) => {
    for (let i = 0; i < obj.length; i++) {
        let $item = $(obj[i]);
        let newValue = $item.children('option').first().val();
        $item.val(newValue).trigger("change");
    }
}

Setting.configMenuSetValue = (obj, value) => {
    let newValue = { ...value };
    if (value.themeAuto) {
        newValue.theme = 'auto';
    }
    if (value.languageAuto) {
        newValue.language = 'auto';
    }
    for (let i = 0; i < obj.length; i++) {
        let $item = $(obj[i]);
        let type = $item.attr('value');
        if (!newValue[type]) {
            continue;
        }
        $item.val(newValue[type]).trigger("change");
    }
}

Setting.configMenuGetValue = (obj) => {
    let config = {};
    for (let i = 0; i < obj.length; i++) {
        let $item = $(obj[i]);
        config[$item.attr('value')] = $item.val();
    }
    return config;
}

Setting.refreshUpdateMenuStatus = (localVersion, cloudVersion, needsUpdate, url) => {
    const $serverDiv = $('#setting-menu-update-server');
    const $btnDiv = $('#setting-menu-update > div:nth-child(2)');
    const $button = $btnDiv.children('button');
    $button.removeClass('layui-btn-disabled');
    $button.addClass('self-adaption-btn');
    const $mixlyProgress = $serverDiv.find('.mixly-progress');
    $serverDiv.find('span').css('display', 'none');
    $mixlyProgress.hide();
    $mixlyProgress.find('.progress').show();
    $mixlyProgress.removeClass('swinging indeterminate');
    if (needsUpdate) {
        $serverDiv.find('span.obsolete').css('display', 'inline-block');
        $serverDiv.find('text').text(`${localVersion} → ${cloudVersion}`);

    } else {
        $serverDiv.find('span.latest').css('display', 'inline-block');
        $serverDiv.find('text').text(localVersion);
    }
    if (needsUpdate) {
        $btnDiv.css('display', 'flex');
        $button.off().one('click', (event) => {
            $button.addClass('layui-btn-disabled');
            $button.removeClass('self-adaption-btn');
            const eventSource = new EventSource(`/api/download?url=${encodeURIComponent(url)}&cloudVersion=${cloudVersion}`);
            $mixlyProgress.show();
            eventSource.onmessage = function(event) {
                const data = JSON.parse(event.data);
                if (data.type === 'progress') {
                    $mixlyProgress.progress({
                        percent: data.progress
                    });
                } else if (data.type === 'unzip') {
                    $mixlyProgress.addClass('swinging indeterminate');
                    $mixlyProgress.progress({
                        percent: 100
                    });
                    $mixlyProgress.find('.progress').hide();
                    layer.msg('解压中...', { time: 1000 });
                } else if (data.type === 'complete') {
                    $mixlyProgress.removeClass('swinging indeterminate');
                    layer.msg('更新完成！5秒后自动刷新...', { time: 1000 });
                    eventSource.close();
                    setTimeout(function(){
                        window.location.reload();
                    }, 5000);
                }
            };
            eventSource.onerror = function(error) {
                layer.msg('下载失败！5秒后自动刷新...', { time: 1000 });
                setTimeout(function(){
                    window.location.reload();
                }, 5000);
                eventSource.close();
            };
        });
    } else {
        $btnDiv.css('display', 'none');
    }
}

Setting.showUpdateMessage = (data) => {
    Setting.ace.updateSelectionMarkers();
    const { selection, session } = Setting.ace;
    const initCursor = selection.getCursor();
    Setting.ace.gotoLine(session.getLength());
    selection.moveCursorLineEnd();
    Setting.ace.insert(data);
    Setting.ace.gotoLine(session.getLength());
    selection.moveCursorLineEnd();
}

Setting.createAceEditor = (container, language = 'txt', tabSize = 4) => {
    let codeEditor = ace.edit(container);
    if (USER.theme === 'dark') {
        codeEditor.setTheme('ace/theme/dracula');
    } else {
        codeEditor.setTheme('ace/theme/xcode');
    }
    codeEditor.getSession().setMode(`ace/mode/${language}`);
    codeEditor.getSession().setTabSize(tabSize);
    codeEditor.setFontSize(15);
    codeEditor.setShowPrintMargin(false);
    codeEditor.setReadOnly(true);
    codeEditor.setScrollSpeed(0.8);
    codeEditor.setShowPrintMargin(false);
    codeEditor.renderer.setShowGutter(false);
    codeEditor.setValue('', -1);
    return codeEditor;
}

})();