class codeTemplateDialog extends WindozDialogContent {

    actions = [
        {
            label: 'Close',
            onclick: this.cancel.bind(this),
            severity: 'secondary'
        }
    ]

    beautifySettings = {
        "indent_size": "4",
        "indent_char": " ",
        "max_preserve_newlines": "-1",
        "preserve_newlines": false,
        "keep_array_indentation": true,
        "break_chained_methods": true,
        "indent_scripts": "normal",
        "brace_style": "collapse",
        "space_before_conditional": false,
        "unescape_strings": false,
        "jslint_happy": false,
        "end_with_newline": false,
        "wrap_line_length": "0",
        "indent_inner_html": false,
        "comma_first": false,
        "e4x": false,
        "indent_empty_lines": false
      };
    
    DOMContentLoaded(options) {        
        this.codeclass = options.codeclass;
        this.styleguideView = options.styleguideView;
        this.styleguideEl = document.createElement('div');
        this.styleguideEl.innerHTML = options.styleguideTemplate; 
        this.styleguideCode = options.styleguideCode;

        let content = '';
        let snipet, re, mstart, mend, startidx, endidx, code;
        for(let el of this.styleguideEl.querySelectorAll('.'+this.codeclass)) {
            // Remove all instances of the code-show button themselves from the (cloned, src) markup.
            for(let node of el.querySelectorAll('button.show-code')) node.remove(); 
            // Get the proper template part(s) -before it was eicfy
            let title = el.dataset.codetitle;
            snipet = el.outerHTML.replace(this.codeclass,'');
            snipet = snipet.replace(/data-codetitle=".+?"/g, '')
            snipet = snipet.replace('class=""','');
            snipet = snipet.replace(/ (\w+)=""/g,' $1'); // brutal: will cleanup outside tags
            snipet = html_beautify(snipet, this.beautifySettings);
            snipet = hljs.highlight(snipet, { 'language':'html'} );
            content += `
            <article eiccard collapsable>
                <header><h1>${title} Markup</h1></header>
                <section class="code">
                    <pre><code class="language-html">${snipet.value}</code></pre>
                </section>
            </article>
            `;
        }

        // Now get the corresponding JS
        re = new RegExp(`\\/\\* *${this.codeclass} *\\: *show_code_start *\\*\\/`,'gm') 
        mstart = re.exec(this.styleguideCode);
        re = new RegExp(`\\/\\* *${this.codeclass} *\\: *show_code_end *\\*\\/`,'gm') 
        mend = re.exec(this.styleguideCode);
        if(mstart && mend){
            startidx= mstart.index+mstart[0].length
            endidx = mend.index;
            if(endidx > startidx) {
                snipet =  this.styleguideCode.substring(startidx, endidx);
                snipet = js_beautify(snipet, this.beautifySettings);
                snipet = hljs.highlight(snipet, { 'language':'javascript'});
                content += `
                <article eiccard collapsable>
                    <header><h1>Javascript</h1></header>
                    <section class="code">
                        <pre><code class="language-html">${snipet.value}</code></pre>
                    </section>
                </article>
                `;
            }
        }           
         
        this.find('.snipets').innerHTML = content;

        ui.eicfy(this.el);
    }

}

app.registerClass('codeTemplateDialog',codeTemplateDialog);