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

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

	xtype: "icecap-i18n-textfield",

	alias: [
		"widget.icecap-i18n-textfield",
	],

	ui: "default",

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

				var i_self = this;

				var o_box = i_self.ownerCt.boundEl.component.ownerCt.getBox();

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

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

				var o_menuBox = i_menu.getBox();

				if (o_menuBox.bottom > o_box.bottom) {
					i_menu.alignTo(i_self.getEl(), "br-tr");
				}

				if (o_menuBox.left < o_box.left) {
					i_menu.alignTo(i_self.getEl(), "bl-tl");
				}

				if (o_menuBox.right > o_box.right) {
					i_menu.alignTo(i_self.getEl(), "br-tl");
				}

				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");
				i_trigger.show();
			},
			buffer: 10
		},
		enable: {
			fn: function(i_field) {

				var i_self = this;

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

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

				var i_self = this;

				var i_trigger = i_self.getTrigger("type");
				i_trigger.hide();
			},
			buffer: 10
		}
	},

	config: {
		languageActive: false,
		language: "en",
		primary: "en",
		languages: [
			"da",
			"en",
			"de"
		],
		stored: {},
		selections: null,
		asString: false,
		global: false,
		originalText: ""
	},

	initComponent: function() {

		var i_self = this;

		i_self.callParent(arguments);

		i_self.createMenu();

		i_self.enableBubble([
			"globalchange",
			"selectionopen",
			"selectionclose"
		]);
	},

	initValue: function() {

		var i_self = this;
		var value = i_self.value;
		var s_current = i_self.getLanguage();
		var b_active = i_self.getLanguageActive();
		var a_languages = i_self.getLanguages();

		var o_stored = i_self.getStored();

		var s_raw = value;

		if (Ext.String.startsWith(s_raw, "{") && Ext.String.endsWith(s_raw, "}")) {
			s_raw = Ext.decode(value, true) || value;
		}

		if (Ext.isObject(s_raw)) {

			o_stored = Ext.clone(s_raw);

			s_raw = o_stored[s_current];

			b_active = true;
		}
		else {
			o_stored[s_current] = s_raw;
		}

		i_self.setValue(s_raw);

		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);
		}

		i_self.originalValue = i_self.lastValue = i_self.getValue();
		i_self.resetOriginalValue();
	},

	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();
		var a_languages = i_self.getLanguages();

		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 flag " + s_current);
					i_self.inputEl.dom.removeAttribute("readonly");
				}
				else {

					Ext.Array.each(a_languages, function(s_lan) {
						i_element.removeCls("icon flag " + s_lan + "-icecap-field");
					});

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


					i_element.addCls("pf-earth2");
					i_self.inputEl.dom.setAttribute("readonly", true);
				}
			}
			else {
				if (b_active) {
					i_typeTrigger.cls = " icon flag " + s_current;
				}
			}
		}

		if (!b_active) {
			i_self.setLanguage(null);
		}
	},

	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();

					i_self.focus(false, 10);
				}
			});

			a_items.push(i_menuItem);
		});

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

		a_items.push(i_menuItem);

		a_items.push("-");

		var i_checkGeneral = Ext.widget("menucheckitem", {
			itemId: "check-global",
			text: "Global",
			checked: i_self.getGlobal(),
			listeners: {
				checkchange: {
					fn: function(i_menuitem, b_checked) {

						i_self.setGlobal(b_checked);
					}
				}
			}
		});

		a_items.push(i_checkGeneral);

		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.fireEvent("selectionopen", i_self);
					}
				},
				beforehide: {
					fn: function() {
						i_self.fireEvent("selectionclose", i_self);
						return true;
					}
				}
			}
		});

		i_self.setSelections(i_menu);
	},

	getValue: function() {

		var i_self = this;
		var s_current = i_self.getLanguage();
		var s_value = i_self.getRawValue();

		var b_active = i_self.getLanguageActive();

		if (b_active) {

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

			o_stored[s_current] = s_raw;

			s_value = Ext.clone(o_stored);
		}


		if (i_self.getAsString()) {

			if (Ext.isObject(s_value)) {
				s_value = Ext.encode(s_value);
			}
		}

		return s_value;
	},

	getSubmitValue: function () {

		var i_self = this;
		var s_current = i_self.getLanguage();
		var s_value = i_self.getRawValue();

		var b_active = i_self.getLanguageActive();

		if (b_active) {

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

			o_stored[s_current] = s_raw;

			s_value = o_stored;
		}

		if (i_self.getAsString()) {

			if (Ext.isObject(s_value)) {
				s_value = Ext.encode(s_value);
			}
		}

		return s_value;
	},

	getSubmitData: function() {

		var i_self = this;
		return i_self.getValue();
	},

	setValue: function(value) {

		var i_self = this;

		var s_current = i_self.getLanguage();

		var o_stored = i_self.getStored();

		var s_raw = value;

		if (Ext.String.startsWith(s_raw, "{") && Ext.String.endsWith(s_raw, "}")) {
			s_raw = Ext.decode(value, true) || value;
		}

		if (Ext.isObject(s_raw)) {

			o_stored = Ext.clone(s_raw);

			i_self.setLanguageActive(true);

			s_raw = o_stored[s_current];
		}
		else {
			o_stored[s_current] = s_raw;
		}

		i_self.setRawValue(s_raw);

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

	isDirty: function() {

		var i_self = this;
		var o_initialConfig = i_self.initialConfig;

		var b_original = o_initialConfig.hasOwnProperty("general") ? o_initialConfig.general : false;

		var b_global = i_self.getGlobal();

		var value = i_self.getValue();

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

		return s_originalValue != s_value || b_original != b_global;
	},

	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);
		}
		else{
			i_self.setRawValue(i_self.getOriginalText());
		}
	},

	didValueChange: function (newValue, oldValue) {

		var i_self = this;

		var s_value = Ext.encode(newValue, true) || newValue;
		var s_originalValue = Ext.encode(i_self.originalValue, true) || i_self.originalValue;

		return s_originalValue != s_value;
	},

	clear: function() {

		var i_self = this;

		i_self.suspendCheckChange++;
		i_self.setValue("");
		i_self.suspendCheckChange--;
	},

	updateGlobal: function(value) {

		var i_self = this;

		if (i_self.rendered) {
			i_self.fireEvent("globalchange", i_self, value);
		}
	}
});
