/* jslint esversion: 6 */
const $ = require('jquery');
const Backbone = require('backbone');
const _ = require('underscore');
const { Agent, Agents } = require('../components/agents/agents');
const ROW_TEMPLATE = `
<td></td>
<td><%- fullName %></td>
<td><%- phoneNumber %></td>
<td><%= availableNow ? "Yes" : "No" %></td>
<td>
    <div class='btn-group'>
        <a class='btn btn-xs btn-danger btn-table-action'
           data-original-title='Edit' title='Edit' data-toggle='tooltip'>
           <i class="material-icons">close</i>
        </a>
    </div>
</td>
`;

var GroupAgentRowView = Backbone.View.extend({
    events: {
        'click a': 'handleRemoveClick',
    },

    template: null,

    tagName: 'tr',

    initialize: function() {
        this.template = _.template(ROW_TEMPLATE);
    },

    render: function() {
        this.$el.html(this.template(this.model.attributes));
        return this;
    },

    handleRemoveClick: function (e) {
        e.preventDefault();
        this.trigger('remove', this.model.id);
        this.remove();
    },
});

var GroupAgentTableView = Backbone.View.extend({
    initialize: function () {
        this.agents = new Agents();
    },

    render: function () {
        this.$el.find('tr').each((i, el) => {
            var id = parseInt($(el).attr('data-agentid'));
            if (isNaN(id))
                return;

            var agent = new Agent({ id: id });
            agent.fetch().then(() => {
                this.agents.add(agent);
                var view = new GroupAgentRowView({ model: agent, el: el });
                view.on('remove', (id) => {
                    this.agents.remove(id);
                });
            });
        });

        return this;
    },

    addAgent: function (id) {
        if (this.agents.get(id))
            return;

        var agent = new Agent({ id: id });
        return agent.fetch().then(() => {
            this.agents.add(agent);
            var view = new GroupAgentRowView({ model: agent }).render();
            view.$el.appendTo(this.$el);
            view.on('remove', (id) => {
                this.agents.remove(id);
            });
        });
    }
});

$(function () {
    const agentsView = new GroupAgentTableView({
        el: '#group-agents'
    }).render();
    agentsView.agents.on('add remove', function () {
        // Save new agent IDs belonging to the group into the hidden field
        $('#group_agents').val(agentsView.agents.map(function (a) {
            return a.id;
        }).join(','));
    });
    agentsView.agents.on('remove', function (model) {
        // Add agent to the drop-down
        var $opt = $('<option>').text(model.get('fullName')).attr('value', model.id);
        $('#available-agents').append($opt);
    });

    $('#add-to-group').click(function(e) {
        var agentId = parseInt($('#available-agents').val());

        e.preventDefault();
        agentsView.addAgent(agentId).then(function() {
            $('#available-agents').find('[value="' + agentId + '"]').remove();
        });
    });
});