<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Inserisci il Branded Content</title>
    <script type="text/javascript" src="/wp/wp-includes/js/tinymce/tiny_mce_popup.js"></script>
    <script type="text/javascript" src="{{base_url}}/lib/Form.js?{{renewcache}}"></script>
    <script type="text/javascript" src="{{base_url}}/lib/LinkPreview.js?{{renewcache}}"></script>    
    <link rel="stylesheet" href="{{base_url}}/css/forms.css">

    <script>
        let content = tinyMCE.activeEditor.selection.getContent();

        /// casi di uscita
        if ( content.trim()  == '') { 

            tinyMCEPopup.alert("Selezionare un testo ", () => {

                tinyMCEPopup.close();
            }); 
        }

        class FieldsManager extends Form {

            initFields() {
                
                this.addDropdown( 'program', `${this.apiBase}programs/`,           '#program', 'program_id', 'program_name' );
                this.addDropdown( 'poNumber', `${this.apiBase}campaigns_by_program/program_id`, '#poNumber', 'id', 'po_number' );
                this.addDropdown( 'formats', '', '#formats', 'id', 'name', JSON.parse(`{{formats}}`) );
                
                this.fields.poNumber.dependsOn('program_id', this.fields.program );
            }
            
            submit( event ) {
                
                let data       = this.fields.poNumber.payload();
                let format     = this.fields.formats.payload();
                let link       = document.getElementById('link').value;


                 let content = tinymce.activeEditor.selection.getContent();

                /// casi di uscita

                /// verifica che non ci siano condizioni di errore
                if( this.verifyErrors() ) return;

                let shortcode = `[branded_content po_number="${data.po_number}" program_code="${data.program_code}"  format_id="${format.id}" link="${link}"]${content}[/branded_content]`;

                tinyMCE.activeEditor.execCommand( 'mceInsertContent', 0, shortcode );

                tinyMCEPopup.close();
            }

            /**
             * verifica che non ci siano condizioni di errore
             * 
             * @return {boolean} true se ci sono errori, false altrimenti
             */
            verifyErrors() {
                
                let errors = this.submitConditions.filter( item => !item.condition() );

                if( errors.length ) {
                    tinyMCEPopup.alert( errors.shift().message );
                    return true;
                }

                return false;
            }
        }

        window.addEventListener('DOMContentLoaded', function() { 

            const fieldManager = new FieldsManager(`{{ApiBrandedContent}}`);

        }.bind(this));

    </script>
</head>
<body onload="tinyMCEPopup.executeOnLoad('init();')">
    
    
    <legend>Seleziona il programma</legend>                        
    <select name="program" id="program"><option value="">-- scegli --</option></select>

    <legend>Seleziona il PO-Number</legend>           
    <select name="poNumber" id="poNumber"><option value="">-- scegli --</option></select>

    <legend>Seleziona il Formato</legend>           
    <select name="formats" id="formats"><option value="">-- scegli --</option></select>

    <legend>Inserisci il link</legend>
    <input type="text" name="link" id="link" value="" />

    <input type="button" id="submit" value="Inserisci" />
</body>
</html>