// Globals
// -----------------------------------------------------------------------------

// NOTE:
// Variable `id` is defined before evaluating this script
// id (int) : the id of edited post (or 0 if new post)

var post;
var categories = [
    // Nope! root can not be a post's category ... { id: 0 , label: 'Ρίζα (root)' }
];
var tags = [];      // array of integers
var files = [];     // array of { id:.., title:.., type:.., path:.. } records

const files_root = 'https://cdn.sklavenitis.co.gr/';    // files root firectory



var pageUrl = new URL(window.location.href);

// an alternative--id when a post id not exists (needed for file-upload)
// ... consist of a 6-digit date string + random number up to 999
const yymmdd = new Date().toISOString().slice(2, 10).replaceAll('-','');
var rnd999 = Math.floor(Math.random() * 1000);
var altID = (id == 0) ? ( yymmdd +'-'+ rnd999.toString() ) : id;




// Supplamentary functions
// -----------------------------------------------------------------------------

// function for sorting an array by 'label' attribute
// --- -- -- - - -
function compare_label (a,b) {
    if ( a.label < b.label ) { return -1; }
    if ( a.label > b.label ) { return 1; }
    return 0;
}

// return category record by category-id
// --- -- -- - - -
function category_record(id) {
    var record = 0;
    categories.forEach(el => { if (el.id == id) record = el; });
   
    return record;
}




// Modal HTML Creators
// -----------------------------------------------------------------------------

const modal_header = (title) => {
    return [
        '<div class="modal-header">',
            '<button type="button" class="close" data-dismiss="modal" aria-label="Close">',
                '<span aria-hidden="true">&times;</span>',
            '</button>',
            '<h4 class="modal-title" id="myModalLabel">',
                title,
            '</h4>',
        '</div>'
    ].join('\n');
}


const upload_file_form = () => {
    return [
        '<form method="POST" id="file_upload_form" name="upload_file_form">',

            '<div class="modal-body">',

                '<input type="hidden" name="folder" value="'+ altID +'">',

                '<div class="form-group">',
                    '<label for="title">Τίτλος/Περιγραφή για το Αρχείο</label>',
                    '<input type="text" class="form-control " value="" name="title" id="title" placeholder="Τίτλος για το Αρχείο" required="">',
                '</div>',

                '<div class="row">',

                    '<div class="form-group col-md-7">',
                        '<label class="control-label" for="file">Εισαγωγή Αρχείου</label>',
                        '<input class="form-control" type="file" id="file" name="file" required="">',
                    '</div>',

                    '<div class="form-group col-md-5">',
                        '<label class="control-label" for="category_id">Είδος</label>',
                        '<select class="form-control" id="reference" name="reference" required="">',
                            '<option"></option>',
                            '<option value="1">Παραπομπή (εμφανίζεται)</option>',
                            '<option value="0">Βοηθητικό αρχείο (κρυφό)</option>',
                        '</select>',
                    '</div>',

                '</div>',

            '</div>',

            '<div class="modal-footer">',
                '<div class="row">',
                    '<div class="form-actions">',
                        '<div class="col-lg-3 col-lg-offset-6 col-md-4 col-md-offset-4 col-xs-6">',
                            '<buton type="button" class="btn btn-default js-modal-close col-xs-12" data-dismiss="modal">',
                                'Κλείσιμο',
                            '</button>',
                        '</div>',
                        '<div class="col-lg-3 col-md-4 col-xs-6">',
                            '<button class="btn btn-success col-xs-12" type="submit">Καταχώριση</button>',
                        '</div>',
                    '</div>',
                '</div>',
            '</div>',

        '</form>'
    ].join('\n');
}


const preview_article = (title, intro, body) => {
    return [
        '<div class="modal-body">',
            '<div class="post">',

                '<h2>'+ title +'</h2>',

                ((intro == '') ? '' : ('<div class="intro">'+ intro +'</div>')),

                '<div class="article-body">',
                    marked.parse(body, { sanitize: true }),
                '</div>',
             
            '</div>',
        '</div>',
        '<div class="modal-footer">',
            '<div class="row">',
                '<div class="form-actions">',
                    '<div class="col-md-4 col-md-offset-4 col-xs-6 col-xs-offset-3">',
                        '<buton type="button" class="btn btn-default js-modal-close col-xs-12" data-dismiss="modal">',
                            'Κλείσιμο',
                        '</button>',
                    '</div>',
                '</div>',
            '</div>',
        '</div>'
    ].join('\n');
}


