Ext.define("Portfolio.dynapp.ui.column.Editor", {
	extend: "Ext.window.Window",
	alias: "widget.dynapp.ui.column.editor",

	layout: "fit",

	viewModel: {
		type: "dynapp.columnproperties"
	},

	controller: "dynapp.column.properties",

	position: "last",
	dataIndex: "",
	meta: null,
	plugin: null,

	alternateClassName: [
		"Ext.dynapp.ui.column.Editor"
	],

	requires: [
		"Portfolio.dynapp.controller.column.Properties",
		"Portfolio.dynapp.viewmodel.ColumnProperties",
		"Portfolio.dynapp.ui.column.Properties"
	],

	initComponent: function() {

		var i_self = this;
		i_self.callParent();
		i_self.on({
			afterrender: {
				fn: function(item) {
					Ext.Ajax.request({
						url: "/portfolio/app/designer/designer.json",
						success: function(response) {
							var o_designer = {};
							eval("o_designer =" + response.responseText);
							i_self.add(i_self.createLayout(o_designer));
						}
					});
				}
			}
		});
		if (!i_self.meta) {
			var o_meta = {
				properties: {
					plugin: ""
				}
			};
			i_self.meta = o_meta;
		}
		var i_viewModel = i_self.getViewModel();
		i_viewModel.setData({
			grid: i_self.grid
		});

		return i_self;
	},

	createLayout: function(o_designer) {

		var i_self = this;
		var o_meta = i_self.meta;
		var o_properties = o_meta.properties;
		var i_properties = Ext.widget("dynapp.ui.column.properties", {
			title: ip2.i18n({
				da: "Egenskaber",
				en: "Properties"
			}),
			types: o_designer.types,
			generic: o_designer.generic,
			meta: i_self.meta,
			options: i_self.options
		});

		var i_tabpanel = Ext.widget("tabpanel", {
			layout: "fit"
		});

		var i_form = Ext.widget("form", {
			layout: "fit",
			trackResetOnLoad: true,
			autoScroll: true,
			defaults: {
				anchor: "100%"
			},
			items: [i_tabpanel],
			buttons: i_self.createButtons()
		});

		var i_pnlPlugin = Ext.widget("panel", {
			title: ip2.i18n({
				da: "Plugin",
				en: "Plugin"
			}),
			layout: "fit",
			listeners: {
				activate: {
					fn: function(item) {

						var i_editor = item.down("#editor-plugin");
						if (i_editor && i_editor.getEditor()) {
							i_editor.getEditor().focus(false, 100);
						}
						else {
							i_editor.on({
								editorready: {
									fn: function(item) {
										setTimeout(function() {
											i_editor.getEditor().focus(false, 100);
										}, 100);
									}
								},
								single: true
							});
						}
					}
				}
			},
			items: [
				{
					xtype: "acetextarea",
					hideLabel: true,
					name: "plugin",
					anchor: "100%",
					value: o_properties.plugin,
					itemId: "editor-plugin",
					mode: "javascript",
					validator: function(value) {

						var s_return = true;
						if (value) {
							var i_regexNewLine = new RegExp("\r?\n|\r", "g");
							var i_regexTab = new RegExp("\t", "g");
							var s_sanitized = value.replace(i_regexNewLine, "");
							s_sanitized = s_sanitized.replace(i_regexTab, "");
							var b_valid = Ext.decode(s_sanitized, true);
							if (!b_valid) {
								s_return = "This needs to be valid json";
							}
						}

						return s_return;
					}
				}
			]
		});

		i_tabpanel.add(i_properties);
		i_tabpanel.add(i_pnlPlugin);
		i_tabpanel.setActiveTab(0);

		return i_form;
	},

	getValue: function() {

		var i_self = this;
		var i_properties = i_self.down("propertygrid");
		var i_acetextarea = i_self.down("acetextarea");
		var o_properties = i_properties.properties || {};
		var s_plugin = i_acetextarea.getValue();
		o_values = {
			properties: o_properties,
			plugin: s_plugin,
			position: i_self.position,
			dataIndex: i_self.dataIndex
		};
		return o_values;
	},

	createButtons: function() {

		var a_buttons = [
			{
				xtype: "button",
				text: "Save",
				itemId: "btn-save",
				handler: "onSave",
				disabled: false
			},
			{
				xtype: "button",
				text: "Close",
				itemId: "btn-close",
				handler: "onClose"
			}
		];

		return a_buttons;
	}
});
