/* =========================================================
 * media-editor.js v1.0.0
 * =========================================================
 * Copyright 2013 Wpbakery
 *
 * WP 3.5 Media manager integration into Visual Composer.
 * ========================================================= */
(function ($) {
    var media = wp.media,
        Attachment = media.model.Attachment,
        Attachments = media.model.Attachments,
        Query = media.model.Query,
        l10n = i18nLocale,
        workflows = {};
    // wp.media.controller.VcSingleImage extends featuredImage controller
    // ---------------------------------
    media.controller.VcSingleImage = media.controller.FeaturedImage.extend({
        defaults:_.defaults({
            id:'vc-single-image',
            filterable:'uploaded',
            multiple:false,
            toolbar:'vc-single-image',
            title:l10n.set_image,
            priority:60,
            syncSelection:false
        }, media.controller.Library.prototype.defaults),
        updateSelection:function () {
            var selection = this.get('selection'),
                id = media.VcSingleImage.getData(),
                attachment;
            if ('' !== id && -1 !== id) {
                attachment = Attachment.get(id);
                attachment.fetch();
            }
            selection.reset(attachment ? [ attachment ] : []);
        }
    });
    media.controller.VcGallery = media.controller.VcSingleImage.extend({
        defaults:_.defaults({
            id:'vc-gallery',
            title:l10n.add_images,
            toolbar:'main-insert',
            filterable:'uploaded',
            library:media.query({type:'image'}),
            multiple:'add',
            editable:true,
            priority:60,
            syncSelection:false
        }, media.controller.Library.prototype.defaults),
        updateSelection:function () {
            var selection = this.get('selection'),
                ids = media.vc_editor.getData(),
                attachments;
            if ('' !== ids && -1 !== ids) {
                attachments = _.map(ids.split(/,/), function (id) {
                    return Attachment.get(id);
                });
            }
            selection.reset(attachments);
        }
    });

    media.VcSingleImage = {
        getData:function () {
            return this.$hidden_ids.val();
        },
        set:function (selection) {

            this.$img_ul.html(_.template($('#vc-settings-image-block').html(), selection.attributes));

            this.$clear_button.show();

            this.$hidden_ids.val(selection.get('id'));
            return false;
        },
        frame:function (element) {
            this.element = element;

            this.$button = $(this.element);
            this.$block = this.$button.closest('.edit_form_line');
            this.$hidden_ids = this.$block.find('.gallery_widget_attached_images_ids');
            this.$img_ul = this.$block.find('.gallery_widget_attached_images_list');
            this.$clear_button = this.$img_ul.next();

            // TODO: Refactor this all params as template

            if (this._frame)
                return this._frame;
            this._frame = wp.media({
                state:'vc-single-image',
                states:[ new wp.media.controller.VcSingleImage() ]
            });
            this._frame.on('toolbar:create:vc-single-image', function (toolbar) {
                this.createSelectToolbar(toolbar, {
                    text:l10n.set_image
                });
            }, this._frame);

            this._frame.state('vc-single-image').on('select', this.select);
            return this._frame;
        },
        select:function () {
            var selection = this.get('selection').single();
            wp.media.VcSingleImage.set(selection ? selection : -1);
        }
    };

    media.view.MediaFrame.VcGallery = media.view.MediaFrame.Post.extend({
        // Define insert-vc state.
        createStates:function () {
            var options = this.options;

            // Add the default states.
            this.states.add([
                // Main states.
                new media.controller.VcGallery()
            ]);
        },
        // Removing let menu from manager
        bindHandlers:function () {
            media.view.MediaFrame.Select.prototype.bindHandlers.apply(this, arguments);
            this.on('toolbar:create:main-insert', this.createToolbar, this);

            var handlers = {
                content:{
                    'embed':'embedContent',
                    'edit-selection':'editSelectionContent'
                },
                toolbar:{
                    'main-insert':'mainInsertToolbar'
                }
            };

            _.each(handlers, function (regionHandlers, region) {
                _.each(regionHandlers, function (callback, handler) {
                    this.on(region + ':render:' + handler, this[ callback ], this);
                }, this);
            }, this);
        },
        // Changing main button title
        mainInsertToolbar:function (view) {
            var controller = this;

            this.selectionStatusToolbar(view);

            view.set('insert', {
                style:'primary',
                priority:80,
                text:l10n.add_images,
                requires:{ selection:true },

                click:function () {
                    var state = controller.state(),
                        selection = state.get('selection');

                    controller.close();
                    state.trigger('insert', selection).reset();
                }
            });
        }
    });
    media.vc_editor = _.clone(media.editor);
    _.extend(media.vc_editor, {
        $vc_editor_element:null,
        getData:function () {
            var $button = wp.media.vc_editor.$vc_editor_element,
                $block = $button.closest('.edit_form_line'),
                $hidden_ids = $block.find('.gallery_widget_attached_images_ids');
            return $hidden_ids.val();
        },
        insert:function (images) {
            var $button = wp.media.vc_editor.$vc_editor_element,
                $block = $button.closest('.edit_form_line'),
                $hidden_ids = $block.find('.gallery_widget_attached_images_ids'),
                $img_ul = $block.find('.gallery_widget_attached_images_list'),
                $clear_button = $img_ul.next(),
                $thumbnails_string = '';

            _.each(images, function (image) {
                $thumbnails_string += _.template($('#vc-settings-image-block').html(), image);
            });
            $hidden_ids.val(_.map(images,function (image) {
                return image.id;
            }).join(','));
            $img_ul.html($thumbnails_string);
        },
        open:function (id) {
            var workflow, editor;

            id = this.id(id);

            workflow = this.get(id);

            // Initialize the editor's workflow if we haven't yet.
            if (!workflow)
                workflow = this.add(id);

            return workflow.open();
        },
        add:function (id, options) {
            var workflow = this.get(id);
            if (workflow)
                return workflow;

            workflow = workflows[ id ] = new media.view.MediaFrame.VcGallery(_.defaults(options || {}, {
                state:'vc-gallery',
                title:l10n.add_images,
                library:{ type:'image' },
                multiple:true
            }));
            workflow.on('insert', function (selection) {
                var state = workflow.state(),
                    data = [];

                selection = selection || state.get('selection');
                if (!selection)
                    return;

                this.insert(_.map(selection.models, function (model) {
                    return model.attributes;
                }));
            }, this);
            return workflow;
        },
        init:function () {
            $('body').unbind('click.vcGalleryWidget').on('click.vcGalleryWidget', '.gallery_widget_add_images', function (event) {
                var $this = $(this),
                    editor = 'visual-composer';
                wp.media.vc_editor.$vc_editor_element = $(this);
                if ($this.attr('use-single') === 'true') {
                    wp.media.VcSingleImage.frame(this).open('vc-editor');
                    return;
                }
                event.preventDefault();
                $this.blur();
                wp.media.vc_editor.open(editor);
            });
        }
    });
    _.bindAll(media.vc_editor, 'open');
    $(document).ready(function () {
        media.vc_editor.init();
    });
}(jQuery));