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

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

    const section_template = document.querySelector( "#template" );

    // Edit file
    section_template.querySelectorAll( ".files .file" ).forEach( function( file_el ) {
        file_el.addEventListener( "click", function( e ) {
            const fname = file_el.innerText;

            const ed_tpl = section_template.querySelector( ".editor.template" );
            const tabs = document.querySelector( "header .tabs" );

            // Может быть нужный div уже создан
            const ed = section_template.querySelector( `.editor[data-file="${fname}"]` );
            if ( ed ) {
                // Если он уже есть, значит просто отобразить его
                section_template.classList.add( "editor" );
                ed.classList.remove( "hidden" );
                tabs.querySelector( `.tpl[data-file="${fname}"]` ).classList.add( "active" );
            } else {
            
                file_el.classList.add( "loading" );
                api( { fn: "get_template_file", file: fname }, function( r ) {
                    file_el.classList.remove( "loading" );
                    notify_answer( r );
                    if ( r.result ) {
                        // Добавить кнопку на панель
                        const span = document.createElement( "span" );
                        span.innerText = short_title( fname );
                        const button = document.createElement( "div" );
                        button.appendChild( span );
                        button.classList.add( "button", "tpl", "active" );
                        button.setAttribute( "data-file", fname );
                        tabs.querySelectorAll( ".tpl.active" ).forEach( function( btn ) {
                            btn.classList.remove( "active" );
                        } );
                        tabs.appendChild( button );
                        section_template.classList.add( "editor" );

                        // 1. Щелчок по кнопке скрывает/показывает редактор, если мы в #template
                        // 2. Щелчок по активной кнопке переводит на #template, но не меняет ее состояние
                        // 3. Щелчок по неактивной переводит на #template и меняет ее состояние
                        button.addEventListener( "click", function( e ) {
                            let switch_page = false;
                            // Переключить на вкладку Шаблоны
                            if ( window.location.hash !== "#template" ) {
                                window.location.hash = "#template";
                                switch_page = true;
                            }

                            if ( switch_page && button.classList.contains( "active" ) ) {
                                cm.focus();
                            } else {
                                // Предыдущая нажатость
                                const button_active = button.classList.contains( "active" );
                                // Отжать все
                                tabs.querySelectorAll( ".tpl" ).forEach( function( btn ) {
                                    const data_file = btn.getAttribute( "data-file" );
                                    const selector = `.editor[data-file="${data_file}"]`;
                                    section_template.querySelector( selector ).classList.add( "hidden" );
                                    btn.classList.remove( "active" );
                                } );
                                section_template.classList.remove( "editor" );
                                
                                // Нажать только если была отжата
                                if ( ! button_active ) {
                                    button.classList.add( "active" );
                                    section_template.classList.add( "editor" );
                                    const data_file = button.getAttribute( "data-file" );
                                    const selector = `.editor[data-file="${data_file}"]`;
                                    section_template.querySelector( selector ).classList.remove( "hidden" );
                                    cm.focus();
                                }
                            }
                        } );

                        // Добавить div редактора
                        const ed = ed_tpl.cloneNode( true );
                        ed.classList.remove( "template" );
                        ed.setAttribute( "data-file", fname );
                        section_template.appendChild( ed );

                        ed.querySelector( ".header .title" ).innerText = fname;
                        ed.querySelector( ".textarea > textarea" ).value = r.result.file;

                        const save_btn = ed.querySelector( ".save.button" );
                        save_btn.setAttribute( "hash", r.result.hash );

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

                        // получаем расширение без ведущей точки
                        let m   = fname.match( /\.[^\.]+$/ );
                        let ext = m ? m[0].slice( 1 ) : "";
                        let aext = {
                            "php"  : "application/x-httpd-php",
                            "html" : "application/x-httpd-php",
                            "css"  : "text/css",
                            "less" : "text/x-less"
                        }

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

                        cm.focus();
                        cm.restore_cursor();
                        
                        // track changes
                        ed.querySelector( ".close.button" ).setAttribute( "data-changed", "false" );
                        ed.querySelector( ".window" ).setAttribute( "data-changed", "false" );
                        cm.on( "change", function() {
                            ed.querySelector( ".close.button" ).setAttribute( "data-changed", "true" );
                            ed.querySelector( ".window" ).setAttribute( "data-changed", "true" );
                            button.setAttribute( "data-changed", "true" );
                        } );

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

                        // Для сниппетов
                        ed.querySelectorAll( ".snippets [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 len  = this.getAttribute( "data-len" );
                                    let ch   = this.getAttribute( "data-ch" );
                                    let line = this.getAttribute( "data-line" );

                                    let cursor = cm.getCursor();
                                    let selections = cm.getSelections();
                                    let replacements = [];
                                    for ( let i = 0; i < selections.length; i++ ) {
                                        replacements[i] = otag + selections[i] + ctag;
                                    }
                                    cm.replaceSelections( replacements );

                                    if ( selections.length < 2 ) {
                                        if ( line ) {
                                            cursor.line += +line;
                                            cursor.ch = +ch;
                                        } else if ( len ) {
                                            cursor.ch += +len;
                                        }
                                        cm.setCursor( cursor );
                                    }

                                    cm.focus();
                                }
                            } );
                        } );

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

                        // Close Editor
                        ed.querySelector( ".close.button" ).addEventListener( "click", function( e ) {
                            ed.remove();
                            button.remove();
                            // Удалить событие
                            document.querySelector( "aside a[href='#template']" ).removeEventListener( "click", cm_focus );
                            section_template.classList.remove( "editor" );
                        } );

                        // Сворачивание редактора
                        ed.querySelector( ".minimize.button" ).addEventListener( "click", function( e ) {
                            ed.classList.add( "hidden" );
                            button.classList.remove( "active" );
                            section_template.classList.remove( "editor" );
                        } );

                        // Возврат фокуса редактору при кликах на "Шаблоны"
                        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 = section_template.querySelector( ".button.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
    const template_selector = section_template.querySelector( ".templates.select" );
    template_selector.addEventListener( "click", function( e ) {
        e.stopPropagation();
        this.classList.toggle( "open" );
    } );
    // Option
    template_selector.querySelectorAll( ".option" ).forEach( function( option ) {
        option.addEventListener( "click", function( e ) {
            const input = template_selector.querySelector( ".selected" );
            input.querySelector( ".value" ).innerText = this.innerText;
            // Поскольку сохранение через форму, то вписать в input
            section_template.querySelector( "input[name='template']" ).value = this.innerText;
        } );
    } );
    // Закрытие выпадающих списков при кликах вне их, а так же по ним
    document.body.addEventListener( "click", function( e ) {
        template_selector.classList.remove( "open" );
    } );

} );
