/*
 *  Copyright 2014 Anyware Services
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

/**
 * This class display a dialog box to choose an attribute within a defined list
 * @private
 */
Ext.define('Ametys.plugins.cms.relations.setcontentattributerelationhandler.ChooseAttribute', {
	singleton: true,
	
	/**
	 * @property {Ametys.window.DialogBox} _box The dialog box
	 * @private
	 */
	/**
	 * @property {Function} _callback The current callback set in the last #display call
	 * @private
	 */
	/**
	 * @property {String} _attributePath The current selected attribute path
	 * @private
	 */	
	/**
	 * Display a dialog box with a list of attributes. When the dialog box is closed the callback is called
	 * @param {Object[]} attributes The attributes to display
	 * @param {String} attribute.path The path of the attribute (such as composite/attributename)
	 * @param {String} attribute.name The name of the attribute (such as attributename)
	 * @param {String} attribute.label The readable label of the attribute
	 * @param {String} attribute.description The readable descriptionof the attribute
	 * @param {Object} attribute.parent The same object of the current attribute (when appliable). This allow to have a full label for the attribute
	 * @param {Function} callback The function called when the choice is over.
	 * @param {String} callback.return The path of the attribute chosen or null if no choice was made
	 */
	display: function(attributes, callback)
	{
		var me = this;
		
		this._callback = callback;
		this._attributePath = null;
		
		var dialog = this._getEmptyDialog();
		
		for (var i = 0; i < attributes.length; i++)
		{
			var attribute = attributes[i];
			
			var attributeLabel = "";
			var attributeDescription = "";
			while (attribute)
			{
				attributeLabel = attribute.label + (attributeLabel != "" ? (" > " + attributeLabel) : "");
				attributeDescription = (attributeDescription != "" ? (attributeDescription + "<br/>") : "") + "<strong>" + attribute.label + "</strong> :" + attribute.description;
				attribute = attribute.parent;
			}
			
			dialog.items.get(1).items.get(0).add(Ext.create("Ext.form.field.Radio", {
				boxLabel: attributeLabel,
				boxLabelAttrTpl: 'style="width: 330px"',
				width: 370,
				ametysDescription: attributeDescription,
				inputValue: attributes[i].path,
				name: 'metadata',
				listeners: {
					'change': function(checkbox, newValue, oldValue, eOpts)
                    {
                        if (newValue === true)
                        {
                            me._box.dockedItems.items[1].items.get(0).enable();
                            me._attributePath = this.inputValue;
                        }
					}
				}
			}));
		}
		
		dialog.defaultFocus = dialog.items.get(1).items.get(0).items.get(0);
		dialog.show();
	},

	/**
	 * Create or get the dialog box (with nothing inside)
	 * @return {Ametys.window.DialogBox} The "empty" dialog box
	 */
	_getEmptyDialog: function()
	{
		if (this._box == null)
		{
			this._box = Ext.create('Ametys.window.DialogBox', {
				title: "{{i18n PLUGINS_CMS_RELATIONS_SETCONTENTATTRIBUTE_REFERENCE_CHOOSE_ATTRIBUTE_DIALOG_TITLE}}",
				iconCls: 'ametysicon-document28 decorator-ametysicon-link23',

				width: 470,
				maxHeight: 450,
				layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
				
				items: [ 
		                {
		                    xtype: 'component',
		                    html: "{{i18n PLUGINS_CMS_RELATIONS_SETCONTENTATTRIBUTE_REFERENCE_CHOOSE_ATTRIBUTE_DIALOG_TEXT}}",
		                    cls: 'a-text',
		                    padding: '5'
		                },
                        {
                            xtype: 'container',
                            scrollable: true,
                            flex: 1,
                            items: {
                                margin: '5 0 0 30', 
                                xtype: 'container',
                                defaults: { width: '100%' } 
                            }
                        }
				],
				        
		        closeAction: 'hide',
		        defaultFocus: 'ok',
		        
		        buttons : [{
		        	itemId: 'ok',
		        	text: "{{i18n PLUGINS_CMS_RELATIONS_SETCONTENTATTRIBUTE_REFERENCE_CHOOSE_ATTRIBUTE_DIALOG_OK}}",
		        	handler: Ext.bind(this._ok, this)
		        }, {
		        	text: "{{i18n PLUGINS_CMS_RELATIONS_SETCONTENTATTRIBUTE_REFERENCE_CHOOSE_ATTRIBUTE_DIALOG_CANCEL}}",
		        	handler: Ext.bind(this._cancel, this)
		        }]
			});
		}
		
		this._box.items.get(1).items.get(0).removeAll();
		this._box.dockedItems.items[0].items.get(0).disable();
		
		return this._box;
	},
	
	/**
	 * @private
	 * The OK button handler
	 */
	_ok: function()
	{
		this._box.close();
		this._callback(this._attributePath);
	},

	/**
	 * @private
	 * The CANCEL button handler
	 */
	_cancel: function()
	{
		this._box.close();
		this._callback(null);
	}

});