Ext.namespace('Zarafa.core.ui.widget');

/**
 * @class Zarafa.core.ui.widget.WidgetContentPanel
 * @extends Zarafa.core.ui.ContentPanel
 *
 * ContentPanel used by the user to select which {@link Zarafa.core.ui.widget.Widget widget}
 * must be added to the {@link #widgetPanel panel}.
 */
Zarafa.core.ui.widget.WidgetContentPanel = Ext.extend(Zarafa.core.ui.ContentPanel, {
	/**
	 * @cfg {Zarafa.core.ui.widget.WidgetPanel} widgetPanel The widget panel to which
	 * the selected widget will be added.
	 */
	widgetPanel : undefined,

	/**
	 * @constructor
	 * @param {Object} config Configuration object
	 */
	constructor : function(config)
	{
		config = config || {};

		var template = new Ext.XTemplate(
			'<tpl for=".">',
				'<div class="zarafa-widget-item" id="{name}">',
					'<div class="thumb-wrap">',
						'<img src="{icon}">',
					'</div>',
					'<span>{display_name}</span>',
				'</div>',
			'</tpl>',
			'<div class="x-clear"></div>'
		);

		var data = [];
		var widgets = container.getWidgetsMetaData();
		Ext.each(widgets, function(widget) {
			data.push({ name : widget.getName(), display_name : widget.getDisplayName(), icon : widget.getIconPath() });
		}, this);
		
		var store = {
			xtype : 'jsonstore',
			fields : [ 'name', 'display_name', 'icon' ],
			data : data,
			sortInfo : {
				field : 'display_name',
				direction : 'ASC'
			}
		};

		Ext.applyIf(config, {
			layout : 'fit',
			border : false,
			width : 400,
			height : 300,
			title : _('Add widgets'),
			items : [{
				xtype : 'dataview',
				store: store,
				tpl: template,
				autoScroll : true,
				singleSelect : true,
				multiSelect : false,
				selectedClass : 'zarafa-widgets-selectedwidget',
				overClass : 'zarafa-widgets-hoverwidget',
				itemSelector : 'div.zarafa-widget-item',
				deferEmptyText: false,
				emptyText : _('No widgets installed.'),
				listeners : {
					'dblclick' : this.onWidgetDblClick,
					scope : this
				}
			}]
		});

		Zarafa.core.ui.widget.WidgetContentPanel.superclass.constructor.call(this, config);
	},

	/**
	 * Event handler which is fired when the user double clicks on a widget
	 * @param {Ext.DataView} dataview The view which fired the event
	 * @param {Number} index The selected index
	 * @param {HTMLElement} node The node which was double clicked
	 * @param {Ext.EventObject} event The event object
	 * @private
	 */
	onWidgetDblClick : function(dataview, index, node, event)
	{
		if (this.widgetPanel) {
			this.widgetPanel.createWidget(dataview.getRecord(node).get('name'));
		}
	}
});

Ext.reg('zarafa.widgetcontentpanel', Zarafa.core.ui.widget.WidgetContentPanel);