Ext.define("Portfolio.designer.ui.views.grid.column.Manager", {
	extend: "Ext.window.Window",
	layout: "fit",
	alias: "widget.designer.ui.views.grid.column.manager",

	config: {
		entity: null,
		column: null,
		required: false,
		editor: null,
		example: null,
		documentation: null,
		template: null
	},

	initComponent: function() {

		var i_self = this;
		i_self.callParent(arguments);
		i_self.add(i_self.createLayout());

		return i_self;
	},

	createLayout: function() {

		var i_self = this;
		var o_entity = i_self.getEntity();

		var o_column = Ext.apply({}, i_self.getColumn() || {
			name: "",
			title: {
				da: "",
				en: ""
			},
			flex: 1,
			isTitle: false,
			showned: true,
			entity: o_entity.name
		});

		var i_editor = Ext.widget("acetextarea", {
			xtype: "acetextarea",
			hideLabel: true,
			name: "properties",
			itemId: "editor-properties",
			mode: "json",
			readOnly: i_self.required,
			asJson: true,
			region: "center",
			flex: 1
		});

		var i_form = Ext.widget("form", {
			layout: "border",
			buttons: [
				{
					xtype: "button",
					text: "Ok",
					disabled: i_self.required,
					handler: function(i_button) {

						var i_editor = i_self.getEditor();

						var o_column = i_editor.getValue();
						var o_old = i_self.getColumn() || {};

						Ext.apply(o_column, {
							header: ip2.i18n(o_column.title),
							dataIndex: o_old.dataIndex || o_entity.name + "_" + o_column.name,
							hidden: o_old.hidden || false,
							entity: o_old.entity || o_entity.name,
							dataOnly: o_old.dataOnly !== undefined ? o_old.dataOnly : o_old.hide ? o_old.hide : false,
							from: o_old.from,
							headerText: ip2.i18n(o_column.title),
							usingDefaultRenderer: o_old.usingDefaultRenderer
						});

						var o_config = Ext.clone(o_column);

						Ext.apply(o_column, {
							renderer: o_old.renderer || function(value) {
								return value;
							}
						});

						o_column.columnConfig = o_config;

						i_self.fireEvent("edit", i_self, o_column);

						i_self.close();
					}
				},
				{
					xtype: "button",
					text: ip2.i18n({
						da: "Annuller",
						en: "Cancel"
					}),
					disabled: i_self.required,
					handler: function(i_button) {
						i_self.close();
					}
				}
			]
		});

		if (!o_column.hasOwnProperty("title") || !o_column.title) {
			o_column.title = o_column.header;
		}

		if (o_column.hasOwnProperty("from")) {
			if (Ext.String.startsWith(o_column.from, "(") && Ext.String.endsWith(o_column.from, ")")) {
				Ext.applyIf(o_column, {
					from: o_column.from
				});
			}
		}

		delete o_column.dataIndex;
		delete o_column.header;
		delete o_column.from;
		delete o_column.hidden;
		delete o_column.entity;
		delete o_column.draggable;
		delete o_column.hide;
		delete o_column.dataOnly;
		delete o_column.menuDisabled;
		delete o_column.headerText;
		delete o_column.usingDefaultRenderer;

		o_column = Ext.apply({}, o_column);

		i_editor.suspendCheckChange++;
		i_editor.setValue(o_column);
		i_editor.suspendCheckChange--;

		var i_exampleEditor = Ext.widget("acetextarea", {
			hideLabel: true,
			mode: "json",
			asJson: true,
			useWorker: false,
			readOnly: true,
			flex: 1,
			split: true
		});

		var i_documentation = Ext.widget("panel", {
			title: "Documentation",
			flex: 1,
			region: "south",
			layout: "anchor",
			bodyPadding: 10,
			autoScroll: true,
			split: true
		});

		var i_snippets = Ext.widget("panel", {
			title: "Snippets",
			region: "east",
			layout: {
				type: "vbox",
				align: "stretch"
			},
			flex: 1,
			split: true,
			items: [
				i_self.createGrid(),
				i_exampleEditor,
				i_documentation
			]
		});

		i_form.add([i_editor, i_snippets]);

		i_self.setEditor(i_editor);
		i_self.setExample(i_exampleEditor);
		i_self.setDocumentation(i_documentation);
		i_self.createTemplate();

		return i_form;
	},

	doSave: function() {

		var i_self = this;
	},

	createGrid: function() {

		var i_self = this;

		var a_columns = [{
			dataIndex: "property",
			flex: 1
		}];

		var a_fields = [
			{
				name: "property",
				type: "auto"
			},
			{
				name: "type",
				type: "auto"
			}
		];

		var i_store = Ext.create("Ext.data.Store", {
			fields: a_fields,
			grouper: {
				property: 'type',
				groupFn: function (i_record) {
					return i_record.get("type");
				}
			}
		});

		var i_grid = Ext.widget("gridpanel", {
			hideHeaders: true,
			enableColumnMove: false,
			enableColumnHide: false,
			enableColumnResize: false,
			columns: a_columns,
			store: i_store,
			flex: 1,
			features: [{
				ftype: "grouping",
				groupHeaderTpl: "{name}",
				hideGroupedHeader: true,
				enableGroupingMenu: false,
				startCollapsed: true
			}],
			listeners: {
				select: {
					fn: function(i_view, i_record) {

						var o_value = i_record.get("data") || {};
						var o_documentation = i_record.get("documentation") || {};

						var i_example = i_self.getExample();
						var i_documentation = i_self.getDocumentation();
						var i_template = i_self.getTemplate();

						i_example.setValue(o_value);

						var a_documentaion = [];

						Ext.Object.each(o_documentation, function(s_key, o_value) {

							var o_record = {
								property: s_key,
								text: o_value.text,
								type: o_value.type
							};

							a_documentaion.push(o_record);
						});

						var s_text = i_template.apply(a_documentaion);

						i_documentation.update(s_text);
					}
				}
			}
		});

		var o_snippets = ip2.getEvaled("/portfolio/app/designer/ui/views/grid/column/snippets.json");

		var a_data = [];

		Ext.Object.each(o_snippets, function(s_key, o_value) {

			var o_record = {
				property: ip2.i18n(o_value.title),
				data: o_value.config,
				documentation: o_value.documentation,
				type: o_value.type
			};

			a_data.push(o_record);

			i_store.loadRawData(a_data);
		});

		return i_grid;
	},

	createTemplate: function() {

		var i_self = this;

		var i_template = new Ext.XTemplate(
			"<tpl for=\".\">",
				"<div>",
					"<span><strong>Property: {property}</strong></span><br>",
					"<span>Type: {type}</span><br>",
					"<span>---------------------</span></br>",
					"<span><i><code>{[this.getText(values.text)]}</code></i></span>",
				"</div></br>",
			"</tpl>",
			{
				getText: function(value) {
					return ip2.i18n(value);
				}
			}
		);

		i_template.compile();

		i_self.setTemplate(i_template);

		return i_template;
	}
});
