"use strict";
/* globals define, socket, ajaxify, app, bootbox, RELATIVE_PATH */

define('forum/groups/details', ['iconSelect', 'vendor/colorpicker/colorpicker', 'vendor/jquery/draggable-background/backgroundDraggable'], function(iconSelect) {
	var Details = {
			cover: {}
		};

	Details.init = function() {
		var detailsPage = $('.groups'),
			settingsFormEl = detailsPage.find('form');

		Details.prepareSettings();
		Details.initialiseCover();

		$('.latest-posts .content img').addClass('img-responsive');

		detailsPage.on('click', '[data-action]', function() {
			var btnEl = $(this),
				userRow = btnEl.parents('tr'),
				ownerFlagEl = userRow.find('.member-name i'),
				isOwner = !ownerFlagEl.hasClass('invisible') ? true : false,
				uid = userRow.attr('data-uid'),
				action = btnEl.attr('data-action');

			switch(action) {
				case 'toggleOwnership':
					socket.emit('groups.' + (isOwner ? 'rescind' : 'grant'), {
						toUid: uid,
						groupName: ajaxify.variables.get('group_name')
					}, function(err) {
						if (!err) {
							ownerFlagEl.toggleClass('invisible');
						} else {
							app.alertError(err);
						}
					});
					break;

				case 'update':
					Details.update();
					break;

				case 'delete':
					Details.deleteGroup();
					break;

				case 'join':	// intentional fall-throughs!
				case 'leave':
				case 'accept':
				case 'reject':
					socket.emit('groups.' + action, {
						toUid: uid,
						groupName: ajaxify.variables.get('group_name')
					}, function(err) {
						if (!err) {
							ajaxify.refresh();
						} else {
							app.alertError(err);
						}
					});
					break;
			}
		});
	};

	Details.prepareSettings = function() {
		var settingsFormEl = $('.groups form'),
			colorBtn = settingsFormEl.find('[data-action="color-select"]'),
			colorValueEl = settingsFormEl.find('[name="labelColor"]'),
			iconBtn = settingsFormEl.find('[data-action="icon-select"]'),
			previewEl = settingsFormEl.find('.label'),
			previewIcon = previewEl.find('i'),
			previewValueEl = settingsFormEl.find('[name="icon"]');

		if (settingsFormEl.length) {
			// Add color picker to settings form
			colorBtn.ColorPicker({
				color: colorValueEl.val() || '#000',
				onChange: function(hsb, hex) {
					colorValueEl.val('#' + hex);
					previewEl.css('background-color', '#' + hex);
				},
				onShow: function(colpkr) {
					$(colpkr).css('z-index', 1051);
				}
			});

			// Add icon selection interface
			iconBtn.on('click', function() {
				iconSelect.init(previewIcon, function() {
					previewValueEl.val(previewIcon.val());
				});
			});
		}
	};

	Details.update = function() {
		var settingsFormEl = $('.groups form');

		if (settingsFormEl.length) {
			require(['vendor/jquery/serializeObject/jquery.ba-serializeobject.min'], function() {
				var settings = settingsFormEl.serializeObject(),
					keys = Object.keys(settings),
					inputEl;

				// Fix checkbox values
				keys.forEach(function(key) {
					inputEl = settingsFormEl.find('input[type="checkbox"][name="' + key + '"]');
					if (inputEl.length) {
						settings[key] = settings[key] === 'on' ? true : false;
					}
				});

				socket.emit('groups.update', {
					groupName: ajaxify.variables.get('group_name'),
					values: settings
				}, function(err) {
					if (err) {
						return app.alertError(err.message);
					}

					if (settings.name) {
						ajaxify.go('groups/' + encodeURIComponent(settings.name));
					} else {
						ajaxify.refresh();
					}

					app.alertSuccess('[[groups:event.updated');
				});
			});
		}
	};

	Details.deleteGroup = function() {
		bootbox.confirm('Are you sure you want to delete the group: ' + ajaxify.variables.get('group_name'), function(confirm) {
			if (confirm) {
				bootbox.prompt('Please enter the name of this group in order to delete it:', function(response) {
					if (response === ajaxify.variables.get('group_name')) {
						socket.emit('groups.delete', {
							groupName: ajaxify.variables.get('group_name')
						}, function(err) {
							if (!err) {
								app.alertSuccess('[[groups:event.deleted, ' + ajaxify.variables.get('group_name') + ']]');
								ajaxify.go('groups');
							} else {
								app.alertError(err.message);
							}
						});
					}
				});
			}
		});
	};

	Details.initialiseCover = function() {
		var coverEl = $('.group-cover');
		coverEl.find('.change').on('click', function() {
			coverEl.toggleClass('active', 1);
			coverEl.backgroundDraggable({
				axis: 'y'
			});
			coverEl.on('dragover', Details.cover.onDragOver);
			coverEl.on('drop', Details.cover.onDrop);
		});

		coverEl.find('.save').on('click', Details.cover.save);
	};

	// Cover Photo Handling Code

	Details.cover.load = function() {
		socket.emit('groups.cover.get', {
			groupName: ajaxify.variables.get('group_name')
		}, function(err, data) {
			if (!err) {
				var coverEl = $('.group-cover');
				if (data['cover:url']) {
					coverEl.css('background-image', 'url(' + data['cover:url'] + ')');
				}

				if (data['cover:position']) {
					coverEl.css('background-position', data['cover:position']);
				}

				delete Details.cover.newCover;
			} else {
				app.alertError(err.message);
			}
		});
	};

	Details.cover.onDragOver = function(e) {
		e.stopPropagation();
		e.preventDefault();
		e.originalEvent.dataTransfer.dropEffect = 'copy';
	};

	Details.cover.onDrop = function(e) {
		var coverEl = $('.group-cover');
		e.stopPropagation();
		e.preventDefault();

		var files = e.originalEvent.dataTransfer.files,
		reader = new FileReader();

		if (files.length && files[0].type.match('image.*')) {
			reader.onload = function(e) {
				coverEl.css('background-image', 'url(' + e.target.result + ')');
				coverEl.backgroundDraggable();
				Details.cover.newCover = e.target.result;
			};

			reader.readAsDataURL(files[0]);
		}
	};

	Details.cover.save = function() {
		var coverEl = $('.group-cover');

		coverEl.addClass('saving');

		socket.emit('groups.cover.update', {
			groupName: ajaxify.variables.get('group_name'),
			imageData: Details.cover.newCover || undefined,
			position: $('.group-cover').css('background-position')
		}, function(err) {
			if (!err) {
				coverEl.toggleClass('active', 0);
				coverEl.backgroundDraggable('disable');
				coverEl.off('dragover', Details.cover.onDragOver);
				coverEl.off('drop', Details.cover.onDrop);
				Details.cover.load();
			} else {
				app.alertError(err.message);
			}

			coverEl.removeClass('saving');
		});
	};

	return Details;
});