import $ from 'jquery';
var Backbone = require('backbone');
var _ = require('underscore');
//import {template} from '../utils';

const settings = {
    urls: {
        accountSearch: '/api/accounts/search'
    }
}
const reEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
const reNonEmpty = /\S+.*/;

var xhr;
var cachedData = [];
var selectedDataId = null;
$('#move_account_txt').autoComplete({
	cache: false,
    source(term, response) {
        selectedDataId = null;
        try { xhr.abort(); } catch (e) {}
        xhr = $.getJSON(settings.urls.accountSearch, { q: term }, (data) => { cachedData = data;
            response(data); });
    },
    renderItem(item, search) {
        search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
        //let re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
        //let name = item.name.replace(re, "<b>$1</b>");
        return `<div class="autocomplete-suggestion" data-val="${item.name}"><span class="pa-name">${item.name}</span><span class="p-name">(${item.partnership})</span></div>`;
    },
    onSelect(event, term, item) {
        const index = item.eq(0).index();
        selectedDataId = cachedData[index].id;
    }
});

var Item = Backbone.Model.extend({
    defaults: {
        name: "",
        id: null
    }
});

var ItemList = Backbone.Collection.extend({
    model: Item,

    initialize(models, settings) {
        settings = settings || {};
        this.dupField = settings.dupField || 'name';
        return this;
    },

    add(items, options) {
        if (!items.length) {
            items = [items];
        } else if (items instanceof Backbone.Collection) {
            items = items.models;
        }
        _.each(items, function(item) {
            trySetDuplicate.call(this, item, this.dupField);
        }.bind(this));

        return Backbone.Collection.prototype.add.call(this, items, options);
    }
});

function findDuplicate(original, field) {
    return this.find((v) => v.get(field) === original);
}

function trySetDuplicate(item, field) {
    var original = item.get(field),
        duplicate = findDuplicate.call(this, original, field);

    if (duplicate) {
        item.cid = duplicate.cid;
    }
}

var ListView = Backbone.View.extend({
    tagName: "li",
    template: _.template('<div class="view" title="Double-click to edit">' +
				        	'<label><%- name %></label>' +
				        	'<a class="destroy"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
				        '</div>' +
				        '<input class="edit form-control" type="text" value="<%- name %>" />'
    ),
    events: {
        "dblclick .view": "edit",
        "click a.destroy": "clear",
        "keypress .edit": "updateOnEnter",
        "keyup .edit": "updateOnEsc",
        "blur .edit": "close"
    },

    initialize(settings) {
        this.isEditable = settings.isEditable;

        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
    },

    render() {
        this.$el.html(this.template(this.model.toJSON()));
        this.input = this.$('.edit');
        return this;
    },

    edit() {
        if (!this.isEditable) return;
        this.$el.addClass("editing");
        this.input.focus();
    },

    close() {
        var value = this.input.val();
        if (!value) {
            this.clear();
        } else {
            let collection = this.model.collection;
            if (this.model.get('name') == value 
            	|| !findDuplicate.call(collection, this.model.get(collection.dupField), collection.dupField)) {
                this.model.set({ name: value });
    			this.hide();
            } else {
            	this.input.tooltip("destroy")
                  .data("title", 'There is a duplicate item')
                  .tooltip()
                  .tooltip('show');
            }
        }
    },

    updateOnEnter(e) {
        if (e.keyCode == 13) this.close();
    },

    clear() {
        this.model.set({ 'id': null });
        this.model.destroy();
    },

    updateOnEsc(e) {
        if (e.keyCode != 27) return;
    	this.input.val(this.model.get('name'));
    	this.hide();
    },

    hide() {
    	this.$el.removeClass("editing");
    	this.input
					.data("title", '')
					.tooltip("destroy");
    }
});


var ActionView = Backbone.View.extend({
    events: {
        'keypress input[type=text]': 'createOnEnter',
        'click button': 'createOnClick'
    },

    initialize(settings) {
        this.input = this.$("input[type=text]");
        this.reValidate = settings.reValidate;
        this.isEditable = settings.isEditable;

        this.listenTo(this.collection, 'add', this.addOne);
        this.listenTo(this.collection, 'reset', this.addAll);

        this.collection.trigger('reset');
    },

    render() {
        return this;
    },

    addAll: function() {
      this.collection.each(this.addOne, this);
    },

    addOne(item) {
        let view = new ListView({ model: item, isEditable: this.isEditable });
        this.$("ul").append(view.render().el);
    },

    createOnEnter(e) {
        if (e.keyCode != 13) return;

        this.createOnClick();
    },

    createOnClick(e) {
        const value = this.input.val();
        if (!value) return;
        if (!this.reValidate.test(value)) return;

        this.collection.add(new Item({ id: this.getItemId(), name: value }));
        this.input.val('');
    },

    getItemId() {
        return null;
    }

});

function restoreItems(value) {
	value = JSON.parse(value || null);
	if (!value) return null;
	if (value instanceof Array && value.length == 0) return null;
	if (!(value instanceof Array)) return null;
	return _(value).map(v => new Item({ id: v.id, name: v.name }));
}

let restoredItems = restoreItems($('#invited_emails').val());
let invitedEmailsList = new ItemList(restoredItems);
let partnersView = new ActionView({
    el: '#partners-view',
    collection: invitedEmailsList,
    reValidate: reEmail,
    isEditable: true
});

restoredItems = restoreItems($('#moved_accounts').val());
let movedAccountsList = new ItemList(restoredItems, { dupField: 'id' });
let accountsView = new ActionView({
    el: '#accounts-view',
    collection: movedAccountsList,
    reValidate: reNonEmpty
});
accountsView.getItemId = () => {
    return selectedDataId;
}

let $partner_name = $('#name');
$('#form_partnerships_new').on('submit', (e) => {
	$('#invited_emails').val(JSON.stringify(invitedEmailsList.toJSON()));
	$('#moved_accounts').val(JSON.stringify(movedAccountsList.toJSON()));
	if(($partner_name.val() || '').trim()) return true;
	$partner_name.tooltip("destroy")
                  .data("title", 'Name has to be provided')
                  .tooltip()
                  .tooltip('show');
	return false;
});

movedAccountsList.trigger();

$partner_name.on('keyup', (e) => {
	$partner_name.data("title", '')
			.tooltip("destroy");
})