/* jshint esversion: 6 */
var utils = require('../utils');
var Backbone = require('backbone');
var $ = require('jquery');
const swal = require('sweetalert2');

var agentsTemplate = require('./templates/agents.tpl');
var agentRowTemplate = require('./templates/one_agent.tpl');

var Agent = Backbone.Model.extend({
    urlRoot: '/api/agents',

    defaults: {
        // 'phone', 'extension', 'mobile', 'app'
        contactUsing: 'phone'
    },

    sync: function (action, obj, params) {
        if (action !== "delete") {
            return Backbone.Model.prototype.sync.call(this, action, obj, params);
        }
        return false;
    },

    getFullName: function () {
        if (this.get('fullName')) {
            return this.get('fullName');
        }
        return this.get('firstName', '') + ' ' + this.get('lastName', '');
    }
});

var Agents = Backbone.Collection.extend({
    model: Agent,

    excludeGroups: false,

    initialize: function (options) {
        if (options) {
            this.excludeGroups = !!options.excludeGroups;
        }
    },

    url: function () {
        var url = '/api/agents';
        if (this.excludeGroups) {
            url += '?exclude_groups=true';
        }

        return url;
    },

    parse: function (data) {
        return data.collection;
    },
});

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

    tagName: 'tr',

    template: agentRowTemplate,

    hideRemoveButton: false,

    model: null,

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

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

    render: function () {
        var html = this.template(_.extend({
            hideRemoveButton: this.hideRemoveButton
        }, this.model.toJSON()));
        this.$el.html(html);

        Agents.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 assigned to the routing!');
        }
    }
});

var AgentsView = Backbone.View.extend({

    collection: null,

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

        this.children = [];

        this.render();

        this.listenTo(this.collection, 'change add remove', () => {
            this.render();
        });
        this.listenTo(Agents.allAgents, 'change add remove', () => {
            this.render();
        });
    },

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

        var renderAgents = () => {
        };

        if (!this.collection.length && Agents.allAgents.length) {
            this.collection.add(new Agent(
                Agents.allAgents.at(0).toJSON()
            ));
        }

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

        this.newAgent = new Agent();
        this.newAgentView = new AgentRowView({
            className: 'new-row',
            model: this.newAgent,
        });
        this.newAgentView.$el.appendTo(this.$('tfoot'));
        this.newAgent.on('change', () => {
            var callOrderObject = $('#default-routing .call-order');
            var callOrderExists = callOrderObject.length;
            var callOrderHasClass = callOrderObject.hasClass('tracking');

            if (callOrderObject != undefined && callOrderObject != null && callOrderExists > 0 && callOrderHasClass) {
                var callOrder = callOrderObject.val();

                if (this.collection.length < 7) {
                    this.collection.add(new Agent(this.newAgent.attributes));
                } else {
                    if (callOrder != 'simultaneous') {
                        this.collection.add(new Agent(this.newAgent.attributes));
                    }
                }
            } else {
                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();
    }
});

/**
 * Agents list for a Bandwidth number: can select only one agent.
 */
var AgentsLimitedView = AgentsView.extend({

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

        if (this.collection.isEmpty()) {
            this.model = new Agent();
        } else {
            this.model = this.collection.first();
        }

        if (!this.collection.length && Agents.allAgents.length) {
            this.collection.add(new Agent(
                Agents.allAgents.at(0).toJSON()
            ));
            if (!this.model || !this.model.id) {
                this.model = this.collection.at(0);
            }
        }
        this.newAgentView = new AgentRowView({
            className: 'new-row',
            model: this.model,
            hideRemoveButton: true,
        });
        this.newAgentView.$el.appendTo(this.$('tbody'));
        this.model.on('change', () => {
            this.collection.reset([this.model]);
        });

        return this;
    },
});

// Handle events on the 'add new agent' modal
var AgentCreationModalView = Backbone.View.extend({
    events: {
        'click #save-agent-btn': 'handleSaveClick'
    },

    initialize: function (options) {
        this.collection = options.collection;
        this.$el.one('hidden.bs.modal', () => {
            // Unbind event handlers, or else handleSaveClick will get called twice
            // next time the modal is created.
            this.undelegateEvents();
        });
    },

    handleSaveClick: function () {
        var agent = new Agent({
            'firstName': this.$('#new-agent-firstname').val(),
            'lastName': this.$('#new-agent-lastname').val(),
            'phoneNumber': this.$('#new-agent-phonenumber').val(),
            'email': this.$('#new-agent-email').val(),
        });
        agent.save().then(() => {
            this.collection.add(agent);
            Agents.allAgents.add(agent);
            this.$el.modal('hide');
            utils.flash('Your agent has been created successfully.', 'success');
        }, () => {
            swal({title: 'Failed to save agent', type: 'error'});
        });
    }
});


module.exports = { Agents, AgentsView, AgentsLimitedView, Agent, AgentCreationModalView };