Ext.define("Ext.ux.call2action.LinkTabpanel", {

	extend: "Ext.tab.Panel",

	alias: [
		"widget.ip2Call2ActionLinkTabpanel"
	],

	border: 0,

	layout: "fit",

	config: {
		stackSelector: null,
		pageGrid: null,
		filePanel: null,
		urlPanel: null,
		mediaGallery: null,
		linkTabs: {},
		tabStatus: [],
		selectedTab: 0
	},

	requires: [
		"Ext.ux.call2action.EntityGrid",
		"Ext.ux.gallery.Media",
		"Ext.ux.call2action.UrlPanel"
	],

	initComponent: function() {

		var i_self = this;

		var o_data = i_self.config.data;
		var o_linkTabs = i_self.getLinkTabs();

		i_self.data = o_data;

		Ext.apply(o_linkTabs, {
			stack: 0,
			page: 1,
			file: 2,
			url: 3,
			mediagallery: 4
		});

		var n_activeTab = 0;

		var a_actions = [false, false, false, false, false];

		i_self.setTabStatus(a_actions);

		if (o_data.link && o_data.link.type) {
			n_activeTab = o_linkTabs[o_data.link.type];
			a_actions = [true, true, true, true, true];
			a_actions[n_activeTab] = false;
		}

		i_self.setTabStatus(a_actions);

		i_self.setSelectedTab(n_activeTab);

		i_self.callParent(arguments);

		i_self.add(i_self.createItems());

		i_self.setActiveTab(n_activeTab);

		i_self.setSelectedTab(n_activeTab);
	},

	createItems: function() {

		var i_self = this;

		var a_actions = i_self.getTabStatus();

		var serviceUrl = "/wsh-services/wshproxy.aspx";

		var o_data = i_self.getData();
		var o_linkTabs = i_self.getLinkTabs();

		var a_items = [];

		var i_stackSelector = Ext.create("Ext.ux.folderorganizer.TreeSelector", {
			wrapper: i_self,
			title: ip2.i18n({
				da: "Stakke",
				en: "Stacks"
			}),
			dmd: "webshop.dmd",
			entity: "WSHSTCET00",
			xpd: "stack.xpd",
			proxy: serviceUrl,
			cid: 1,
			omitChild: false,
			expandRootNode: false,
			multiSelect: false,
			extraProps: "page",
			filter: "[{property: \"STCPNTTKN\", value:0}]",
			preventHeader: true,
			addToAllChildren: {
				allow: false
			},
			border: false,
			autoScroll: true,
			listeners: {
				change: {
					fn: function(i_selector, b_dirty) {

						var value = i_selector.getValue();

						if (value.ID.length > 0) {

							a_actions = [false, true, true, true, true];

							i_self.setTabStatus(a_actions);

							i_self.setPanelStatus();

							o_data.link = Ext.apply({}, {
								type: "stack",
								token: value.ID[0]
							});

							var a_nodes = i_selector.getSelection();

							Ext.Array.each(a_nodes, function(i_node) {

								var i_parent = i_node.parentNode;

								var s_properties = i_node.get("PROPERTIES");

								var o_properties = Ext.decode(s_properties);

								if (i_parent) {

									var s_parentprops = i_parent.get("PROPERTIES");

									if (s_parentprops) {

										var o_parentProperties = Ext.decode(s_parentprops);

										o_data.link.page = Ext.apply({}, {
											token: o_parentProperties.token,
											hash: o_properties.token
										});
									}
								}
								else {
									o_data.link.page = Ext.apply({}, {
										token: o_properties.token
									});
								}
							});
						}
						else {

							a_actions = [false, false, false, false, false];

							i_self.setTabStatus(a_actions);

							i_self.setPanelStatus();

							delete o_data.link;
						}
					}
				}
			},
			disabled: a_actions[0]
		});

		i_self.setStackSelector(i_stackSelector);

		var i_stackStore = i_stackSelector.getStore();

		i_stackStore.on({
			load: {
				fn: function (i_store, a_records) {
					var i_proxy = i_store.getProxy();
					var o_extraParams = i_proxy.getExtraParams();
					delete o_extraParams.filter;
				}
			}
		});

		var i_pageGrid = i_self.createPageGrid();

		i_self.setPageGrid(i_pageGrid);

		var i_filePanel = Ext.create("Ext.ux.gallery.Media", {
			title: ip2.i18n({
				da: "Dokumenter",
				en: "Documents"
			}),
			path: "uploads/",
			extensions: "*",
			dropText: {
				en: "Drag-and-drop your files here",
				da: "Træk-og-slip dine filer her"
			},
			maxItems: 1,
			border: false,
			value: o_linkTabs.file == i_self.getSelectedTab() ? Ext.Array.from(o_data.link.items) : [],
			listeners: {
				create: {
					fn: function () {

						a_actions = [true, true, false, true, true];

						i_self.setTabStatus(a_actions);

						i_self.setPanelStatus();
						o_data.link = {
							type: "file"
						};
					},
					buffer: 100
				},
				empty: {
					fn: function () {

						a_actions = [false, false, false, false, false];

						i_self.setTabStatus(a_actions);

						i_self.setPanelStatus();

						delete o_data.link;
					},
					buffer: 100
				}
			},
			disabled: a_actions[2]
		});

		i_self.setFilePanel(i_filePanel);

		var i_urlPanel = Ext.create("Ext.ux.call2action.UrlPanel", {
			title: ip2.i18n({
				da: "URL",
				en: "URL"
			}),
			data: o_data,
			listeners: {
				dirtychange: {
					fn: function(panel, dirty) {
						if (dirty) {

							a_actions = [true, true, true, false, true];

							i_self.setTabStatus(a_actions);

							i_self.setPanelStatus();

							var i_urlPanel = i_self.getUrlPanel();

							o_data.link = i_urlPanel.getValue();
						}
						else {

							a_actions = [false, false, false, false, false];

							i_self.setTabStatus(a_actions);

							i_self.setPanelStatus();

							delete o_data.link;
						}
					}
				},
				isempty: {
					fn: function(panel, valid) {

						a_actions = [false, false, false, false, false];

						i_self.setTabStatus(a_actions);

						i_self.setPanelStatus();

						delete o_data.link;
					}
				},
				activate: {
					fn: function() {

						var i_urlPanel = i_self.getUrlPanel();
						var i_form = i_urlPanel.getForm();
						i_form.findField("title").focus(false, 50);
					}
				}
			},
			disabled: a_actions[3]
		});

		i_self.setUrlPanel(i_urlPanel);

		var i_mediaGallery = Ext.create("Ext.ux.gallery.Media", {
			path: "/images/page",
			extensions: "jpg,jpeg,gif,png",
			title: ip2.i18n({
				da: "Billeder",
				en: "Images"
			}),
			border: false,
			dropText: {
				en: "Drag-and-drop your files here<br><small>jpg,jpeg,gif,png</small>",
				da: "Træk-og-slip dine filer her<br><small>jpg,jpeg,gif,png</small>"
			},
			value: o_linkTabs.file == i_self.getSelectedTab() ? Ext.Array.from(o_data.link.items) : [],
			actionColumns: {
				primary: {
					type: "radiocheckbox",
					name: "primary",
					autoSelect: true,
					title: {
						da: "Primær",
						en: "Primary"
					},
					toolTip: {
						da: "Marker for at bruge dette på artikelbillede",
						en: "Select to use image in article"
					}
				}
			},
			listeners: {
				create: {
					fn: function () {

						a_actions = [true, true, true, true, false];

						i_self.setTabStatus(a_actions);

						i_self.setPanelStatus();

						o_data.link = {
							type: "mediagallery"
						};
					},
					buffer: 100
				},
				empty: {
					fn: function () {

						a_actions = [false, false, false, false, false];

						i_self.setTabStatus(a_actions);

						i_self.setPanelStatus();

						delete o_data.link;
					},
					buffer: 100
				}
			},
			disabled: a_actions[4]
		});

		i_self.setMediaGallery(i_mediaGallery);

		a_items.push(i_stackSelector);
		a_items.push(i_pageGrid);
		a_items.push(i_filePanel);
		a_items.push(i_urlPanel);
		a_items.push(i_mediaGallery);

		return a_items;
	},

	createPageGrid: function () {

		var i_self = this;

		var o_data = i_self.getData() || {};
		var a_actions = i_self.getTabStatus() || [];

		var i_pageGrid = Ext.create("Ext.ux.call2action.EntityGrid", {
			wrapper: i_self,
			title: ip2.i18n({
				da: "Sider",
				en: "Pages"
			}),
			preventHeader: true,
			border: false,
			dmd: {
				dmd: "webshop.dmd",
				entity: "WSHPAGET00",
				ui: "portfolio",
				columns: [
					{
						dataIndex: "PLGPROP_TITLE",
						flex: 2
					},
					{
						dataIndex: "PLGPROP___CID__",
						flex: 1
					}
				],
				filter: "[{\"property\":\"PLGPROP___CID__\", \"value\":\"13\", \"omit\": true}]",
				union: (o_data.link && o_data.link.type == "page") ? "[{\"property\":\"PAGPAGTKN\", \"value\":\"" + o_data.link.token + "\"}]" : ""
			},
			listeners: {
				selectionChange: {
					fn: function (view, a_records) {

						if (a_records.length > 0) {

							a_actions = [true, false, true, true, true];

							i_self.setTabStatus(a_actions);

							i_self.setPanelStatus();

							var i_record = a_records[0];

							o_data.link = Ext.apply({}, {
								type: "page",
								token: i_record.get("PAGPAGTKN")
							});
						}
						else {

							a_actions = [false, false, false, false, false];

							i_self.setTabStatus(a_actions);

							i_self.setPanelStatus();

							delete o_data.link;
						}
					}
				},
				activate: {
					fn: function () {

						var i_pageGrid = i_self.getPageGrid();
						var i_toolbar = i_pageGrid.getPagingBar();

						var i_field = i_toolbar.items.get("filterField");

						if (i_field) {
							i_field.focus(false, 50);
						}
					}
				}
			},
			disabled: a_actions[1]
		});

		return i_pageGrid;
	},

	/* ----------------------------------------------------------------------------------------------------
	    Get record, called by child components
	   ---------------------------------------------------------------------------------------------------- */
	setPanelStatus: function() {

		var i_self = this;

		var a_actions = i_self.getTabStatus();

		Ext.Array.each(a_actions, function(b_disabled, n_index) {

			var i_panel;

			switch (n_index) {
				case 0:
					i_panel = i_self.getStackSelector();
					break;
				case 1:
					i_panel = i_self.getPageGrid();
					break;
				case 2:
					i_panel = i_self.getFilePanel();
					break;
				case 3:
					i_panel = i_self.getUrlPanel();
					break;
				case 4:
					i_panel = i_self.getMediaGallery();
					break;
			}

			i_panel[b_disabled ? "disable" : "enable"]();
		});
	},

	/* ----------------------------------------------------------------------------------------------------
	    Get record, called by child components
	   ---------------------------------------------------------------------------------------------------- */
	getRecord: function(childComponent) {

		var i_self = this;
		var o_data = i_self.getData();

		var component = childComponent.getXType();
		var setData = true;

		var o_record = {
			data: {}
		};

		if (component == "ip2TreeSelector" && o_data.link.type != "stack") {
			setData = false;
		}

		if (setData) {
			o_record = {
				data: o_data
			};
		}

		return o_record;
	},

	getValue: function() {

		var i_self = this;
		var o_data = i_self.getData();
		return o_data.link;
	},

	/* ----------------------------------------------------------------------------------------------------
	    Validate and save form
	   ---------------------------------------------------------------------------------------------------- */
	doSave: function(args) {

		var i_self = this;
		var o_data = i_self.getData();

		if (o_data.link && o_data.link.type) {

			switch (o_data.link.type) {
				case "stack":
					if (o_data.link.linktype) {
						delete o_data.link.linktype;
					}
					break;
				case "page":
					if (o_data.link.linktype) {
						delete o_data.link.linktype;
					}
					break;
				case "file":
					if (o_data.link.linktype) {
						delete o_data.link.linktype;
					}
					o_data.link.items = i_self.filePanel.getValue();
					break;
				case "url":
					if (!i_self.urlPanel.isValid()) {
						i_self.setActiveTab(3);
						return;
					}
					else {
						o_data.link = i_self.urlPanel.getValue();
					}
					break;
				case "mediagallery":

					var i_gallery = i_self.getMediaGallery();
					var items = i_gallery.getValue();

					var a_items = Ext.Array.from(items);

					o_data.link.items = a_items;
					break;
			}

			if (Ext.isFunction(args.success)) {
				args.success.call();
			}
		}
		else {
			if (Ext.isFunction(args.failure)) {

				var errors = [{
					panel: "link",
					message: ip2.i18n("linkRequired")
				}];
				args.failure.call(i_self, errors);
			}
		}
	}

});
