// Globals
// -----------------------------------------------------------------------------
var categories = [];
var posts = [];
var table;

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


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

// function for sorting an array by 'breadcrumb' attribute
// --- -- -- - - -
function compare_breadcrumb (a,b) {
    if ( a.breadcrumb < b.breadcrumb ) { return -1; }
    if ( a.breadcrumb > b.breadcrumb ) { 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;
}

// create actions html (edit and delete buttons)
// --- -- -- - - -
function create_actions_html(id) {

    var copy, edit;

    edit = [
        '<button type="button" class="btn btn-xs btn-warning js-edit"',
            'data-id="'+ id +'">',
            '<i class="fas fa-pencil-alt"></i>',
        '</button>'
    ].join('\n');

    copy = [
        '<button type="button" class="btn btn-xs btn-dafault js-copy"',
            'data-id="'+ id +'">',
            '<i class="far fa-clone"></i>',
        '</button>'
    ].join('\n');

    return copy +' '+ edit;
}



$(document).ready(function() {

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

    /** init_table for 1st time
     * --- -- -- - - -
     * get posts + categories
     * constuct posts + categories array
     * render dataTable
     */
    // function init_table() {

        $.when(     // when loaded posts and categories

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

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

        ).done( function( posts_response, categories_response ) {

            // each response is an array of 3 items:
            // [0] => data (array)
            // [1] => [success|fail]
            // [2] => xhr object

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

            // construct posts data
            Object.keys(posts_response[0]).forEach( key => {
                po = posts_response[0][key];
                posts.push({
                    id: po.id,
                    title: po.title,
                    category: category_record(po.category_id).breadcrumb,
                    updated: po.update_date,
                    status: ((po.status == 1) ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>'),
                    actions: create_actions_html(po.id)
                });
            });

            // (re-)create categories datatable
            table = $('#dt-posts').DataTable({
                language: { url: '/libs/DataTables/localization/Greek.json' },
                data: posts,
                order: [[2, 'desc']],
                columns: [
                    { data: 'title' },
                    { data: 'category' },
                    {   // update date
                        data: 'updated',
                        render: {
                            _: function (data, row, full) { return data; },
                            display: function (data, row, full) { return mini_date(data); }
                        }
                    },
                    { data: 'status' },
                    { data: 'actions', width: '64px' }
                ],
                columnDefs: [{
                    'targets': [3,4],
                    'orderable': false
                }]
            });

       });


    function mini_date(d){
        let yy = d.substring(2,4);      // year 2digit
        let mo = d.substring(5,7);      // month
        let dd = d.substring(8,10);     // dat
        let h = d.substring(11,13);     // hour
        let m = d.substring(14,16);     // minute
        return dd +'/'+ mo +'/'+ yy +' '+ h +':'+ m;
    }



    /** When user ckicks button
     * -------------------------------------------------------------------------
     */


    /** on(click, .edit-btn)
     * --- -- -- - - -
     * We need to attach the event handler to some element
     * higher up in the DOM tree that will remain present;
     * so the handled attached on #dt-posts
     * 
     * get post-id ; load editpost
    */
    $('#dt-posts').on('click', 'button.js-edit', function (e) {

        var id = $(this).data('id');
        window.location.href = '/wiki/admin?action=editpost&id=' + id

    });


    $('#dt-posts').on('click', 'button.js-copy', function (e) {
        var postUrl = pageUrl.origin +'/wiki/post?id=' + $(this).data('id');
        
        navigator.clipboard
        .writeText(postUrl)
        .then(() => {
            $(this).addClass('copied');
            setTimeout( () => { $(this).removeClass('copied'); }, 700);
        })
        .catch(() => {
            console.log("error on coping text");
        });
    });


});