//TOOLS
import DataUtils, {
    REQUEST_TYPE_GET,
    REQUEST_TYPE_PUT,
    REQUEST_TYPE_POST,
    REQUEST_TYPE_DELETE,
    CONTENT_TYPE_JSON,
    CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
import BlogPost from '../tasks/BlogPost.jsx';
class DisplayAdminBlog {
    //--------------------------
    // constructor
    //--------------------------
    constructor() {
        reframe('iframe');
        this.uploadFiles;
        this.start();
    }
    //--------------------------
    // methods
    //--------------------------
    start() {
        new Animate().object({
            targets: document.getElementById('loader'),
            duration: 300,
            opacity: 0,
            easing: 'easeInOutQuad',
            complete: function() {
                document.getElementById('loader').style.display = 'none';
                document.getElementById('loader').style.visibility = 'hidden';
                new Animate().object({
                    targets: document.getElementById('header'),
                    duration: 10,
                    opacity: 1,
                    easing: 'easeInOutQuad',
                    complete: function() {
                        new TextEffects().scramble(document.getElementById('the-title'), 50, function() {

                            if (document.getElementById('the-intro'))
                                document.getElementById('the-intro').style.opacity = 1;
                            if (document.getElementById('blog-entry'))
                                document.getElementById('blog-entry').style.opacity = 1;
                            //START SEcTION
                        });
                    }
                });
            }
        });

        if (document.getElementById('featured-image-drop')) {
            console.log("HERE");
            document.getElementById('featured-image-drop').addEventListener('dragover', this.handleDragOver, false);
            document.getElementById('featured-image-drop').addEventListener('drop', this.handleDrop, false);
            document.getElementById('featured-click').addEventListener('change', this.handleClicked, false);
            document.getElementById("post-sumbit-btn").addEventListener('click', f => {
                f.preventDefault();
                let edit = false;
                if (f.target.getAttribute('data-action') == 'blog-update')
                    edit = true;
                console.log('clicked')
                new BlogPost().submitPost(edit, DisplayAdminBlog.uploadFiles).then((response) => {
                    let note = JSON.parse(response['response']['request'].response);
                    console.log(note.message);
                }).catch((err) => {
                    console.log(err)
                });
            });
        }
    }

    //--------------------------
    // event handlers
    //--------------------------
    handleDragOver(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }
    handleClicked(e) {
        e.stopPropagation();
        e.preventDefault();
        console.log("IMAGES " + e.target.files);
        DisplayAdminBlog.uploadFiles = e.target.files;
        for (var i = 0, f; f = DisplayAdminBlog.uploadFiles[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(f) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = [
                        '<img src="',
                        f.target.result,
                        '" title="',
                        escape(theFile.name),
                        '"/>'
                    ].join('');
                    //document.getElementById('featured-image-drop').insertBefore(span, null);
                    document.getElementById('featured-image-drop').innerHTML = '';
                    document.getElementById('featured-image-drop').appendChild(span);
                };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }

    }

    handleDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        DisplayBlog.uploadFiles = e.dataTransfer.files;
        //console.log(MemberArea.uploadFiles.length);
        for (var i = 0, f; f = DisplayBlog.uploadFiles[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(f) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = [
                        '<img src="',
                        f.target.result,
                        '" title="',
                        escape(theFile.name),
                        '"/>'
                    ].join('');
                    //document.getElementById('featured-image-drop').insertBefore(span, null);
                    document.getElementById('featured-image-drop').innerHTML = '';
                    document.getElementById('featured-image-drop').appendChild(span);
                };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

}
DisplayAdminBlog.uploadFiles = [];
export {
    DisplayAdminBlog as
    default
}