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

    function toggleMenu(mid) {
        let menu = get_cookie('menu');
        if (menu === undefined || menu.substr(0,1) !== "[" ) { menu = "[]"; }
        menu = JSON.parse(menu);
        let index = menu.indexOf(mid);
        if (index === -1) {
            menu.push(mid);
        } else {
            menu.splice(index, 1);
        }
        menu = JSON.stringify(menu);
        set_cookie('menu', menu);
    }

    function removeMenu(mid) {
        let menu = get_cookie('menu');
        if (menu === undefined || menu.substr(0,1) !== "[" ) { menu = "[]"; }
        menu = JSON.parse(menu);
        let index = menu.indexOf(mid);
        if (index !== -1) {
            menu.splice(index, 1);
            menu = JSON.stringify(menu);
            set_cookie('menu', menu);
        }
    }

    function update_menu_items() {
        api2({fn:'get_menu_items'},set_menu_items);
    }
    if ( document.querySelector('body').classList.contains('logged') ) {
        update_menu_items();
    }
    function modMenuCreate( e ) {
        e.preventDefault();
        let pid = this.getAttribute('data-menu-create');
        let mobMenu = document.querySelector( '[data-menu-item="'+pid+'"] .menu-button, [data-menu-item="'+pid+'"] .item-button' );
        if ( mobMenu ) {
            mobMenu.classList.remove( "open" );
        }
        let sort = this.getAttribute('data-menu-sort');
        let sort2 = this.closest('[data-menu-box]');
        if (sort2) {
            sort2 = sort2.nextElementSibling;
            if ( sort2 ) {
                sort2 = sort2.querySelector('[data-menu-sort]');
            }
            if ( sort2 ) {
                sort2 = sort2.getAttribute('data-menu-sort');
            }
        }
        api2({fn:'create_menu_item',pid:pid,sort:sort,sort2:sort2},function(r){
            if (r.result == 'timeout') {
                notify( __("Connection lost", "menu.mod.php"), 'info-error', 10000 );
            } else if (r.info_text) {
                notify( r.info_text, r.info_class, 5000 );
                if ( r.info_class == 'info-success' ) {
                    set_menu_items(r);
                }
            }
        });
    }
    // Создать пункт
    document.querySelector( '[data-menu-create="0"]' ).addEventListener( "click", modMenuCreate );
    function set_menu_items(r) {

        // Заполняем список пунктов меню
        document.querySelector('[data-menu-list]').innerHTML = r.list;

        // Родительские пункты
        let parents = document.querySelectorAll( '[data-menu-parent]' );
        parents.forEach( function( el ) {
            let parent = el.getAttribute('data-menu-parent');
            let self   = el.getAttribute('data-menu-id');
            el.innerHTML = el.innerHTML + r.parents;
            // Удаляем себя из списка чтобы не назначить себя родителем
            self = el.querySelector('[value="'+self+'"]');
            if ( self ) {
                self.remove();
            }
            el.value = parent;
        } );

        // Области вывода
        let areas = document.querySelectorAll( '[data-menu-area]' );
        areas.forEach( function( el ) {
            let area = el.getAttribute( 'data-menu-area' );
            el.value = area;
        });

        // Событие выбора страницы ( чтобы сменить URL в нижнем поле )
        let pageSelectors = document.querySelectorAll( '#menu [data-value]' );
        pageSelectors.forEach( function( selector ) {
            selector.addEventListener( 'DOMAttrModified', function( event ){
                let mid = this.getAttribute('data-menu-id');
                let id  = this.getAttribute('data-value');
                if ( id == "0" ) {
                    document.querySelector('[data-menu-id="'+mid+'"][name="url"]').removeAttribute('disabled');
                } else {
                    let url = this.nextElementSibling.querySelector('li[value="'+id+'"]').getAttribute('data-url');
                    document.querySelector('[data-menu-id="'+mid+'"][name="url"]').value = url;
                    document.querySelector('[data-menu-id="'+mid+'"][name="url"]').setAttribute('disabled','disabled');
                }
            });
        });

        // Добавить страницы в выпадающий список
        //pageSelectors = document.querySelectorAll( '#menu [data-value]' );
        pageSelectors.forEach(function(el){
            let list = el.nextElementSibling.querySelector('.list-search');
            list.innerHTML = list.innerHTML + r.pages;
        });

        // Ищем все выпадающие списки на странице Меню
        let selects = document.querySelectorAll( "#menu .select-grid" );
        select3( selects );
        searcher( selects, ".list-search li", "" );

        /* Кликаем по выбранной */
        //pageSelectors = document.querySelectorAll( '#menu [data-value]' );
        pageSelectors.forEach(function(el){
            let page = el.getAttribute('data-value-prev');
            el.nextElementSibling.classList.add('open');
            let li = el.nextElementSibling.querySelector('li[value="'+page+'"]');
            if ( li ) {
                li.click();
            } else {
                el.nextElementSibling.querySelector('li[value="0"]').click();
            }
        });

        /* Call Mobile Menu */
        let menuBtns = document.querySelectorAll( '[data-menu-menu]' );
        menuBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                let id = this.getAttribute('data-menu-menu');
                let item = document.querySelector( '[data-menu-item="'+id+'"] .menu-button, [data-menu-item="'+id+'"] .item-button' );
                item.classList.add( 'open' );
            });
        });

        /* Close Mobile Menu */
        // дублирует функционал
        let closeMenuBtns = document.querySelectorAll( '[data-settings="menu"] .menu-button, [data-settings="menu"] .item-button' );
        closeMenuBtns.forEach( function ( button ) {
            button.addEventListener( "click", function(){
                this.classList.remove('open');
            });
        });

        // Открыть свойства
        let openPropBtns = document.querySelectorAll( '[data-menu-prop-open]' );
        openPropBtns.forEach( function ( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let mid = this.getAttribute('data-menu-prop-open');
                let prop = document.querySelector( '[data-menu-prop="'+mid+'"]' );
                prop.classList.remove( 'hidden' );
                prop.classList.add( 'openhot' );
                document.querySelector('[data-menu-item="'+mid+'"]').classList.add('hidden');
                let item = document.querySelector( '[data-menu-item="'+mid+'"] .menu-button, [data-menu-item="'+mid+'"] .item-button' );
                item.classList.remove( 'open' );
            });
        });

        // Показать/скрыть дочерние пункты
        let subitemsHideLinks = document.querySelectorAll( '[data-menu-subitems-hide]' );
        subitemsHideLinks.forEach( function( link ) {
            link.addEventListener( "click", function( e ){
                e.preventDefault();
                let mid = this.getAttribute('data-menu-subitems-hide');
                let menu_collapse = document.querySelector('[data-menu-subitems="'+mid+'"]');
                if ( menu_collapse ) {
                    menu_collapse.classList.toggle('closed');
                }
                toggleMenu(mid);
                let mm = document.querySelector( '[data-menu-item="'+mid+'"] .menu-button, [data-menu-item="'+mid+'"] .item-button' );
                mm.classList.remove( "open" );
            });
        });
        let menu = get_cookie('menu');
        if (menu === undefined || menu.substr(0,1) !== "[" ) { menu = "[]"; }
        menu = JSON.parse(menu);
        for ( let mid of menu ) {
            let m = document.querySelector('[data-menu-subitems="'+mid+'"]')
            if ( m ) {
                m.classList.toggle('closed');
            }
        }

        // Скрыть свойства
        let cancelBtns = document.querySelectorAll( '[data-menu-cancel]' );
        cancelBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let mid = this.getAttribute('data-menu-cancel');
                let prop = document.querySelector( '[data-menu-prop="'+mid+'"]' );
                prop.classList.add( "hidden" );
                prop.classList.remove( "openhot" );
                let item = document.querySelector( '[data-menu-item="'+mid+'"]' );
                item.classList.remove( "hidden" );
            });
        });

        // Сохранить свойства
        let saveBtns = document.querySelectorAll( '[data-menu-save]' );
        saveBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let mid      = this.getAttribute('data-menu-save');
                let selector =  '[data-menu-id="'+mid+'"]';
                let area = document.querySelector(selector+'[name="area"]');
                if ( area ) {
                    area = area.value;
                }
                let tag_title = document.querySelector(selector+'[name="tag_title"]');
                if ( tag_title ) {
                    tag_title = tag_title.value;
                }
                let url = document.querySelector(selector+'[name="url"]');
                if ( url ) {
                    url = url.value;
                }
                let id = document.querySelector(selector+'[name="id"]');
                if ( id ) {
                    id = id.getAttribute('data-value');
                }
                let pid = document.querySelector(selector+'[name="pid"]');
                if ( pid ) {
                    pid = pid.value;
                }
                let target = document.querySelector(selector+'[name="targetblank"]');
                if ( target ) {
                    target = target.checked;
                }
                let data = {
                    fn:        'save_menu_item',
                    mid:       mid,
                    title:     document.querySelector(selector+'[name="title"]').value,
                    tag_title: tag_title,
                    url:       url,
                    id:        id,
                    pid:       pid,
                    classes:   document.querySelector(selector+'[name="classes"]').value,
                    sort:      document.querySelector(selector+'[name="sort"]').value,
                    area:      area,
                    target:    target
                }
                api2(data, function(r){
                    if (r.result == 'timeout') {
                        notify( __("Connection lost", "menu.mod.php"), 'info-error', 10000 );
                    } else if (r.info_text) {
                        notify( r.info_text, r.info_class, 5000 );
                        if ( r.list ) {
                            set_menu_items(r);
                        }
                        if ( r.info_class == 'info-success' ) {
                            // Маркер последнего редактирования
                            document.querySelector('[data-menu-item="'+data.mid+'"]').classList.add('last-edited');
                        }
                    }
                });
            });
        });

        // Создать пункт
        let createBtns = document.querySelectorAll( '[data-menu-list] [data-menu-create]' );
        createBtns.forEach( function( button ) {
            button.addEventListener( "click", modMenuCreate );
        });
        

        // Удалить пункт или меню
        let delBtns = document.querySelectorAll( '[data-menu-del]' );
        delBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let id = this.getAttribute('data-menu-del');
                let mobMenu = document.querySelector( '[data-menu-item="'+id+'"] .menu-button, [data-menu-item="'+id+'"] .item-button' );
                if ( mobMenu ) {
                    mobMenu.classList.remove( "open" );
                }
                //$('[data-menu-item='+id+'] .menu-button').removeClass('open');
                //$('[data-menu-item='+id+'] .item-button').removeClass('open');
                if ( !confirm( __("Delete?", "menu.mod.php") ) ) return;
                let data = {
                    fn:'del_menu_item',
                    mid:id
                };
                api2(data, function(r){
                    if (r.result == 'timeout') {
                        notify( __("Connection lost", "menu.mod.php"), 'info-error', 10000 );
                    } else if (r.info_text) {
                        notify( r.info_text, r.info_class, 5000 );
                        if ( r.info_class == 'info-success' ) {
                            // remove from cookie
                            /*removeMenu(data.mid);
                            $('#page-menu .subbox-grid[data-mid='+data.mid+'] .cpline').each(function(i,el){
                                let mid = $(el).attr('data-mid');
                                removeMenu(mid);
                            });*/
                            set_menu_items(r);
                        }
                    }
                });
            });
        });

    }

    // Получить событие updated от модуля страниц
    let modPages = document.querySelector( '[data-settings=pages]' );
    if ( modPages ) {
        modPages.addEventListener("updated", function(event) {
            update_menu_items();
        });
    }

});
