define([
	'js/system/events',
	'js/system/client',
	'html!ui/templates/trade/template',
	'css!ui/templates/trade/styles',
	'html!ui/templates/inventory/templateItem'
], function (
	events,
	client,
	template,
	styles,
	tplItem
) {
	return {
		tpl: template,

		centered: true,

		modal: true,

		list: null,
		action: null,

		postRender: function () {
			this.onEvent('onGetTradeList', this.onGetTradeList.bind(this));
			this.onEvent('onCloseTrade', this.hide.bind(this));
		},

		onGetTradeList: function (itemList, action) {
			itemList = itemList || this.itemList;
			action = action || this.action;

			this.itemList = itemList;
			this.action = action;

			this.find('.heading-text').html(action);

			let uiInventory = $('.uiInventory').data('ui');

			let container = this.el.find('.grid')
				.empty();

			let buyItems = itemList.items;

			buyItems.forEach(function (item) {
				if ((item == this.hoverItem))
					this.onHover(null, item);
			}, this);

			let iLen = Math.max(buyItems.length, 50);
			for (var i = 0; i < iLen; i++) {
				var item = buyItems[i];

				if (action == 'sell') {
					item = buyItems.find(function (b) {
						return (b.pos == i);
					});
				}

				if (!item) {
					$(tplItem).appendTo(container);

					continue;
				}

				item = $.extend(true, {}, item);

				let size = 64;
				let offset = 0;

				let itemEl = $(tplItem)
					.appendTo(container);

				let spritesheet = item.spritesheet || '../../../images/items.png';
				if (item.material)
					spritesheet = '../../../images/materials.png';
				else if (item.quest)
					spritesheet = '../../../images/questItems.png';
				 else if (item.type == 'consumable')
					spritesheet = '../../../images/consumables.png';
				else if (item.type == 'skin') {
					offset = 4;
					size = 8;
					if (!item.spritesheet)
						spritesheet = '../../../images/characters.png';
				}

				let imgX = (-item.sprite[0] * size) + offset;
				let imgY = (-item.sprite[1] * size) + offset;

				itemEl
					.data('item', item)
					.on('click', this.onClick.bind(this, itemEl, item, action))
					.on('mousemove', this.onHover.bind(this, itemEl, item, action))
					.on('mouseleave', uiInventory.hideTooltip.bind(uiInventory, itemEl, item))
					.find('.icon')
					.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px')
					.addClass(item.type);

				if (item.quantity)
					itemEl.find('.quantity').html(item.quantity);
				else if (item.eq)
					itemEl.find('.quantity').html('EQ');

				if (action == 'buy') {
					let noAfford = false;
					if (item.worth.currency) {
						let currencyItems = window.player.inventory.items.find(function (i) {
							return (i.name == item.worth.currency);
						});
						noAfford = ((!currencyItems) || (currencyItems.quantity < item.worth.amount));
					} else
						noAfford = (item.worth * this.itemList.markup > window.player.trade.gold);

					if ((!noAfford) && (item.factions)) {
						noAfford = item.factions.some(function (f) {
							return f.noEquip;
						});
					}
					if (noAfford)
						$('<div class="no-afford"></div>').appendTo(itemEl);
				}

				if (item.worth.currency)
					item.worthText = item.worth.amount + 'x ' + item.worth.currency;
				else
					item.worthText = ~~(itemList.markup * item.worth);

				if (item.eq)
					itemEl.addClass('eq');
				else if (item.isNew) {
					itemEl.addClass('new');
					itemEl.find('.quantity').html('NEW');
				}
			}

			this.center();
			this.show();
			events.emit('onShowOverlay', this.el);
		},

		onClick: function (el, item, action, e) {
			el.addClass('disabled');

			client.request({
				cpn: 'player',
				method: 'performAction',
				data: {
					cpn: 'trade',
					method: 'buySell',
					data: {
						itemId: item.id,
						action: action
					}
				},
				callback: this.onServerRespond.bind(this, el)
			});

			let uiInventory = $('.uiInventory').data('ui');
			uiInventory.hideTooltip(el, item, e);
		},

		onHover: function (el, item, action, e) {
			let uiInventory = $('.uiInventory').data('ui');
			uiInventory.onHover(el, item, e);

			let canAfford = true;
			if (action == 'buy') {
				if (item.worth.currency) {
					let currencyItems = window.player.inventory.items.find(function (i) {
						return (i.name == item.worth.currency);
					});
					canAfford = ((currencyItems) && (currencyItems.quantity >= item.worth.amount));
				} else
					canAfford = (item.worth * this.itemList.markup <= window.player.trade.gold);
			}

			let uiTooltipItem = $('.uiTooltipItem').data('ui');
			uiTooltipItem.showWorth(canAfford);
		},

		beforeHide: function () {
			events.emit('onHideOverlay', this.el);
		},

		onServerRespond: function (el) {
			el.removeClass('disabled');
		}
	};
});