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

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

    // Edit file
    document.querySelectorAll( "#template .template-files .file" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ) {
            let file = this.innerText;
            // get file from server
            api( { fn: "get_template_file", file: file }, function( r ) {
                if ( r.ok == "true" ) {
                    document.querySelector( ".template-editor-title" ).innerText = file;
                    document.querySelector( ".template-editor > textarea" ).value = r.file;

                    // Show Editor
                    document.querySelector( ".template-editor-bg" ).classList.remove( "hidden" );
                    document.body.classList.add( "editor" ); // for notifications

                    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"
                    }

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

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

                    // track changes
                    document.querySelector( ".close-template-button" ).setAttribute( "data-changed", "false" );
                    cmt.on( "change", function( cmt, change ) {
                        document.querySelector( ".close-template-button" ).setAttribute( "data-changed", "true" );
                        document.querySelector( ".template-editor-grid" ).setAttribute( "data-changed", "true" );
                    } );

                    // set cursor to editor
                    cmt.focus();

                    // Save Teplate Ctrl+S
                    document.querySelector( "body" ).addEventListener( "keydown", CtrlS );

                    document.querySelector( ".template-editor-grid" ).setAttribute( "data-changed", "false" );
                }
            } );
        } );
    } );

    // Для сниппетов
    document.querySelectorAll( "#template .snip-grid [data-type='snip']" ).forEach( function( btn ) {
        btn.addEventListener( "click", function( e ) {
            let text = this.getAttribute( "data-text" );
            let cm = window["cmt"];
            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();
            }
        } );
    } );

    // Close Editor
    document.querySelectorAll( ".close-template-button" ).forEach( function( button ) {
        button.onclick = function( e ) {
            document.querySelector( "body" ).removeEventListener( "keydown", CtrlS );
            // detach
            if ( window.cmt !== undefined ) {
                if ( this.getAttribute( "data-changed" ) === "true" ) {
                    if ( confirm( _( "confirm_save" ) ) ) {
                        document.querySelector( ".save-template-button" ).setAttribute( "data-close", "true" );
                        document.querySelector( ".save-template-button" ).click();
                        return;
                    }
                }
                window.cmt.toTextArea();
                window.cmt = null;
            }
            // hide editor
            document.querySelector( ".template-editor-bg" ).classList.add( "hidden" );
            document.body.classList.remove( "template_editor" );
            //window.prevent_reload = false;
        };
    } );

    // Save File
    document.querySelectorAll( ".save-template-button" ).forEach( function( button ) {
        button.onclick = function( e ) {
            window.cmt.save(); // drop changes to textarea
            let data = {
                fn: "save_template_file",
                file: document.querySelector( ".template-editor-title" ).innerText,
                content: document.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" ) {
                    //?
                    document.querySelector( ".close-template-button" ).setAttribute( "data-changed", "false" );
                    // hide changed indicator
                    document.querySelector( ".template-editor-grid" ).setAttribute( "data-changed", "false" );
                    // highlight save button
                    document.querySelector( ".save-template-button" ).classList.add( "saved" );
                    setTimeout( function() {
                        document.querySelector( ".save-template-button" ).classList.remove( "saved" );
                    }, 1000 );
                    // close editor after save only if ok
                    if ( document.querySelector( ".save-template-button" ).getAttribute( "data-close" ) === "true" ) {
                        document.querySelector( ".save-template-button" ).setAttribute( "data-close", "false" );
                        document.querySelector( ".close-template-button" ).click();
                    }
                }
            } );
        };
    } );

    function CtrlS( e ) {
        // ы and і - fix for librewolf
        if ( ( e.code == "KeyS" || e.key == "ы" || e.key == "і" ) && e.ctrlKey == true ) {
            e.preventDefault(); // don't save page
            if ( window.location.hash == "#template" ) {
                document.querySelector( ".save-template-button" ).click();
            }
        }
    }

    // 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 );
        }
    } );

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

    // 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" );
        } );
    } );

} );