$(document).ready(function() {

    // When document is ready
    // -------------------------------------------------------------------------


    // inti category (select2)
    // ...
    $("#category_id").select2({
        placeholder: 'Γονική Κατηγορία',
        width: '100%'
    });


    // init tags (select2)
    // ...
    $('#tags').select2({
        placeholder: 'Ετικέτες (tags/keywords)',
        width: '100%',
        tags: true
    });


    // init editor (tiny MCE)
    // tinymce.init({
    //     selector: 'form textarea[name=body]',
    //     language: 'el',
    //     menubar: true
    // });
    // --- -- -- - - -


    /** preload content
     * --- -- -- - - -
     * get post
     * get categories
     * get tags
     * update content (form-elements)
     */
    if (id) {   // if an `id` is given, load post .. then init_form

        $.getJSON( "/wiki/ajax", { action: "get_post", id: id } )
        .done( function (data) {
            post = data;            // keep post

            // update fields' values
            $('input[name=id]').val(post.id);           // id
            $('input[name=title]').val(post.title);     // title
            $('textarea[name=intro]').val(post.intro);  // intro
            $('textarea[name=body]').val(post.body);    // body         
            $('input[name=status]').prop(               // status
                'checked',
                ((post.status==1)? true : false))
            .trigger('change');

            $('#post-info').html('Δημιουργία: '+post.creation_date+'<br>Τελευταία Ενημέρωση: '+ post.update_date);

            $('#delete').prop( "disabled", false );     // enable delete button

            // if intro exist, show intro (optinal) field
            if ((post.intro != null) && (post.intro != '')) {
                $('.optional label[for=intro]').addClass('show');   // unhide section
            }

            // parse media files; then draw
            if (post.medias_json != null) {
                files = JSON.parse(post.medias_json);
                $('.optional label[for=media]').addClass('show');   // unhide section
            }
            draw_files_list();      // then draw the files list
            
            init_form_values();     // init all (other) values
        });

    } else {    // else ... just init_form
        $('#delete').prop( "disabled", true );     // disable delete button for new post attempt
        // depricated $('select[name=status').val('0').trigger('change'); // pre-selecd unpublished
        init_form_values();
    }



    /**
     * load categories and tags;
     * if not a new post (id!=0) update form elemnts with post's values
     */
    function init_form_values() {

        $.when(     // when loaded posts and categories

            $.getJSON( "/wiki/ajax", { action: "get_categories_array", exclude: '0' } ),

            $.getJSON( "/wiki/ajax", { action: "get_all_tags" } )

        ).done( function( categories_response, tags_response ) {

            // construct categories data
            // ---
            Object.keys(categories_response[0]).forEach( key => {
                cat = categories_response[0][key];
                categories.push({
                    id: cat.rec.id,
                    label: cat.breadcrumb.replaceAll('\t', ' / ')
                });
            });
            categories.sort( compare_label );  // sort categories by breadcrumb

            // construct tags data
            // ---
            Object.keys(tags_response[0]).forEach( key => {
                tag = tags_response[0][key];
                tags.push({
                    id: tag.id,
                    label: tag.name
                });
            });

            // pass categories and tags options onto select2 elements
            // --- -- -- - - -
            if (id == 0) {
                set_parent_options( $('#category_id'), categories );
                set_parent_options( $('#tags'), tags );

            } else {
                // setup category_id options; select post's chosen category-id
                set_parent_options( $('#category_id'), categories, post.category_id );

                // parse selected tags
                // ---
                var selected_tag_ids = [];
                if (post.tags_json != null) {
                    var selected_tags = JSON.parse(post.tags_json);
                    selected_tags.forEach( itag => { selected_tag_ids.push(itag.id); })
                }
                // setup tags options; select post's chosen tags
                set_parent_options( $('#tags'), tags, selected_tag_ids );

                // ALSO: if tags selectd, show tags field
                if (selected_tag_ids.length != 0) { $('.optional label[for=tags]').addClass('show'); }
            }

        });

    }


    /** set_parent_options()
     * 
     * -> create options for parents <select>
     * -> choose selected parent
     * 
     * NOTE:
     * the targer <select> should be a select2 control
     * 
     * @param parents (array): array of parents
     * @param selected (int): selected parent
     */
    function set_parent_options(selector, list, selected_value = false) {

        list.forEach( li => {   // attach options into <select> control
            selector.append(`<option value="${li.id}">${li.label}</option>`);
        });

        if (selected_value !== false) {     // mark selected option(s)
            selector.val(selected_value).trigger('change');
        }
        else { selector.val(null).trigger('change'); }
    }


    /** draw_files_list
     * --- -- -- - - -
     */
    function draw_files_list() {
        var li_list = [];
        var ref_icon, ref_class;

        files.forEach( item => {
            // preapre [show|hide]-file as reference
            if (item.reference == 1) {
                ref_icon = '<i class="fas fa-eye"></i>';
                ref_class = 'btn-default';
    
            } else {
                ref_icon = '<i class="fas fa-eye-slash"></i>';
                ref_class = 'btn-disabled';
            }

            var copy = [    // copy button
                '<button type="button" class="btn btn-xs btn-default js-copy"',
                    'data-url="' + item.path + '">',
                    '<i class="far fa-clone"></i>',
                '</button>'
            ].join('');
            var ref = [   // show|hide (is_reference)
                '<button type="button" class="btn btn-xs '+ ref_class +' js-reference"',
                    'data-id="' + item.id + '">',
                    ref_icon,
                '</button>'
            ].join('');
            var del = [    // delete button
                '<button type="button" class="btn btn-xs btn-danger js-delete"',
                    'data-id="' + item.id + '">',
                    '<i class="fas fa-trash-alt"></i>',
                '</button>'
            ].join('');
            var option = [  // li html
                '<li>',
                    '<div class="text">' + item.title + '</div>',
                    '<div class="actions">',
                        ref, ' ', copy, ' ',  del,
                    '</div>',
                '</li>'
            ].join('');
            li_list.push(option);   // push to li_list
        });
        $('#files_list').html( li_list.join('\n') );

    }



    // When form's action-buttons are clicked
    // -------------------------------------------------------------------------


    // form submit
    // --- -- -- - - -
    $('.edit-post form').submit( event => {
        event.preventDefault();

        // rearrange tags to old and new ones
        // ---
        var old_tags = [];
        var new_tags = [];
        var tags = $('#tags').select2('data');      
        tags.forEach( t => {
            if (!parseInt(t.id)) {
                 new_tags.push(t.text);
            } else {    old_tags.push(t.id); }
        })

        var attachments = [];
        // attachments (array) of "`media_id`;`reference`" strings
        files.forEach( f => { attachments.push( f.id +';'+ f.reference ) });

        // prepare data to POST
        // ---
        var data = {
            id: parseInt($('.edit-post form input[name=id]').val()),
            title: $('.edit-post form input[name=title]').val(),
            category_id: parseInt($('#category_id').select2('data')[0].id),
            intro: $('.edit-post form textarea[name=intro]').val(),
            body: $('.edit-post form textarea[name=body]').val(),
            status: (($('input[name=status]').is(":checked")) ? 1 : 0),
            tags: old_tags,
            new_tags: new_tags,
            media: attachments
        };

        // select action url (add or update)
        // ---
        var request = '/wiki/ajax?action=' + ((data.id == 0) ? 'add_post' : 'update_post');

        // send POST (ajax) request
        $.post(request, data)
        .done(function( data ) {
            window.location.href = '/wiki/admin?action=posts';      // seems ok; bach to articles
        });       

    });


    // go-back (to posts)
    // --- -- -- - - -
    $('#go-back').click( event => {
        window.location.href = '/wiki/admin?action=posts';
    });


    // delete
    // --- -- -- - - -
    $('#delete').click( event => {
        // ask before deletion
        swal({
            title: 'Είστε βέβαιος;',
            html: "Ζητήσατε να διαγραφεί το άρθρο.<br>Παρακαλώ επιβεβαιώστε την διαγραφή.<br>ΠΡΟΣΟΧΗ: Δεν θα έχετε την δυνατότητα αναίρεσης!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Ακύρωση',
            confirmButtonText: 'Ναι, να διαγραφεί',
            showLoaderOnConfirm: true,
            preConfirm: function() {
                return new Promise(function(resolve) {
                    $.getJSON( "/wiki/ajax", { action: "delete_post", id: id } )
                    .done( function (data) {
                        // return to posts-administration
                        window.location.href = '/wiki/admin?action=posts';
                    });
                });
            }, 
            allowOutsideClick: false
        }).catch(swal.noop);

    });



    // copy url button
    // --- -- -- - - -
    $('.wiki').on('click', 'button.js-copy', function (e) {
        var copytext = '';   // default: copy nothing

        if ($(this).data('id') !== undefined) {
            copytext = pageUrl.origin +'/wiki/post?id=' + $(this).data('id');
        }

        if ($(this).data('url') !== undefined) {
            copytext = files_root + $(this).data('url');
        }
        
        navigator.clipboard
        .writeText(copytext)
        .then(() => {   // notify the copy event
            $(this).addClass('copied');
            setTimeout( () => { $(this).removeClass('copied'); }, 700);
        })
        .catch(() => {
            console.log("error on coping text");
        });
    });



    // delete (remove) file button
    // --- -- -- - - -
    $('.wiki').on('click', 'button.js-delete', function (e) {
        var media_id = $(this).data('id');

        // remove from files array the one with id == media_id
        // ---
        var temp = [];
        files.forEach( it => { if (it.id != media_id) temp.push(it); });

        files = temp;           // re-define files
        draw_files_list();      // then re-draw files list
    });



    

    // show|hide file as referece button
    // --- -- -- - - -
    $('.wiki').on('click', 'button.js-reference', function (e) {
        var id = $(this).data('id');
        
        // toggle reference attribute of item with `id` = id
        // ---
        var temp = [];
        files.forEach( it => {
            if (it.id == id) {
                it.reference = (it.reference==0) ? 1 : 0;
            }
            temp.push(it)
        });

        files = temp;           // re-define files
        draw_files_list();      // then re-draw files list
    });





    /** When modal show-up
     * -------------------------------------------------------------------------
     * ... prepare the manage-category form 
     * ... update select2 with possible parents
     */
    $('#editorModal').on('show.bs.modal', event => {
        let button = $(event.relatedTarget);    // Button that triggered the modal
        let action = button.data('action');     // action
        // var modal = $(this);    // modal object     
        
        // update modal literature

        switch (action) {
            case 'upload_file':
                $("#editorModal .modal-content").html(
                    modal_header('Εισαγωγή Αρχείου') + upload_file_form()
                );
                break;
            
                case 'preview':
                    let preview = preview_article(
                        $('.edit-post form input[name=title]').val(),
                        $('.edit-post form textarea[name=intro]').val(),
                        $('.edit-post form textarea[name=body]').val()
                    );
                    $("#editorModal .modal-content").html( modal_header('Προεπισκόπηση') + preview);
                    break;

            default:
                // do nothing
        }

    });



    /** submit upload file event
     * -------------------------------------------------------------------------
     */
    $('#editorModal').on('submit', 'form[name=upload_file_form]', function (event) {
        event.preventDefault();

        // create the FormData object
        // --- -- -- - - -
        var fd = new FormData(document.getElementById('file_upload_form'));

        // post the form (via ajax)
        $.ajax({
            url: '/wiki/ajax?action=file_upload',
            type: 'POST',
            data: fd,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(response) {   // on success

                if (response.success) {      
                    files.push({    // ... update files array
                        id: response.id,
                        title: response.title,
                        path: response.path,
                        type: response.type,
                        reference: $('#reference').val()
                    });
                    draw_files_list();                   

                    $('#editorModal').modal('hide');

                } else {
                    console('File not uploaded');
                }
            }
        });
    });


    // TODO:
    // disable links while previewing the article
    // OR add a target="_blank"


});