Ext.define("Portfolio.ux.form.field.i18n.hook.TextField", {

	extend: "Ext.form.field.Text",

	xtype: "portfolio-i18n-hook-textfield",

	alternateClassName: [
		"Ext.ux.form.field.i18n.hook.TextField",
		"Ext.ux.form.field.i18nHook.Text"
	],

	alias: [
		"widget.i18n-hook-textfield",
		"widget.i18nhooktextfield"
	],

	triggers: {
		"type": {
			cls: "",
			handler: function () {

				var i_self = this;

				var i_trigger = i_self.getTrigger("type");
				var i_menu = i_self.getSelections();

				i_menu.show();
				i_menu.alignTo(i_trigger.getEl(), "tr-tr");
				i_menu.toFront();
			}
		}
	},

	listeners: {
		afterrender: {
			fn: function (i_field) {

				var i_self = this;
				var b_active = i_self.getLanguageActive();

				i_self.updateLanguageActive(b_active);

			}
		},
		writeablechange: {
			fn: function (i_field, b_readOnly) {

				var i_self = this;

				var i_trigger = i_self.getTrigger("type");

				if (i_trigger.rendered) {
					i_trigger[b_readOnly ? "hide" : "show"]();
				}
			},
			buffer: 10
		},
		enable: {
			fn: function (i_field) {

				var i_self = this;

				var i_trigger = i_self.getTrigger("type");

				if (i_trigger.rendered) {
					i_trigger.show();
				}
			},
			buffer: 10
		},
		disable: {
			fn: function (i_field) {

				var i_self = this;

				var i_trigger = i_self.getTrigger("type");

				if (i_trigger.rendered) {
					i_trigger.hide();
				}
			},
			buffer: 10
		}
	},

	config: {
		languageActive: false,
		language: "en",
		primary: "en",
		languages: [],
		stored: {},
		selections: null,
		asString: false,
		defaultProperty: "",
		propertyHost: null,
		langContext: "portfolio"
	},

	initComponent: function() {

		var i_self = this;

		var a_currrent = wsh.getLanguages(i_self.getLangContext());
		
		i_self.setLanguages(a_currrent);

		var s_current = ip2.getUser().get("USRLNG") || "en";

		if (!i_self.getPropertyHost()) {
			i_self.setPropertyHost(i_self.name + "_CARRIER");
		}

		i_self.setLanguage(s_current);
		i_self.setPrimary(s_current);

		i_self.callParent(arguments);

		i_self.createMenu();
	},

	initValue: function() {

		var i_self = this;
		var value = i_self.value || "";
		var s_current = i_self.getLanguage();
		var a_languages = i_self.getLanguages();

		var o_stored = i_self.getStored() || {};

		var o_meta = {
			key: {},
			defaultProperty: i_self.getDefaultProperty(),
			active: 0
		};

		o_meta.key[i_self.name] = 0;

		var o_value = Ext.decode(value, true) || {
			meta: o_meta,
			text: {},
			"default": value
		};

		if (!Ext.isObject(o_value)) {

			o_value = {
				meta: o_meta,
				text: {},
				"default": ""
			};
		}
		else {

			Ext.apply(o_meta, o_value.meta);
		}

		var s_raw = o_value["default"];

		var b_active = o_meta.active;

		o_stored = Ext.clone(o_value.text);

		if (b_active) {
			s_raw = o_stored[s_current];
		}
		else {
			o_stored[s_current] = s_raw;
		}

		i_self.setValue(s_raw);

		i_self.originalValue = i_self.lastValue = i_self.value = Ext.clone(o_value);
		i_self.resetOriginalValue();

		Ext.Array.each(a_languages, function(s_key) {
			var s_value	= o_stored[s_key] || "";
			o_stored[s_key] = s_value;
		});

		i_self.setStored(o_stored);

		if (b_active) {
			i_self.setLanguageActive(true);
		}
	},

	updateLanguageActive: function(b_active) {

		var i_self = this;
		var i_typeTrigger = i_self.getTrigger("type");

		var s_current = i_self.getLanguage();
		var s_primary = i_self.getPrimary();

		if (i_typeTrigger) {
			if (i_typeTrigger.rendered) {
				var i_element = i_typeTrigger.getEl();
				if (b_active) {
					i_element.removeCls("pf-earth2");
					i_element.addCls("icon trigger flag " + s_current);
				}
				else {
					i_element.removeCls("icon trigger flag " + s_current);
					i_element.addCls("pf-earth2");
				}
			}
			else {
				if (b_active) {
					i_typeTrigger.cls = " icon trigger flag " + s_current;
				}
			}
		}

		if (!b_active) {
			i_self.setLanguage(s_primary);
		}


		var o_stored = i_self.getStored();
		var o_value = i_self.value || {};

		var s_value;

		if (!b_active) {

			s_value = o_value["default"];
			i_self.setValue(s_value);
		}
		else {

			o_value["default"] = i_self.getRawValue();

			o_stored.en = o_stored.en || o_value["default"];

			s_value = o_stored[s_current];
			i_self.setValue(s_value);
		}

		if (i_self.rendered) {
			i_self.checkChange();
		}
	},

	createMenu: function() {

		var i_self = this;

		var a_items = [];

		var i_typeTrigger = i_self.getTrigger("type");

		var a_languages = i_self.getLanguages();

		Ext.Array.each(a_languages, function (s_key) {

			var i_menuItem = Ext.widget("menuitem", {
				itemId: s_key,
				text: s_key,
				iconCls: "icon flag " + s_key,
				handler: function (i_item) {

					var i_element = i_typeTrigger.getEl();
					var b_active = i_self.getLanguageActive();
					var s_current = i_self.getLanguage();

					i_element.removeCls("icon flag " + s_current);

					i_self.setLanguage(i_item.itemId);

					if (!b_active) {
						i_self.setLanguageActive(true);
					}
					else {
						i_self.updateLanguageActive(b_active);
					}

					i_self.checkChange();
				}
			});

			a_items.push(i_menuItem);
		});

		var i_menuItem = Ext.widget("menuitem", {
			itemId: "off",
			text: "Default",
			iconCls: "pf-earth2",
			handler: function (i_item) {
				i_self.setLanguageActive(false);
				i_self.checkChange();
			}
		});

		a_items.push(i_menuItem);

		var i_menu = Ext.widget("menu", {
			items: a_items,
			listeners: {
				beforeshow: {
					fn: function (i_menu) {

						var a_items = i_menu.query("menuitem");

						var s_current = i_self.getLanguage();

						var b_active = i_self.getLanguageActive();

						Ext.Array.each(a_items, function (i_item) {

							i_item.enable();

							if (i_item.itemId == "off") {
								if (!b_active) {
									i_item.disable();
								}
							}
						});

						if (b_active) {

							var i_found = Ext.Array.findBy(a_items, function (i_item) {
								return s_current == i_item.itemId;
							});

							i_found.disable();
						}
					}
				}
			}
		});

		i_self.setSelections(i_menu);
	},

	getValue: function() {

		var i_self = this;
		var s_current = i_self.getLanguage();
		var s_default = "";

		var o_initial = i_self.initialConfig;

		var b_active = i_self.getLanguageActive();

		var o_meta = {
			key: {},
			defaultProperty: i_self.getDefaultProperty(),
			active: b_active ? 1 : 0
		};

		o_meta.key[i_self.name] = o_initial.value || 0;

		var o_stored = i_self.getStored();
		var s_raw = i_self.getRawValue();

		s_default = s_raw;

		if (b_active) {

			o_stored[s_current] = s_raw;

			if (o_stored.en) {
				s_default = o_stored.en;
			}
		}

		var o_value = {
			meta: o_meta,
			text: o_stored,
			"default": s_default
		};

		i_self.value = o_value;

		return o_value;
	},

	getSubmitValue: function() {

		var i_self = this;
		var o_value = i_self.getValue();
		var o_text = o_value.text;

		var s_raw = i_self.getRawValue();

		if (!o_text.en) {
			o_text.en = s_raw;
			o_value["default"] = o_text.en;
		}

		return o_value;
	},

	setValue: function(value) {

		var i_self = this;

		var b_active = i_self.getLanguageActive();
		var s_current = i_self.getLanguage();

		var s_value = value;

		if (Ext.isObject(value)) {

			s_value = value["default"];

			if (b_active) {
				s_value = ip2.i18n(value.text);
			}
		}

		if (!s_value) {

			var o_value = i_self.value || i_self.lastValue || {
				text: {}
			};

			if (!b_active) {
				s_value = o_value["default"];
			}
			else {
				s_value = o_value.text[s_current];
			}
		}

		i_self.setRawValue(s_value);

		if (i_self.rendered) {
			i_self.checkChange();
		}
	},

	setCarrierValue: function(s_value) {

		var i_self = this;
		var o_initial = i_self.initialConfig;
		var o_stored = i_self.getStored();

		var a_languages = i_self.getLanguages();

		s_value = s_value || "";

		var o_meta = {
			key: {},
			defaultProperty: i_self.getDefaultProperty(),
			active: 0
		};

		o_meta.key[i_self.name] = o_initial.value || 0;

		var o_value = Ext.decode(s_value, true) || {
			meta: o_meta,
			text: {},
			"default": ""
		};

		var b_active = o_value.active ? true : false;

		var o_text = Ext.clone(o_value.text);

		Ext.Array.each(a_languages, function(s_key) {
			var s_value	= o_text[s_key] || "";
			o_text[s_key] = s_value;
		});

		Ext.apply(o_stored, o_text);

		if (!o_stored.en) {
			o_stored.en = o_value["default"];
		}

		i_self.value = o_value;

		i_self.setStored(o_stored);

		if (Ext.isObject(o_value)) {

			s_value = o_value["default"];

			if (b_active) {
				s_value = ip2.i18n(o_value.text);
			}
		}

		i_self.suspendCheckChange++;
		i_self.setValue(s_value);
		i_self.setLanguageActive(b_active);
		i_self.resetOriginalValue();
		i_self.suspendCheckChange--;
		i_self.checkChange();
	},

	resetOriginalValue: function() {

		var i_self = this;

		i_self.originalValue = Ext.clone(i_self.getValue());
		i_self.checkDirty();
	},

	checkChange: function() {

		var i_self = this;
		var o_newValue;
		var o_oldValue;

		if (!i_self.suspendCheckChange) {

			o_newValue = Ext.clone(i_self.getValue());
			o_oldValue = Ext.clone(i_self.lastValue);

			if (!i_self.isDestroyed && i_self.didValueChange(o_newValue, o_oldValue)) {
				i_self.lastValue = o_newValue;
				i_self.fireEvent("change", i_self, o_newValue, o_oldValue);
				i_self.onChange(o_newValue, o_oldValue);
			}
		}
	},

	didValueChange: function(o_newValue, o_oldValue) {

		var s_newValue = Ext.encode(o_newValue);
		var s_oldValue = Ext.encode(o_oldValue);

		return s_newValue != s_oldValue;
	},

	isDirty: function() {

		var i_self = this;

		var b_active = i_self.getLanguageActive();

		var value = i_self.getValue();

		var o_original = i_self.originalValue;

		var b_dirty = false;

		if (b_active) {
			var s_originalValue = Ext.encode(i_self.originalValue, true) || i_self.originalValue;
			var s_value = Ext.encode(value, true) || value;

			b_dirty = s_originalValue != s_value;
		}
		else {
			b_dirty = value["default"] != o_original["default"] || (b_active != o_original.meta.active);
		}

		return b_dirty;
	},

	updateLanguage: function(value) {

		var i_self = this;

		if (value) {
			var o_stored = i_self.getStored();

			var s_value = o_stored[value];

			i_self.setValue(s_value);

			if (i_self.rendered) {
				var o_newValue = Ext.clone(i_self.getValue());
				var o_oldValue = Ext.clone(i_self.lastValue);

				i_self.fireEvent("change", i_self, o_newValue, o_oldValue);
			}
		}
	},

	clear: function() {

		var i_self = this;

		var o_initial = i_self.initialConfig;

		var b_active = i_self.getLanguageActive();

		var o_meta = {
			key: {},
			defaultProperty: i_self.getDefaultProperty(),
			active: b_active ? 1 : 0
		};

		o_meta.key[i_self.name] = o_initial.value || 0;

		var o_value = {
			meta: o_meta,
			text: {},
			"default": ""
		};

		i_self.value = o_value;
		i_self.suspendCheckChange++;
		i_self.setValue("");
		i_self.suspendCheckChange--;
	}
});
