Ext.define("Portfolio.designer.ui.constraints.view.Manager", {
	extend: "Ext.form.Panel",
	layout: "border",
	alias: "widget.designer.ui.constraints.manager",
	config: {
		designer: null,
		entityManager: null,
		entity: null,
		grid: null,
		editor: null,
		selected: null
	},
	requires: [
		"Portfolio.designer.ui.constraints.model.Manager"
	],

	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 a_constraints = [];

		if (o_entity.constraints) {
			if (Ext.isObject(o_entity.constraints)) {
				Ext.Object.each(o_entity.constraints, function(s_key, o_value) {
					a_constraints.push({
						name: s_key,
						value: o_value
					});
				});
				o_entity.constraints = a_constraints;
			}
			else if (Ext.isArray(o_entity.constraints)) {
				a_constraints = o_entity.constraints;
			}
		}

		i_self.setEntity(o_entity);

		var a_items = [];
		var a_data = [];

		var i_store = Ext.create("Ext.data.Store", {
			model: "Portfolio.designer.ui.constraints.model.Manager"
		});

		var i_model = i_store.getModel();

		Ext.Array.each(a_constraints, function(o_constraints) {

			var i_record = i_model.create({
				name: o_constraints.name,
				properties: o_constraints.value
			});

			a_data.push(i_record);
		});

		i_store.loadData(a_data);

		var i_grid = Ext.widget("gridpanel", {
			store: i_store,
			region: "center",
			flex: 1,
			plugins: {
				ptype: "cellediting",
				clicksToEdit: 2
			},
			columns: [
				{
					dataIndex: "name",
					flex: 1,
					header: ip2.i18n({
						da: "Navn",
						en: "Name"
					}),
					editor: {
						xtype: "textfield"
					}
				}
			],
			listeners: {
				itemcontextmenu: {
					fn: function(i_view, i_record, i_item, n_index, i_event) {

						i_event.preventDefault();

						i_view.getSelectionModel().select(n_index);

						var a_coords = i_event.getXY();

						var i_menu = Ext.create("Ext.menu.Menu", {
							items: [
								{
									xtype: "button",
									text: ip2.i18n({
										da: "Slet",
										en: "Delete"
									}),
									iconCls: "pf-delete",
									handler: function() {

										var i_grid = i_self.getGrid();
										var i_editor = i_self.getEditor();

										var i_store = i_grid.getStore();
										i_store.remove(i_record);

										i_self.setSelected(null);
										i_editor.setValue(null);
									}
								}
							]
						});

						i_menu.showAt([a_coords[0], a_coords[1]]);
					}
				},
				select: {
					fn: function(i_view, i_record) {

						i_self.setSelected(i_record);
						var i_editor = i_self.getEditor();
						var value = i_record.get("properties");
						var s_value = value;
						if (Ext.isArray(value)) {
							s_value = value.join("\n");
						}
						i_editor.setValue(s_value);
					}
				}
			}
		});

		var i_plugin = i_grid.getPlugin();

		i_plugin.on({
			beforeedit: {
				fn: function() {
					return !i_self.required;
				}
			},
			edit: {
				fn: function(i_editor) {
					i_editor.context.record.commit();
				}
			}
		});

		var i_toolbar = Ext.widget("toolbar", {
			dock: "top",
			items: i_self.createButtons()
		});

		i_grid.addDocked(i_toolbar);

		var i_editor = Ext.widget("acetextarea", {
			hideLabel: true,
			name: "properties",
			itemId: "editor-properties",
			mode: "sql",
			readOnly: i_self.required
		});

		i_editor.on({
			change: {
				fn: function(i_field, value) {

					if (i_field.isValid()) {
						var i_selected = i_self.getSelected();
						if (i_selected) {
							i_selected.set("properties", value);
							i_selected.commit();
						}
					}
				}
			}
		});

		var i_east = Ext.widget("panel", {
			region: "east",
			flex: 3,
			layout: "fit",
			title: ip2.i18n({
				da: "Engenskaber",
				en: "Properties"
			}),
			items: [i_editor]
		});

		a_items.push(i_grid);
		a_items.push(i_east);

		i_self.setGrid(i_grid);
		i_self.setEditor(i_editor);

		return a_items;
	},

	createButtons: function() {

		var i_self = this;
		var a_items = [];

		var i_button = Ext.widget("button", {
			iconCls: "pf-add",
			text: ip2.i18n({
				da: "Tilføj",
				en: "Create"
			}),
			disabled: i_self.required,
			handler: function() {

				var i_grid = i_self.getGrid();
				var i_store = i_grid.getStore();
				var i_model = i_store.getModel();
				var i_record = i_model.create({
					name: "constrain-" + ip2.unique(),
					properties: ""
				});
				i_store.loadData([i_record], true);
			}
		});
		a_items.push(i_button);
		return a_items;
	},

	doSave: function(o_entity) {

		var i_self = this;
		var i_grid = i_self.getGrid();
		var i_store = i_grid.getStore();
		var a_records = i_store.getRange();

		var a_constraints = [];

		Ext.Array.each(a_records, function(i_record) {

			var value = i_record.get("properties") || "";
			var a_value = [];
			if (Ext.isArray(value)) {
				a_value = value;
			}
			else {
				if (Ext.isString(value)) {
					a_value = value.split("\n");
				}
			}
			a_constraints.push({
				name: i_record.get("name"),
				value: a_value
			});
		});

		if (a_constraints.length > 0) {
			Ext.apply(o_entity, {
				constraints: a_constraints
			});
		}
		else {
			delete o_entity.constraints;
		}
	}
});
