Ext.namespace('Zarafa.whatsnew.ui');

/**
 * @class Zarafa.whatsnew.ui.WhatsNewWindow
 * @extends Ext.Window
 *
 * The WhatsNewWindow is a dialog that shows new features in the latest version of the WebApp and the enabled
 * plugins. Features will be shown once, and the user has the option to turn off the showing of the dialog.
 */
Zarafa.whatsnew.ui.WhatsNewWindow = Ext.extend(Ext.Window, {
	/**
	 * @cfg {Object[]} features Array of objects describing the latest features of the WebApp version
	 * and of the installed plugins. Objects could have the following properties:<br>
	 * <ul>
	 * 		<li>title: String (mandatory)</li>
	 * 		<li>description: String (mandatory)</li>
	 * 		<li>image_url: String (mandatory)</li>
	 * 		<li>icon_url: String (optional)</li>
	 * </ul>
	 */
	features : [],

	/**
	 * The index of the feature item that is shown in the WhatsNewWindow.
	 * @property
	 * @type Number
	 */
	activeItem: 0,

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

		if ( Array.isArray(config.features) ) {
			this.features = config.features;
		}

		Ext.apply(config, {
			modal: true,
			id: 'k-whatsnew-window',
			width: 650,
			height: 397,
			resizable: false,
			title: _("What's new"),
			layout: 'vbox',
			layoutConfig: {
				align: 'stretch'
			},
			tools: [{
				id: 'close',
				handler: this.onSkip,
				scope: this
			}],
			bbar: this.createBottomBar(),
			items: [
				this.createFeaturePanels(),
				this.createNavigationPanel()
			]
		});

		Zarafa.whatsnew.ui.WhatsNewWindow.superclass.constructor.call(this, config);
	},

	/**
	 * Creates the components that should be shown in the bottom bar of the window
	 * @return {Array} Configuration objects for the components in the bottom bar
	 * @private
	 */
	createBottomBar : function()
	{
		return [{
			xtype: 'checkbox',
			boxLabel: _("Don't show me new features again."),
			ctCls: 'k-whatsnew-checkbox',
			ref: '../dontShowCheckbox'
		},
		'->',
		{
			cls: 'zarafa-normal',
			id: 'k-whatsnew-skip',
			text: _('Skip'),
			handler: this.onSkip,
			scope: this
		}];
	},

	/**
	 * Event handler for the click event of the 'skip' button in the bottom bar of the window.
	 * Will check if the user checked the "Don't show again" checkbox and adjust the "show" setting
	 * of the plugin accordingly before closing the window.
	 * @param {Ext.Button} btn The skip button
	 * @private
	 */
	onSkip : function(btn)
	{
		// Check the 'Don't show again' checkbox
		if ( this.dontShowCheckbox.getValue() ){
			var sm = container.getSettingsModel();
			sm.set('zarafa/v1/main/new_features_dialog/show', false);
		}

		this.close();
	},

	/**
	 * Creates the panel that contains the features descriptions. The panel uses the card layout
	 * to be able to switch between the features.
	 * @return {Object} Configuration object for the panel that contains the feature descriptions.
	 */
	createFeaturePanels : function()
	{
		var panels = this.features.map(function(feature){
			var html = '<h2 class="k-whatsnew-text-title">' +
							Ext.util.Format.htmlEncode(feature.title) +
						'</h2><div class="k-whatsnew-text-description">' +
							feature.description +
						'</p>';
			if ( !Ext.isEmpty(feature.icon_url) ){
				html = '<img class="k-whatsnew-feature-icon" src="'+feature.icon_url+'">' + html;
			}

			return {
				layout: 'column',
				items: [{
					xtype: 'container',
					cls: 'k-whatsnew-feature-text',
					width: 216,
					autoScroll: true,
					height: 287,
					html : html
				}, {
					xtype: 'container',
					cls: 'k-whatsnew-feature-image',
					width: 432,
					height: 287,
					html: '<img src="'+feature.image_url+'">'
				}]
			};
		});

		return {
			xtype: 'container',
			ref: 'featureContainer',
			layout: 'card',
			activeItem: 0,
			autoHeight: true,
			defaults: {
				border: false
			},
			items: panels
		};
	},

	/**
	 * Creates the toolbar with the navigational buttons.
	 * @return {Object} Configuration object for the navigational toolbar.
	 */
	createNavigationPanel : function()
	{
		var buttons = [{
			xtype: 'zarafa.toolbarbutton',
			iconCls: 'arrow_left_l',
			id: 'k-whatsnew-prev',
			tooltip: _('Previous'),
			disabled: this.features.length>1 ? false : true,
			handler: this.onNavigate.createDelegate(this, [-1])
		}, {
			xtype: 'tbtext',
			ref: '../featureNumber',
			cls: 'k-whatsnew-feature-number',
			text: '1/' + this.features.length
		}, {
			xtype: 'zarafa.toolbarbutton',
			id: ' k-whatsnew-next',
			iconCls: 'arrow_right_l',
			tooltip: _('Next'),
			disabled: this.features.length>1 ? false : true,
			handler: this.onNavigate.createDelegate(this, [1])
		}];

		return {
			xtype: 'toolbar',
			cls: 'k-whatsnew-navbar',
			buttonAlign: 'center',
			items: buttons
		};
	},

	/**
	 * Event handler for the click event of the 'previous' and 'next' button that
	 * are used to navigate through the features.
	 * @param {Number} dir Equals +1 or -1 to denote forward or backward navigation respectively
	 */
	onNavigate : function(dir)
	{
		this.activeItem += dir;
		if ( this.activeItem >= this.features.length ){
			this.activeItem = 0;
		} else if ( this.activeItem < 0 ){
			this.activeItem = this.features.length-1;
		}

		this.featureContainer.layout.setActiveItem(this.activeItem);

		// Update the counter in the navigation toolbar of the window
		this.featureNumber.setText((this.activeItem+1) + '/' + this.features.length);
	}
});
