Ext.define("Generator.view.Main", {

	xtype: "generator-main",

	extend: "Ext.form.Panel",

	layout: "border",

	border: false,

	config: {
		build: null,
		getField: null,
		searchField: null
	},

	requires: [
		"Generator.controller.Main",
		"Ext.ux.form.field.AceTextArea",
		"Ext.ux.themed.Button",
		"Ext.ux.themed.Menuitem",
		"Ext.ux.buffer.view.Form",
		"Ext.ux.form.field.ISOTimestampField"
	],

	controller: "generator-main",

	listeners: {
		validitychange: {
			fn: function(i_form, b_valid) {

				var i_self = this;

				var b_dirty = i_form.isDirty();

				var i_build = i_self.getBuild();

				if (i_build) {

					i_build[b_valid ? b_dirty ? "enable" : "disable" : "disable"]();
				} 

			}
		},
		dirtychange: {
			fn: function(i_form, b_dirty) {

				var i_self = this;

				var b_valid = i_form.isValid();

				var i_build = i_self.getBuild();

				if (i_build) {

					i_build[b_valid ? b_dirty ? "enable" : "disable" : "disable"]();
				} 

			}
		}
	},

	initComponent: function() {

		var i_self = this;
		i_self.callParent(arguments);

		i_self.add(i_self.createLayout());

		i_self.addDocked(i_self.createToolbar());

		i_self.isValid();

		return i_self;
	},

	createLayout: function() {

		var i_self = this;

		var a_items = [];

		a_items.push(i_self.createInfoArea());
		a_items.push(i_self.createSearchArea());
		a_items.push(i_self.createGetArea());

		return a_items;
	},

	createInfoArea: function() {

		var i_north = Ext.widget("panel", {
			region: "north",
			bodyPadding: 10,
			layout: {
				type: "hbox",
				align: "stretch"
			},
			defaults: {
				margin: "0 10 0 0"
			},
			items: [
				{
					xtype: "textfield",
					name: "idColumn",
					fieldLabel: "ID Column",
					flex: 1,
					allowBlank: false
				},
				{
					xtype: "textfield",
					name: "appname",
					fieldLabel: "App Name",
					flex: 1,
					allowBlank: false
				},
				{
					xtype: "textfield",
					name: "title",
					fieldLabel: "Title",
					flex: 1,
					allowBlank: false
				},
				{
					xtype: "textfield",
					name: "outPath",
					fieldLabel: "Out path",
					flex: 1,
					allowBlank: false
				},
				{
					xtype: "textfield",
					name: "hive",
					fieldLabel: "Hive",
					flex: 1,
					allowBlank: false
				}
				
			]
		});

		return i_north;
	},

	createSearchArea: function() {

		var i_self = this;

		var i_controller = i_self.getController();

		var a_items = [];

		var i_center = Ext.widget("panel", {
			region: "center",
			title: "List",
			layout: "fit",
			split: true,
			flex: 1
		});

		var i_searchField = Ext.widget("acetextarea", {
			xtype: "acetextarea",
			name: "searchStmt",
			mode: "sql",
			asArray: true,
			listeners: {
				keydown: {
					element: "el",
					fn: function(i_event) {

						if (i_event.ctrlKey === true) {

							if (i_event.getKey() == Ext.event.Event.R) {

								i_event.stopEvent();

								var i_target = Ext.get(i_event.currentTarget);
								var i_field = i_target.component;

								var a_values = i_field.getValue();

								a_values = Ext.Array.from(a_values);

								i_controller.onSqlPreview(a_values.join(" "), 100, function(o_result) {

									i_controller.onShowPreview(o_result, function(i_grid) {
										i_center.removeAll();
										i_center.add(i_grid);
									});
								});
							}
						}
					}
				}
			}
		});

		var i_south = Ext.widget("panel", {
			region: "south",
			title: "Search statment",
			height: 200,
			layout: "fit",
			split: true,
			items: [
				i_searchField
			]
		});

		a_items.push(i_center);
		a_items.push(i_south);

		var i_searchArea = Ext.widget("panel", {
			layout: "border",
			border: false,
			region: "center",
			flex: 1,
			split: true,
			items: a_items
		});

		i_self.setSearchField(i_searchField);

		return i_searchArea;
	},

	createGetArea: function() {

		var i_self = this;

		var i_controller = i_self.getController();

		var a_items = [];

		var i_center = Ext.widget("panel", {
			region: "center",
			title: "Form",
			layout: "fit",
			split: true,
			flex: 1
		});

		var i_getField = Ext.widget("acetextarea", {
			xtype: "acetextarea",
			name: "getStmt",
			mode: "sql",
			asArray: true,
			listeners: {
				keydown: {
					element: "el",
					fn: function(i_event) {

						if (i_event.ctrlKey === true) {

							if (i_event.getKey() == Ext.event.Event.R) {

								i_event.stopEvent();

								var i_target = Ext.get(i_event.currentTarget);
								var i_field = i_target.component;

								var a_values = i_field.getValue();

								a_values = Ext.Array.from(a_values);

								i_controller.onSqlPreview(a_values.join(" "), 100, function(o_result) {

									i_controller.onShowFormPreview(o_result, function(i_formPanel) {
										i_center.removeAll();
										i_center.add(i_formPanel);
									});
								});
							}
						}
					}
				}
			}
		});

		var i_south = Ext.widget("panel", {
			region: "south",
			title: "Get statement",
			height: 200,
			layout: "fit",
			split: true,
			items: [
				i_getField
			]
		});

		a_items.push(i_center);
		a_items.push(i_south);

		var i_formArea = Ext.widget("panel", {
			layout: "border",
			border: false,
			region: "east",
			flex: 1,
			split: true,
			items: a_items
		});

		i_self.setGetField(i_getField);

		return i_formArea;
	},

	createToolbar: function() {

		var i_self = this;

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

		return i_toolbar;
	},

	createButtons: function() {

		var i_self = this;

		var i_build = Ext.widget("themedbutton", {
			text: ip2.i18n({
				da: "Byg",
				en: "Build"
			}),
			disabled: true,
			iconCls: "icon-gear",
			itemId: "button-build",
			handler: "onBuildApplication"
		});

		var a_buttons = [];

		a_buttons.push(i_build);

		i_self.setBuild(i_build);

		return a_buttons;

	}
});