var Backbone = require('backbone');
var $ = require('jquery');

var { Agent, Agents } = require('../agents/agents');

var agentsTemplate = require('./templates/call_settings_agents.tpl');
var agentRowTemplate = require('./templates/call_settings_agent.tpl');


var AgentRowView = Backbone.View.extend({
    events: {
        'change .agent-select': 'handleAgentSelect',
        'change .phone-select': 'handlePhoneSelect',
        'click td.remove-button': 'handleDelete'
    },

    tagName: 'tr',

    model: null,

    initialize: function (options) {
        this.allAgents = options.allAgents;

        this.render();
        this.allAgents.on('sync', () => {
            this.render();
        });
    },

    render: function () {
        this.$el.html(agentRowTemplate(this.model.toJSON()));

        this.allAgents.each((agent) => {
            this.$('.agent-select').append(
                `<option value=${agent.id}>${agent.getFullName()}</option>`
            );
        });

        this.$('.agent-select').val(this.model.get('id'));

        return this;
    },

    handlePhoneSelect: function (evt) {
        this.model.set({
            contactUsing: evt.currentTarget.value
        });
    },

    handleAgentSelect: function (evt) {
        var $selectedOption = $(evt.currentTarget).find('option:selected');

        this.model.set({
            id: parseInt($selectedOption.val(), 10),
            fullName: $selectedOption.text()
        });
    },

    handleDelete: function (evt) {
        if (this.model.collection.length > 1) {
            this.model.destroy();
        } else {
            alert('You must have at least one agent associated with the widget!');
        }
    }
});

var AgentsView = Backbone.View.extend({

    collection: null,

    initialize: function (options) {
        this.collection = options.collection;
        this.excludeGroups = !!options.excludeGroups;

        this.allAgents = null;
        this.children = [];

        this.render();

        this.listenTo(this.collection, 'change remove', () => {
            this.render();
        });
        this.listenTo(this.collection, 'add', (what) => {
            if (!this.allAgents.contains(what)) {
                this.allAgents.add(what, { silent: true });
            }

            this.render();
        });
    },

    render: function () {
        this.$el.html(agentsTemplate());

        var renderAgents = () => {
            _.each(this.children, function (view) {
                view.remove();
            });
            this.collection.each((elt, i) => {
                var agentRow = new AgentRowView({
                    model: elt,
                    allAgents: this.allAgents
                });
                this.children.push(agentRow);
                agentRow.$el.appendTo(this.$('tbody'));
            });
        };

        if (!this.allAgents) {
            this.allAgents = new Agents({ excludeGroups: this.excludeGroups });
            this.allAgents.fetch({
                success: () => {
                    if (this.collection.length == 0 && this.allAgents.length > 0) {
                        this.collection.add(new Agent(
                            this.allAgents.at(0).toJSON()
                        ));
                    }
                    renderAgents();
                }
            });
        } else {
            renderAgents();
        }

        this.newAgent = new Agent();
        this.newAgentView = new AgentRowView({
            className: 'new-row',
            model: this.newAgent,
            allAgents: this.allAgents
        });
        this.newAgentView.$el.appendTo(this.$('tfoot'));
        this.newAgent.on('change', () => {
            this.collection.add(new Agent(this.newAgent.attributes));
        });

        return this;
    },

    getCollection: function () {
        return this.collection.toJSON();
    },

    setCollection: function (data) {
        this.collection.reset(data);
        this.render();
    }
});


module.exports = { Agents, AgentsView };