Ext.define("Portfolio.designer.ui.domainModelEntityRelationSelector", {
	extend: "Ext.panel.Panel",
	alias: ["widget.ip2DomainModelEntityRelationSelector"],
	requires: [
		"Ext.ux.form.MultiSelect",
		"Ext.ux.form.ItemSelector",
		"Portfolio.designer.model.domainModelEntityColumnDataModel"
	],
	layout: {
		type: "fit"
	},
	bodyPadding: 5,
	order: 0,
	config: {
		designer: null,
		between: null,
		and: null,
		required: false
	},
	initComponent: function() {

		var i_self = this;

		i_self.callParent();

		var i_betweenRelation = Ext.create("Ext.ux.form.ItemSelector", {
			fromTitle: ip2.i18n("tableFields"),
			toTitle: ip2.i18n("keyFields"),
			store: Ext.create("Ext.data.Store", {
				model: "Portfolio.designer.model.domainModelEntityColumnDataModel",
				autoLoad: false
			}),
			displayField: "title",
			valueField: "name",
			allowBlank: false,
			msgTarget: "side",
			flex: 1,
			tpl: i_self.createTemplate(),
			disabled: i_self.getRequired(),
			listeners: {
				change: {
					fn: function(i_field, value) {
						if (Ext.isArray(value)) {
							i_self.betweenListChange(value);
						}
					}
				}
			},
			multiselects: [
				{
					etInnerTpl: function() {
						return "{name} ({title})";
					}
				},
				{
					getInnerTpl: function() {
						return "{name} ({title})";
					}
				}
			]
		});

		var i_andRelation = Ext.create("Ext.ux.form.ItemSelector", {
			fromTitle: ip2.i18n("tableFields"),
			toTitle: ip2.i18n("keyFields"),
			store: Ext.create("Ext.data.Store", {
				model: "Portfolio.designer.model.domainModelEntityColumnDataModel",
				autoLoad: false
			}),
			displayField: "title",
			valueField: "name",
			allowBlank: false,
			msgTarget: "side",
			flex: 1,
			tpl: i_self.createTemplate(),
			disabled: i_self.getRequired(),
			listeners: {
				change: {
					fn: function(i_field, value) {
						if (Ext.isArray(value)) {
							i_self.andListChange(value);
						}
					}
				}
			},
			multiselects: [
				{
					getInnerTpl: function() {
						return "{name} ({title})";
					}
				},
				{
					getInnerTpl: function() {
						return "{name} ({title})";
					}
				}
			]
		});
		i_self.relationSelectorsPanel = Ext.create("Ext.panel.Panel", {
			border: 0,
			layout: {
				type: "hbox",
				align: "stretch"
			},
			defaults: {
				border: 0,
				margin: "0 0 0 5"
			},
			items: [
				i_betweenRelation,
				i_andRelation
			]
		});

		i_self.setBetween(i_betweenRelation);
		i_self.setAnd(i_andRelation);

		i_self.add(i_self.relationSelectorsPanel);
	},

	createTemplate: function() {

		var i_template = new Ext.XTemplate(
			"<tpl for=\".\">",
				"<li role=\"option\" class=\"x-boundlist-item\" style=\"text-overflow: ellipsis; white-space: nowrap; overflow:hidden;\">",
					"{[this.renderer(values.name)]} - ({[this.renderer(values.title)]})",
				"</li>",
			"</tpl>",
			{
				renderer: function(value) {

					return ip2.i18n(value);
				}
			}
		);
		return i_template;
	},

	betweenListChange: function(list) {

		// execute when "between on" fields list changed
	},
	andListChange: function(list) {
	},
	setBetweenRelation: function(name, keyColumns, a_use) {

		// execute when "and on" fields list changed

		var i_self = this;
		var i_designer = i_self.getDesigner();
		var o_model = i_designer.model;
		var a_required = o_model.required;
		var i_betweenRelation = i_self.getBetween();

		a_use = a_use || [];

		var i_store = i_betweenRelation.getStore();

		var o_entity = Ext.Array.findBy(a_required, function(o_value) {
			return o_value.name == name;
		}) || Ext.apply({
			title: "",
			columns: []
		});

		var a_columns = keyColumns || [];

		if (a_use === 0) {
			a_use = o_entity.columns;
		}

		if (o_entity.columns.length > 0) {
			a_use = o_entity.columns;
		}

		i_store.loadData(a_use);
		i_betweenRelation.bindStore(i_store, true);

		i_betweenRelation.entityName = name;

		// list fields for relations
		var i_store = i_betweenRelation.toField.boundList.getStore();
		i_store.removeAll();

		var values = [];

		if (Ext.isArray(a_columns)) {
			Ext.Array.each(a_columns, function(o_column) {
				values.push(o_column.name);
			});
		}
		var a_header = i_betweenRelation.fromField.query("header");
		if (a_header.length > 0) {
			var i_header = a_header[0];
			var s_title = ip2.i18n(o_entity.title);
			s_title = s_title + " (" + ip2.i18n({
				da: "felter",
				en: "fields"
			}) + ")";
			i_header.setTitle(s_title);
		}
		i_betweenRelation.setValue(values);
	},
	setAndRelation: function(name, keyColumns) {

		var i_self = this;
		var i_designer = i_self.getDesigner();
		var o_model = i_designer.model;
		var a_required = o_model.required;
		var i_andRelation = i_self.getAnd();

		var i_store = i_andRelation.getStore();

		var o_entity = Ext.Array.findBy(a_required, function(o_value) {
			return o_value.name == name;
		}) || Ext.apply({
			title: "",
			columns: []
		});

		i_store.loadData(o_entity.columns);

		i_andRelation.entityName = name;
		i_andRelation.bindStore(i_store, true);

		// list fields for relations
		var i_store = i_andRelation.toField.boundList.getStore();
		i_store.removeAll();

		var values = [];

		var a_columns = keyColumns || [];

		Ext.Array.each(a_columns, function(o_column) {
			values.push(o_column.name);
		});

		var a_header = i_andRelation.fromField.query("header");
		if (a_header.length > 0) {
			var i_header = a_header[0];
			var s_title = ip2.i18n(o_entity.title);
			s_title = s_title + " (" + ip2.i18n({
				da: "felter",
				en: "fields"
			}) + ")";
			i_header.setTitle(s_title);
		}
		i_andRelation.setValue(values);
	}
});
