document.addEventListener( "DOMContentLoaded", function( event ) {

    function __( str ) {
        return _( str, "admin.mod.php" );
    }

    //#region log
    // Восстановление лога
    const log_el = document.body.querySelector( ":scope > .log" );
    if ( log_el ) { // Нет при входе
        const hist = log_el.querySelector( ".hist" );
        const log_input = log_el.querySelector( ".footer input" );
        const log_html = localStorage.getItem( "log" );
        hist.innerHTML = log_html;
        hist.querySelectorAll( ".marker" ).forEach( function ( marker ) {
            log_marker_rm_control( marker, hist );
        } );

        // Показать/Скрыть лог
        const log_button = document.querySelector( "body > header .menu .button.log" );
        log_button.addEventListener( "click", function( event ) {
            event.stopPropagation();
            document.body.classList.toggle( "log" );
            if ( ! hist.initScroll ) {
                hist.scrollTop = hist.scrollHeight;
                hist.initScroll = true;
            }
            log_input.focus();
        } );

        // Закрытие лога
        document.body.addEventListener( "click", function( event ) {
            document.body.classList.remove( "log" );
        } );

        // Предотвратить закрытие при кликах на логе
        document.body.querySelector( ":scope > .log" ).addEventListener( "click", function( event ) {
            event.stopPropagation();
        } );

        // Очистить историю
        const trash_button = document.body.querySelector( ":scope > .log .footer .button.trash" );
        trash_button.addEventListener( "click", function( event ) {
            hist.innerHTML = "";
            localStorage.setItem( "log", "" );
            log_input.focus();
        } );

        // Отправка своего сообщения в лог
        log_input.addEventListener( "keydown", function( event ) {
            if ( event.code === "Enter" ) {
                const notify_class = "note";
                const date = new Date().toLocaleString( undefined, { hour12: false } );
                const notify_html = log_input.value;
                hist.insertAdjacentHTML(
                    "beforeend",
                    `<div class="${notify_class}">
                        <div class=marker></div>
                        <div class=date>${date}</div>
                        <div class=message>${notify_html}</div>
                    </div>`
                );
                log_marker_rm_control( hist.lastElementChild, hist );
                hist.scrollTop = hist.scrollHeight;
                localStorage.setItem( "log", hist.innerHTML );
                log_input.value = "";
            }
        } );
    }
    //#endregion log

    // Mob Menu
    document.querySelectorAll( "body > header .burger, body > .milk" ).forEach( function( el ) {
        el.addEventListener( "click", function() {
            document.body.classList.toggle( "menu" );
        } );
    } );

    // Навигация стрелками браузера - фикс активного пункта
    window.addEventListener( "popstate", function( e ) {
        // Очищаем без всяких проверок чтобы не подсвечивало на #start
        document.querySelectorAll( "aside a" ).forEach( function( page ) {
            page.classList.remove( "active" );
        } );
        // Выделяем нужную ссылку
        var target = window.location.hash;
        var a = document.querySelector( `aside a[href="${target}"]` );
        if ( a ) {
            a.classList.add( "active" );
        }
        // надо ли непонятно, скопировал из предыдущего обработчика кликов на всякий случай
        document.body.classList.remove( "menu" );
    } );

    // Прокрутка tabs при перетаскивании мышкой
    const tabs = document.querySelector( "body > header .tabs" );
    if ( tabs ) { // Нет при входе
        tabs.onmousedown = function(e) {
            // Не перетаскивать, если клик был по кнопке пейджера
            // if (e.target.closest('.button')) {
            //     return;
            // }
            // e.preventDefault(); // Предотвратить выделение текста

            const startX = e.pageX;
            const scrollLeft = tabs.scrollLeft;

            // Добавляем класс для стилизации курсора во время перетаскивания
            // tabs.classList.add('active-drag');

            document.onmousemove = function(moveEvent) {
                const walk = moveEvent.pageX - startX;
                tabs.scrollLeft = scrollLeft - walk;
            };

            document.onmouseup = function() {
                // tabs.classList.remove('active-drag');
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
        // Отключить стандартное перетаскивание браузера
        tabs.ondragstart = function() { return false; };
    }

    // Theme switcher
    document.querySelectorAll( "body > header .menu .theme" ).forEach( function( el ) {
        el.addEventListener( "click", function( event ) {
            event.preventDefault();
            var n = get_cookie( "theme" ) || 0;
            var styles2 = admin_styles[n];
            var styles = styles2.split( " " );
            styles.forEach( function( style ) {
                document.documentElement.classList.remove( style );
            } );
            n = (+n+1) % admin_styles.length;
            styles2 = admin_styles[n];
            styles = styles2.split( " " );
            styles.forEach( function( style ) {
                document.documentElement.classList.add( style );
            } );
            notify_answer( {
                "result": {
                    "notify_html": admin_styles[n]
                }
            } );
            set_cookie_expires( "theme" , n );
            theme_event = new Event( "theme" );
            document.dispatchEvent( theme_event );
        } );
    } );

    // Logout
    document.querySelectorAll( "body > header .menu .logout" ).forEach( function ( logoutBtn ) {
        logoutBtn.addEventListener( "click", function() {
            // Отправляем на бекенд чтобы закрыло сессию
            api( { fn: "logout" },
                // Перезагрузка страницы в случае если админка ответила
                function( answer ) {
                    window.location.reload( true );
                },
                // Даже если нет связи, удаляем куки и перезагружаем страницу
                function( event ) {
                    del_cookie( "sess" );
                    window.location.reload( true );
                }
            );
        });
    } );
    
    // Highlight active menu
    if ( document.body.classList.contains( "logged" ) ) {
        var page = window.location.hash;
        // Зачем тут исключение #start?
        if ( page && page != "#start" ) {
            var el = document.querySelector( `a[href="${page}"]` );
            if ( el ) el.classList.add( "active" );
        } else if ( document.querySelector( "#start a[href='#base']" ) ) {
            // Приветственная страничка с указанием подключиться к БД
            window.location.hash = "#start";
        } else {
            // Если никакой пункт не выбран, выбираем по умолчанию Страницы
            window.location.hash = "#pages";
        }
    }

    // Clear Cache
    document.querySelectorAll( ".clear-cache" ).forEach( function( el ) {
        el.addEventListener( "click", function( e ){
            e.preventDefault();
            api( { fn: "clear_cache" }, function( answer ) {
                notify_answer( answer );
            } );
        });
    } );

    
    // Admin section, Save properties
    document.querySelectorAll( "[data-am-save]" ).forEach( function( saveButton ) {
        saveButton.addEventListener( "click", function( e ) {
            const el       = this.closest( "[data-am-item]" );
            const item     = el.getAttribute( "data-am-item" );
            const selector = `#admin_menu [data-am-item="${item}"]`;
            let title = "";
            const title_el = document.querySelector( `${selector} [name=title]` );
            if ( title_el ) {
                title = title_el.value;
            }
            const section = document.querySelector( `${selector} .orders.select .selected` );
            let section_name = "";
            if ( section ) {
                section_name = section.getAttribute( "data-section" );
            }
            const data = {
                fn:      "admin_menu_save",
                type:    el.getAttribute( "data-am-type" ),
                module:  el.getAttribute( "data-am-module" ),
                item:    item,
                title:   title,
                sort:    document.querySelector( `${selector} [name=sort]` ).value,
                section: section_name,
                reset:   this.hasAttribute( "data-am-reset" ),
            }
            api( data, function( answer ) {
                if ( answer.result ) {
                    window.location.reload( true );
                }
            } );
        } );
    } );

    // Admin section, Delete Container
    document.querySelectorAll( "[data-am-delete]" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ){
            var item = this.closest( "[data-am-item]" ).getAttribute( "data-am-item" );
            var childs = document.querySelectorAll( `[data-am-childs="${item}"] > div` ).length;
            if ( childs > 0 ) {
                notify_answer( {
                    "error": {
                        "notify_html": __( "not_empty_section" )
                    }
                } );
                return;
            }
            if ( ! confirm( __( "confirm_delete" ) ) ) {
                return;
            }
            var data = {
                fn: "admin_menu_del",
                item: item,
            }
            api( data, function( answer ) {
                notify_answer( answer, function( answer ) {
                    if ( answer.result ) {
                        window.location.reload( true );
                    }
                } );
            } );
        } );
    } );

    // Admin section, Hide
    document.querySelectorAll( "[data-am-sw]" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ) {
            const el   = this.closest( "[data-am-item]" );
            const data = {
                fn:      "admin_menu_hide",
                type:    el.getAttribute( "data-am-type" ),
                module:  el.getAttribute( "data-am-module" ),
                item:    el.getAttribute( "data-am-item" ),
                hide:    el.classList.contains( "showed" ),
            }
            if ( data.item == "admin_menu" ) {
                if ( ! confirm( __( "hide_admin_settings" ) ) ) {
                    return false;
                }
            }
            api( data, function( answer ) {
                notify_answer( answer );
                if ( answer.result ) {
                    window.location.reload( true );
                }
            } );
        } );
    } );

    // Admin section, Add Section
    document.querySelectorAll( "#admin_menu .footer .add" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ) {
            api( { fn: "admin_menu_add_section" }, function( answer ) {
                notify_answer( answer, function( answer ) {
                    if ( answer.result ) {
                        window.location.reload( true );
                    }
                } );
            } );
        } );
    } );


    // Reset all items in Admin Menu
    document.querySelectorAll( "#admin_menu .footer .reset" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ) {
            api( { fn: "reset_panel_items" }, function( answer ) {
                notify_answer( answer, function() {
                    window.location.reload( true );
                } );
            } );
        } );
    } );


    // Disable Modules
    document.querySelectorAll( "#modules .button.switch" ).forEach( function( button ) {        
        button.addEventListener( "click", function( e ) {
            var closest = this.closest( "[data-module]" );
            var data = {
                fn: "module_disable",
                disable: closest.classList.contains( "enabled" ),
                module: closest.getAttribute( "data-module" ),
            }
            api( data, function( answer ) {
                notify_answer( answer, function( answer ) {
                    if ( answer.result ) {
                        window.location.reload( true );
                    }
                } );
            } );
        } );
    } );

    // Delete Module
    document.querySelectorAll( "#modules .button.del" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ) {
            var module = this.closest( "[data-module]" ).getAttribute( "data-module" );
            var data = {
                fn: "module_del",
                module:  module,
            }
            api( data, function( answer ) {
                notify_answer( answer );
            } );
        } );
    } );

    // Close Sessions
    document.querySelectorAll( "#auth .button.close[data-login]" ).forEach( function( button ) {
        button.addEventListener( "click", function( event ) {
            event.preventDefault();
            if ( ! confirm( __( "confirm_logout" ) ) ) {
                return;
            }
            var parent = button.parentElement;
            var data = {
                fn: "logout",
                sess: event.currentTarget.getAttribute( "data-login" ),
            }
            api( data, function( answer ) {
                notify_answer( answer );
                if ( answer.result ) {
                    if ( answer.result.refresh === true ) {
                        // refresh приходит если мы закрываем свою сессию
                        window.location.reload( true );
                    } else {
                        // Перемещаем сессию в закрытые путем копирования html,
                        // предварительно удалив класс del чтобы не отображался крестик.
                        // А старый элемент удаляем.
                        // При копировании html так же удаляется привязанная функция.
                        button.classList.remove( "close", "button" );
                        var html = parent.outerHTML;
                        parent.remove();
                        document.querySelector( "#auth .history .sessions" ).insertAdjacentHTML( "afterbegin", html );
                    }
                }
            } );
        } );
    } );

    // Show/Hide password
    document.querySelectorAll( ".password.widget .button" ).forEach( function( eye ) {
        eye.addEventListener( "click", function( e ) {
            this.classList.toggle( "showed" );
            const input = this.previousElementSibling;
            if ( input.getAttribute( "type" ) == "password" ) {
                input.setAttribute( "type", "text" );
            } else {
                input.setAttribute( "type", "password" );
            }
            input.focus();
            input.setSelectionRange(input.value.length, input.value.length); // Курсор в конец
        } );
    } );

    // Установка модуля
    var input = document.querySelector( "#modules .button.upload input" );
    if ( input ) input.addEventListener( "change", async function( event ) {
        const data = {
            "fn": "install_module",
            "files": input.files,
        }
        const google_chrome_fix = this;
        api( data, 
            function result_fn( answer ) {
                // progress.style = "";
                google_chrome_fix.value = "";
                notify_answer( answer, function() {
                    if ( answer.result ) {
                        window.location.reload( true );
                    }
                } );
            },
            function error_fn( event ) {

            },
            function ajax_progress( event ) {
                // const percent = Math.round( ( event.loaded / event.total ) * 100 );
                // progress.style.height = percent + "%";
            },
            function ajax_error( event ) {

            },
            function ajax_abort( event ) {

            },
        );
    } );

    // Выбор секции Админского меню. Select
    document.querySelectorAll( "#admin_menu .orders.select" ).forEach( function( select ) {
        select.addEventListener( "click", function( e ) {
            e.stopPropagation();
            this.classList.toggle( "open" );
        } );
    } );
    
    // Выбор секции Админского меню. Option
    document.querySelectorAll( "#admin_menu .options .option" ).forEach( function( option ) {
        option.addEventListener( "click", function( e ) {
            var input = this.closest( ".select" ).querySelector( ".selected" );
            input.querySelector( ".value" ).innerText = this.innerText;
            input.setAttribute( "data-section", this.getAttribute( "value" ) );
        } );
    } );
    // Select
    // Закрытие выпадающих списков при кликах вне их, а так же по ним
    document.body.addEventListener( "click", function( e ) {
        document.querySelectorAll( "#admin_menu .select" ).forEach( function( list ) {
            list.classList.remove( "open" );
        } );
    } );


    /* Обновление и проверка файлов */

    document.querySelectorAll( "#modules [data-fn]" ).forEach( function( button ) {
        button.addEventListener( "click", function() {
            const data = {
                fn: this.getAttribute( "data-fn" )
            }
            api( data, function( answer ) {
                notify_answer( answer, function() {
                    if ( answer.result && answer.result.reload ) {
                        window.location.reload( true );
                    }
                } );
                
                if ( answer.result ) {
                    switch ( data.fn ) {
                        case "cms_update":
                            // document.querySelector( "#modules .header .panel.update" )
                            //     .insertAdjacentHTML( "beforeend", answer.result );
                        break;
                        
                        case "create_zip":
                            // document.querySelector( "#modules .header .panel.dev" )
                            //     .insertAdjacentHTML( "beforeend", answer.result.notify_html );
                        break;
                        
                        case "cms_check_update":
                        case "cms_check_dev_update":
                            document.querySelector( "#modules .panel.update .info" )
                                .innerHTML = answer.result.update_info;
                        break;

                        case "cms_changed_files":
                        case "cms_untracked_files":
                            const panel_files = document.querySelector( "#modules .header .panel.files" );
                            panel_files.innerHTML = answer.result;
                            panel_files.classList.remove( "empty", "hidden" );
                        break;
                    }
                } else if ( answer.error ) {
                    switch ( data.fn ) {
                        case "create_zip":
                            document.querySelector( "#modules .header .panel.dev" )
                                .insertAdjacentHTML( "beforeend", answer.error );
                        break;
                    }
                }
            } );
        } );
    } );

    // Показать кнопки "Проверить Dev", "Измененные файлы", "Создать Zip"
    const dev_btn = document.querySelector( "#modules .button.dev" );
    if ( dev_btn ) { // Нет при входе
        dev_btn.addEventListener( "click", function() {
            document.querySelector( "#modules .panel.dev" ).classList.toggle( "hidden" );
            document.querySelector( "#modules .panel.files" ).classList.toggle( "hidden" );
        } );
    }

    // Шрифты
    const fonts_page = document.querySelector( "#fonts" );
    if ( fonts_page ) {
        const fonts = get_cookie( "fonts" ).split( "," );

        const var_font = fonts[0].split( ":" );
        const mono_font = fonts[1].split( ":" );
        
        const var_font_name = fonts_page.querySelector( "input[name=font]" );
        var_font_name.value = var_font[0];
        
        const var_font_size = fonts_page.querySelector( "input[name=font-size]" );
        var_font_size.value = var_font[1];
        
        const mono_font_name = fonts_page.querySelector( "input[name=font-mono]" );
        mono_font_name.value = mono_font[0];
        
        const mono_font_size = fonts_page.querySelector( "input[name=font-mono-size]" );
        mono_font_size.value = mono_font[1];

        fonts_page.querySelector( ".button" ).addEventListener( "click", function( e ) {
            const fonts_cookie = `${var_font_name.value}:${var_font_size.value},${mono_font_name.value}:${mono_font_size.value}`;
            set_cookie_expires( "fonts", fonts_cookie );
            window.location.reload();
        } );
    }

} );
