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

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

    function short_title( str ) {
        // чтобы работать с символами, а не с кодовыми точками
        let s = Array.from( str );
        if ( s.length <= 35 ) return str;
        return s.slice(0, 10).join("") + " ... " + s.slice(-20).join("");
    }

    // Edit file
    document.querySelectorAll( "#template .template-files .file" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ) {
            let file = this.innerText;

            let template = document.querySelector( `#template` );
            let ed_tpl = template.querySelector( ".template-editor-bg" );

            // Может быть нужный div уже создан
            let ed = template.querySelector( `.tpl-ed-bg[data-file="${file}"]` );
            if ( ed ) {
                // Если он уже есть, значит просто отобразить его
                ed.classList.remove( `hidden` );
                document.querySelector( `.page-tabs .tpl[data-file="${file}"]` ).classList.add( "active" );
            } else {
            
                // get file from server
                api( { fn: "get_template_file", file: file }, function( r ) {
                    if ( r.ok == "true" ) {
                        // Добавить кнопку на панель
                        let button = document.createElement( "div" );
                        button.innerText = short_title( file );
                        button.classList.add( "tpl" );
                        button.classList.add( "active" );
                        button.setAttribute( "data-file", file );
                        let tabs = document.querySelector( ".page-tabs" );
                        tabs.querySelectorAll( ".tpl.active" ).forEach( function( btn ) {
                            btn.classList.remove( "active" );
                        } );
                        tabs.appendChild( button );

                        // Щелчок по кнопке скрывает/показывает редактор
                        button.addEventListener( "click", function( e ) {
                            let old_hash = window.location.hash;
                            window.location.hash = "#template";
                            // Отжать все нажатые
                            // Можно проверять количество и прекратить отжимать
                            let actives = this.parentElement.querySelectorAll( ".tpl.active" );
                            actives.forEach( function( btn ) {
                                let edid = btn.getAttribute( "data-file" );
                                if ( edid !== file ) {
                                    template.querySelector( `.tpl-ed-bg[data-file="${edid}"]` ).classList.add( "hidden" );
                                    btn.classList.remove( "active" );
                                }
                            } );
                            if ( old_hash !== "#template" && this.classList.contains( "active" ) ) {
                                cm.focus();
                            } else {
                                template.querySelector( `.tpl-ed-bg[data-file="${file}"]` ).classList.toggle( "hidden" );
                                this.classList.toggle( "active" );
                                cm.focus();
                            }
                        } );

                        // Добавить div редактора
                        let ed = ed_tpl.cloneNode( true );
                        ed.classList.remove( "template-editor-bg" );
                        ed.classList.add( "tpl-ed-bg" );
                        ed.setAttribute( "data-file", file );
                        template.appendChild( ed );
                                
                        ed.querySelector( ".template-editor-title" ).innerText = file;
                        ed.querySelector( ".template-editor > textarea" ).value = r.file;

                        // Show Editor
                        ed.classList.remove( "hidden" );

                        let ext = file.match( /\.[^\.]+$/, "" );
                        let aext = {
                            ".php"  : "application/x-httpd-php",
                            ".html" : "application/x-httpd-php",
                            ".css"  : "text/css"
                        }
                        let atags = {
                            ".php"  : "php",
                            ".html" : "html",
                            ".css"  : "css"
                        }

                        // Отображаем подходящие теги, остальные прячем
                        ed.querySelectorAll( `.snip-grid > *` ).forEach( function( el ) {
                            if ( el.classList.contains( atags[ext] ) ) {
                                el.classList.remove( "hidden" );
                            } else {
                                el.classList.add( "hidden" );
                            }
                        } );

                        // Подключаем редактор Codemirror функцией расположенной в admin.js
                        let cm = codemirror_connect( ed.querySelector( ".template-editor > textarea" ), { mode: aext[ext] } );

                        // set cursor to editor
                        cm.focus();
                        
                        // track changes
                        ed.querySelector( ".close-template-button" ).setAttribute( "data-changed", "false" );
                        ed.querySelector( ".template-editor-grid" ).setAttribute( "data-changed", "false" );
                        cm.on( "change", function( cmt, change ) {
                            ed.querySelector( ".close-template-button" ).setAttribute( "data-changed", "true" );
                            ed.querySelector( ".template-editor-grid" ).setAttribute( "data-changed", "true" );
                            button.setAttribute( "data-changed", "true" );
                        } );

                        // Сохранение по Ctrl+S
                        bind_key( ed, "CtrlKeyS", ed.querySelector( ".save-template-button" ), "click" );
                        bind_key( ed, "CtrlDigit2", ed.querySelector( ".snip-grid .css [data-otag^='@media']" ), "click" );
                        bind_key( ed, "CtrlSlash", ed.querySelector( ".snip-grid .css [data-otag='/* ']" ), "click" );
                        bind_key( ed, "CtrlPeriod", ed.querySelector( ".snip-grid .css [data-otag='/* ']" ), "click" );

                        // Для сниппетов
                        ed.querySelectorAll( ".snip-grid [data-type='snip']" ).forEach( function( btn ) {
                            btn.addEventListener( "click", function( e ) {
                                let text = this.getAttribute( "data-text" );
                                if ( cm ) {
                                    let otag = this.getAttribute( "data-otag" );
                                    let ctag = this.getAttribute( "data-ctag" );
                                    let selections = cm.getSelections();
                                    let replacements = [];
                                    for ( let i = 0; i < selections.length; i++ ) {
                                        replacements[i] = otag + selections[i] + ctag;
                                    }
                                    cm.replaceSelections( replacements );
                                    // с курсорами пока не понятен алгоритм
                                    /*
                                    selections = cm.listSelections();
                                    let shift = +this.getAttribute( "data-len" );
                                    if ( shift != 0 ) {
                                        for ( let i = 0; i < selections.length; i++ ) {
                                            selections[i].head.ch += shift;
                                            selections[i].anchor.ch += shift;
                                        }
                                    }
                                    */
                                    cm.focus();
                                    //cm.refresh();
                                }
                            } );
                        } );

                        // Save File
                        ed.querySelector( ".save-template-button" ).addEventListener( "click", function( e ) {
                            cm.save(); // drop changes to textarea
                            let data = {
                                fn: "save_template_file",
                                file: ed.querySelector( ".template-editor-title" ).innerText,
                                content: ed.querySelector( ".template-editor > textarea" ).value
                            }
                            api( data, function( r ) {
                                if ( r.info_text ) {
                                    notify( r.info_text, r.info_class, r.info_time );
                                }
                                if ( r.ok == "true" ) {
                                    //?
                                    ed.querySelector( ".close-template-button" ).setAttribute( "data-changed", "false" );
                                    // hide changed indicator
                                    ed.querySelector( ".template-editor-grid" ).setAttribute( "data-changed", "false" );
                                    button.setAttribute( "data-changed", "false" );
                                    // highlight save button
                                    ed.querySelector( ".save-template-button" ).classList.add( "saved" );
                                    setTimeout( function() {
                                        ed.querySelector( ".save-template-button" ).classList.remove( "saved" );
                                    }, 1000 );
                                    // close editor after save only if ok
                                    if ( ed.querySelector( ".save-template-button" ).getAttribute( "data-close" ) === "true" ) {
                                        ed.querySelector( ".save-template-button" ).setAttribute( "data-close", "false" );
                                        ed.querySelector( ".close-template-button" ).click();
                                    }
                                }
                            } );
                        } );

                        // Close Editor
                        ed.querySelector( ".close-template-button" ).addEventListener( "click", function( e ) {
                            if ( this.getAttribute( "data-changed" ) === "true" ) {
                                if ( confirm( _( "confirm_save" ) ) ) {
                                    ed.querySelector( ".save-template-button" ).setAttribute( "data-close", "true" );
                                    ed.querySelector( ".save-template-button" ).click();
                                    return;
                                }
                            }
                            ed.remove();
                            // Удалить вкладку-кнопку
                            let btn = document.querySelector( `.page-tabs .tpl[data-file="${file}"]` )
                            if ( btn ) btn.remove();
                            // Удалить событие
                            document.querySelector( "aside a[href='#template']" ).removeEventListener( "click", cm_focus );
                        } );

                        // Возврат фокуса редактору при кликах на "Шаблоны"
                        document.querySelector( "aside a[href='#template']" ).addEventListener( "click", cm_focus );
                        // Функция описано отдельно чтобы отцеплять ее
                        // Тут возможно множество срабатываний если открыто много редакторов, но ничего страшного
                        function cm_focus( e ) {
                            setTimeout( function( e ) {
                                cm.focus();
                            }, 50 );
                        }

                        // prevent hide cursor when window resize
                        window.addEventListener( "resize", function() {
                            let cursor = cm.getCursor();
                            cm.scrollIntoView( { line:cursor.line, ch:cursor.ch } );
                        } );
                        
                        
                    }
                } );
            }
        } );
    } );


    // Install template (upload template)
    let input = document.querySelector( "#template-upload" );
    input.addEventListener( "change", async function( e ) {
        const formData = new FormData();
        formData.append( "fn", "install_template" );
        for ( let i = 0; i < input.files.length; i++ ) {
            formData.append( "myfile[]", input.files[i] );
        }
        try {
            const response = await fetch( cms.api, { method: "POST", body: formData } );
            const r        = await response.json();
            input.value = ""; // chrome fix
            if ( r.info_text ) {
                notify( r.info_text, r.info_class, r.info_time );
                setTimeout( function() {
                    window.location.reload( true );
                }, r.info_time );
            }
        } catch ( error ) {
            console.error( "Error:", error );
        }
    } );


    // Select
    document.querySelectorAll( "#template .field-select" ).forEach( function( select ) {
        select.addEventListener( "click", function( e ) {
            e.stopPropagation();
            this.parentElement.classList.toggle( "open" );
            
            // это можно убрать если переставить стили на родителя
            select.nextElementSibling.classList.toggle( "open" );
        } );
    } );
    // Option
    document.querySelectorAll( "#template .field-options .option" ).forEach( function( option ) {
        option.addEventListener( "click", function( e ) {
            let input = this.closest( ".template-select-grid" ).querySelector( ".field-select" );
            input.querySelector( ".value" ).innerText = this.innerText;
            document.querySelector( "#template input[name='template']" ).value = this.innerText;
        } );
    } );
    // Select
    // Закрытие выпадающих списков при кликах вне их, а так же по ним
    document.body.addEventListener( "click", function( e ) {
        document.querySelectorAll( "#template .template-select-grid" ).forEach( function( list ) {
            list.classList.remove( "open" );
        } );

        // это можно убрать если переставить стили на родителя
        document.querySelectorAll( "#template .field-options" ).forEach( function( list ) {
            list.classList.remove( "open" );
        } );
    } );

} );
