/*jslint nomen: true*/
/*globals define*/


/**
 * @class de_epages.presentation.tray.contentselectedview
 * @author Copyright 2006-2013, epages GmbH, All Rights Reserved
 *
 * The tray's content selected view displays all elements which are selected in the dialog
 *
 * ### Example
 * HTML:
 *     <div class="container"></div>
 *
 * JavaScript:
 *     var view = new ContentSelectedView();
 *     view.render().$el.appendTo('.container');
 *
 * @uses jQuery.ui.accordion
 * @uses Backbone
 *
 * @return {Object} ContentSelectedView
 */

define('de_epages/presentation/tray/selected-view', [
    'jquery/ui/accordion',
    'backbone',
    'underscore',
    '$tmpl!./selected-view',
    '$dict!../dictionary',

    'ep/ui/input'
], function ($, Backbone, _, template, dict) {
    'use strict';

    // used to write the type with the correct language tag to the model
    var translationMap = {
        'products': 'Products',
        'categories': 'Categories',
        'shippingMethods': 'ShippingMethods',
        'paymentMethods': 'PaymentMethods',
        'customers': 'Customers',
        'users': 'Users'
    };

    return Backbone.View.extend({
        tagname: 'div',
        template: template,
        className: 'Content',

        events: {
            'change input': '_publishRememberSelection'
        },

        /**
         * Render template and display all selected objects
         *
         * @since 6.17.0
         * @chainable
         * @return {Object} ContentSelectedView
         */
        render: function () {
            var self = this,
                groupedData = [],
                has_dataAvailable = false,
                renderedTemplate = '';

            // Group selected elements by type
            groupedData = self.collection.groupBy(function (model) {
                // returns e.g.
                // dict.translate("Products")
                return dict.translate(translationMap[model.get('type')]);
            });

            // Check if our grouped data contains at least one property
            has_dataAvailable = _.keys(groupedData).length > 0 ? true : false;

            renderedTemplate = self.template({
                data: groupedData,
                show_rememberSelection: has_dataAvailable
            }).dictParse(dict, true);

            $.extend(self, $.tmplItem(renderedTemplate).elements);
            self.$el.html(renderedTemplate.children());

            if (has_dataAvailable) {
                self.rememberSelection.uiInput();
            }

            self.$('.accordion-container').accordion({
                heightStyle: "content",
                collapsible: true
            });

            self.$('.ico_s_delete').on('click', $.proxy(self.removeItem, self));

            return self;
        },

        /**
         * Removes an item from the collection and re-renders the view
         *
         * @since 6.17.0
         * @param  {Event} event onClick ebent that is fired
         */
        removeItem: function (event) {
            var self = this,
                id = $(event.target).data('id'),
                rememberSelection = self.rememberSelection.prop('checked') ? true : false;

            self.collection.remove(self.collection.findWhere({
                'ObjectID': id
            }));

            self.render();

            if (rememberSelection) {
                self.rememberSelection.prop('checked', true);
            }
        },

        /*
         * [ description]
         *
         * @since 6.17.0
         * @param  {Event} event    fired whenever thecorresponding checkbox is clicked
         */
        _publishRememberSelection: function (event) {
            this.trigger('rememberSelectionChanged', $(event.target).prop('checked'));
        }
    });
});