text: import { Meteor } from 'meteor/meteor';
  import { ReactiveVar } from 'meteor/reactive-var';
  import { Template } from 'meteor/templating';
  import toastr from 'toastr';
  
  import { t } from '../../../../../utils';
  import { hasRole } from '../../../../../authorization';
  import { LivechatVisitor } from '../../../collections/LivechatVisitor';
  import { LivechatDepartmentAgents } from '../../../collections/LivechatDepartmentAgents';
  import { LivechatRoom } from '../../../collections/LivechatRoom';
  import './visitorEdit.html';
  
  Template.visitorEdit.helpers({
  	visitor() {
  		return Template.instance().visitor.get();
  	},
  
  	room() {
  		return Template.instance().room.get();
  	},
  
  	email() {
  		const visitor = Template.instance().visitor.get();
  		if (visitor.visitorEmails && visitor.visitorEmails.length > 0) {
  			return visitor.visitorEmails[0].address;
  		}
  	},
  
  	phone() {
  		const visitor = Template.instance().visitor.get();
  		if (visitor.phone && visitor.phone.length > 0) {
  			return visitor.phone[0].phoneNumber;
  		}
  	},
  
  	tags() {
  		return Template.instance().tags.get();
  	},
  
  	availableUserTags() {
  		return Template.instance().availableUserTags.get();
  	},
  
  	hasAvailableTags() {
  		const tags = Template.instance().availableTags.get();
  		return tags && tags.length > 0;
  	},
  
  	canRemoveTag(availableUserTags, tag) {
  		return hasRole(Meteor.userId(), ['admin', 'livechat-manager']) || (Array.isArray(availableUserTags) && (availableUserTags.length === 0 || availableUserTags.indexOf(tag) > -1));
  	},
  });
  
  Template.visitorEdit.onRendered(function() {
  	Meteor.call('livechat:getTagsList', (err, tagsList) => {
  		this.availableTags.set(tagsList);
  
  		const uid = Meteor.userId();
  		const agentDepartments = this.agentDepartments.get();
  		const isAdmin = hasRole(uid, ['admin', 'livechat-manager']);
  		const tags = this.availableTags.get() || [];
  		const availableTags = tags
  			.filter(({ departments }) => isAdmin || (departments.length === 0 || departments.some((i) => agentDepartments.indexOf(i) > -1)))
  			.map(({ name }) => name);
  
  		this.availableUserTags.set(availableTags);
  	});
  });
  
  Template.visitorEdit.onCreated(function() {
  	this.visitor = new ReactiveVar();
  	this.room = new ReactiveVar();
  	this.tags = new ReactiveVar([]);
  	this.availableTags = new ReactiveVar([]);
  	this.agentDepartments = new ReactiveVar([]);
  	this.availableUserTags = new ReactiveVar([]);
  
  	this.autorun(() => {
  		this.visitor.set(LivechatVisitor.findOne({ _id: Template.currentData().visitorId }));
  	});
  
  	const rid = Template.currentData().roomId;
  
  	this.subscribe('livechat:rooms', { _id: rid });
  	this.autorun(() => {
  		const room = LivechatRoom.findOne({ _id: rid });
  		this.room.set(room);
  		this.tags.set((room && room.tags) || []);
  	});
  
  	const uid = Meteor.userId();
  	this.subscribe('livechat:departmentAgents', null, uid, () => {
  		const departments = [];
  		LivechatDepartmentAgents.find({ agentId: uid }).forEach((dept) => {
  			departments.push(dept.departmentId);
  		});
  		this.agentDepartments.set(departments);
  	});
  });
  
  Template.visitorEdit.events({
  	'submit form'(event, instance) {
  		event.preventDefault();
  		const userData = { _id: instance.visitor.get()._id };
  		const roomData = { _id: instance.room.get()._id };
  
  		userData.name = event.currentTarget.elements.name.value;
  		userData.email = event.currentTarget.elements.email.value;
  		userData.phone = event.currentTarget.elements.phone.value;
  
  		roomData.topic = event.currentTarget.elements.topic.value;
  		roomData.tags = instance.tags.get();
  
  		Meteor.call('livechat:saveInfo', userData, roomData, (err) => {
  			if (err) {
  				toastr.error(t(err.error));
  			} else {
  				toastr.success(t('Saved'));
  			}
  		});
  	},
  
  	'click .remove-tag'(e, t) {
  		const tag = this.valueOf();
  		const availableTags = t.availableTags.get();
  		const hasAvailableTags = availableTags && availableTags.length > 0;
  		const availableUserTags = t.availableUserTags.get();
  		if (!hasRole(Meteor.userId(), ['admin', 'livechat-manager']) && hasAvailableTags && (!availableUserTags || availableUserTags.indexOf(tag) === -1)) {
  			return;
  		}
  		e.stopPropagation();
  		e.preventDefault();
  		let tags = t.tags.get();
  		tags = tags.filter((el) => el !== tag);
  		t.tags.set(tags);
  	},
  
  	'click #addTag'(e, instance) {
  		e.stopPropagation();
  		e.preventDefault();
  
  		if ($('#tagSelect').find(':selected').is(':disabled')) {
  			return;
  		}
  
  		const tags = [...instance.tags.get()];
  		const tagVal = $('#tagSelect').val();
  		if (tagVal === '' || tags.indexOf(tagVal) > -1) {
  			return;
  		}
  
  		tags.push(tagVal);
  		instance.tags.set(tags);
  		$('#tagSelect').val('placeholder');
  	},
  
  	'keydown #tagInput'(e, instance) {
  		if (e.which === 13) {
  			e.stopPropagation();
  			e.preventDefault();
  
  			const tags = [...instance.tags.get()];
  			const tagVal = $('#tagInput').val();
  			if (tagVal === '' || tags.indexOf(tagVal) > -1) {
  				return;
  			}
  
  			tags.push(tagVal);
  			instance.tags.set(tags);
  			$('#tagInput').val('');
  		}
  	},
  
  	'click .save'() {
  		this.save();
  	},
  
  	'click .cancel'() {
  		this.cancel();
  	},
  });
  