/*global define */
define(['jquery', 'underscore', 'backbone', 'collections/UserGroup', 'views/GroupListView', 'text!templates/userGroup.html', 'text!templates/alert.html'],
	function($, _, Backbone, UserGroup, GroupListView, Template, AlertTemplate) {
		'use strict';

		/**
		 * @class UserGroupView
		 * @classdesc A subview that displays group management. View controls creation of groups and addition
		 * of members to groups
		 * @classcategory Views
		 * @screenshot views/UserGroupView.png
		 */
		var UserGroupView = Backbone.View.extend(
			/** @lends UserGroupView.prototype */ {

			tagName: "div",
			className: "span8 subsection",
			attributes: {'data-section': 'groups'},
			type: "UserGroupView",
			events: {
				"blur #add-group-name"    : "checkGroupName",
				"click #add-group-submit" : "createGroup"
			},

			template: _.template(Template),
			alertTemplate: _.template(AlertTemplate),

			initialize: function(options){
				if((typeof options == "undefined"))
					var options = {};
				this.model = options.model;
				this.subviews = new Array();
			},

			render: function(){
				this.$el.html(this.template());
				this.insertCreateGroupForm();
				this.listenTo(this.model, "change:isMemberOf", this.getGroups);
				this.getGroups();
				this.delegateEvents();
				return this;
			},

				/**
				 * Creates a view of a list of groups that the User is a member of
				 *
				 * @param {UserGroup} userGroup A user group model
				 * @param {Object} viewOptions an object of options for the view
				 */
				createGroupList: function(userGroup, viewOptions) {
				//Only create a list for new groups that aren't yet on the page
				var existingGroupLists = _.where(this.subviews, {type: "GroupListView"});
				if(existingGroupLists)
					var groupIds = _.pluck(existingGroupLists, "groupId");
				if(groupIds && (_.contains(groupIds, userGroup.groupId)))
					return;

				//Create a list of the view options
				if(typeof viewOptions == "object")
					viewOptions.collection = userGroup;
				else
					viewOptions = { collection: userGroup };

				//Create the view and save it as a subview
				var groupView = new GroupListView(viewOptions);
				this.subviews.push(groupView);

				//Collapse the views if need be
				if((userGroup.get("isMemberOf") && (userGroup.get("isMemberOf").length > 3)) || (userGroup.length > 3))
					groupView.collapseMemberList();

				//Finally, render it and return
				return groupView.render().el;
			},

				/**
				 * Gets the groups the this user is a part of and creates a UserGroup collection for each
				 */
				getGroups: function(){
				var view = this,
					groups = [],
					model = this.model;
				//Create a group Collection for each group this user is a member of
				_.each(_.sortBy(model.get("isMemberOf"), "name"), function(group){
					var userGroup = new UserGroup([model], group);
					groups.push(userGroup);

					view.listenTo(userGroup, "sync", function(){
						var list = this.createGroupList(userGroup);
						this.$("#group-list-container").append(list);
					});
					userGroup.getGroup();
				});
			},

				/**
				 * Inserts a new form for this user to create a new group.
				 * The form container is grabbed from the template
				 */
				insertCreateGroupForm: function(){
				//Reset the form
				$("#add-group-form-container").find("input[type='text']").val("").removeClass("has-error");
				$("#group-name-notification-container").empty().removeClass("notification success error");

				//Create a pending group that is stored locally until the user submits it
				this.pendingGroup = new UserGroup([this.model], { pending: true });
				var groupView = new GroupListView({ collection: this.pendingGroup });
				this.subviews.push(groupView)
				groupView.setElement(this.$("#add-group-container .member-list"));
				groupView.render();
			},

				/**
				 * Returns a container that includes a view of the user's group membership
				 * @param {UserGroup[]} groups An array of UserGroup models
				 * @param {String} listContainer An html string template of a container that will get appended
				 * @returns {String} HTML string filled with groups information
				 */
				insertMembership: function(groups, listContainer){
				var	model  = this.model,
					list   = $(document.createElement("ul")).addClass("list-group member-list"),
					listHeader = $(document.createElement("h5")).addClass("list-group-item list-group-header").text("Member of " + groups.length + " groups")

				_.each(groups, function(group, i){
					var name = group.name || "Group",
						listItem = $(document.createElement("li")).addClass("list-group-item"),
						groupLink = group.groupId? $(document.createElement("a")).attr("href", MetacatUI.root + "/profile/" + group.groupId).text(name).appendTo(listItem) : "<a></a>";

					$(list).append(listItem);
				});

				if(this.model.get("username") == MetacatUI.appUserModel.get("username")){
					var link = $(document.createElement("a")).attr("href", MetacatUI.root + "/profile/" + MetacatUI.appUserModel.get("username") + "/s=settings/s=groups").text("Create New Group"),
						icon = $(document.createElement("i")).addClass("icon icon-on-left icon-plus"),
						listItem = $(document.createElement("li")).addClass("list-group-item create-group").append( $(link).prepend(icon) );

					$(list).append(listItem);
				}

				listContainer.html(list);
				list.before(listHeader);
				return listContainer;
			},

				/**
				 * Will send a request for info about this user and their groups, and redraw the group lists.
				 * Will also reset the "Create New Group" form
				 */
				refreshGroupLists: function(){
				this.insertCreateGroupForm();
				this.model.getInfo();
			},


				/**
				 * Gets the group name the user has entered and attempts to get this group from the server
				 * If no group is found, then the group name is marked as available. Otherwise an error msg is displayed
				 * @param {Event} e
				 */
				checkGroupName: function(e){
				if(!e || !e.target) return;

				var view = this,
					$notification = $("#group-name-notification-container"),
					$input = $(e.target);

				//Get the name typed in by the user
				var name = $input.val().trim();
				if(!name) return;

				this.listenToOnce(this.pendingGroup, "nameChecked", function(collection){
					//If the group name/id is available, then display so
					if(collection.nameAvailable){
						var icon = $(document.createElement("i")).addClass("icon icon-ok"),
							message = "The name " + collection.name + " is available",
							container = $(document.createElement("div")).addClass("notification success");

						$notification.html($(container).append(icon, message));
						$input.removeClass("has-error");
					}
					else{
						var icon = $(document.createElement("i")).addClass("icon icon-remove"),
							message = "The name " + collection.name + " is already taken",
							container = $(document.createElement("div")).addClass("notification error");

						$notification.html($(container).append(icon, message));
						$input.addClass("has-error");
					}

				});

				this.pendingGroup.checkName(name);
			},

				/**
				 * Syncs the pending group with the server
				 * @param {Event} e
				 */
				createGroup: function(e){
				e.preventDefault();

				//If there is no name specified, give warning
				if(!this.pendingGroup.name){
					var $notification = $("#group-name-notification-container"),
						$input = $("#add-group-name");

					var icon = $(document.createElement("i")).addClass("icon icon-exclamation"),
						message = "You must enter a group name",
						container = $(document.createElement("div")).addClass("notification error");

					$notification.html($(container).append(icon, message));
					$input.addClass("has-error");

					return;
				}
				//If this name is not available, exit
				else if(this.pendingGroup.nameAvailable == false) return;

				var view = this,
					group = this.pendingGroup;
				var success = function(data){
					view.showAlert("Success! Your group has been saved. View it <a href='" + MetacatUI.root + "/profile/" + group.groupId + "'>here</a>", "alert-success", "#add-group-alert-container");
					view.refreshGroupLists();
				}
				var error = function(xhr){
					var response = xhr? $.parseHTML(xhr.responseText) : null,
						description = "";
					if(response && response.length)
						description = $(response).find("description").text();

					if(description) description = "(" + description + ").";
					else description = "";

					view.showAlert("Your group could not be created. " + description + " Please try again.", "alert-error", "#add-group-alert-container")
				}

				//Create it!
				if(!this.pendingGroup.save(success, error))
					error();
			},

				/**
				 * Displays an alert message to the user
				 * @param {String} msg Message of the alert
				 * @param {String} classes A class tag
				 * @param {String} container The container tag
				 */
				showAlert: function(msg, classes, container) {
				if(!classes)
					var classes = 'alert-success';
				if(!container || !$(container).length)
					var container = this.$el;

				//Remove any alerts that are already in this container
				if($(container).children(".alert-container").length > 0)
					$(container).children(".alert-container").remove();

				$(container).prepend(
					this.alertTemplate({
						msg: msg,
						classes: classes
					})
				);
			},

				/**
				 * Closes the view and clears any subviews
				 */
				onClose: function() {
				this.$el.html("");
				this.stopListening(this.model)
				this.subviews = new Array();
			},

		});

		return UserGroupView;
	});