/* jshint esversion: 6 */

// Libraries
var Backbone = require('backbone');
var utils = require('../utils');

// Views
var { Agents, AgentsView } = require('./call_settings_agents');
var { AgentCreationModalView } = require('../agents/agents');
var NumberSelectView = require('./call_settings_numbers');
var PagesView = require('./triggers_pages');

// Templates
var selectTypeTemplate = require('./templates/step_select_type.tpl');
var beforeCallTemplate = require('./templates/step_before_call.tpl');
var startingCallTemplate = require('./templates/step_starting_call.tpl');
var callSettingsTemplate = require('./templates/step_call_settings.tpl');
var unavailabilityTemplate = require('./templates/step_unavailability.tpl');
var triggerTemplate = require('./templates/step_triggers.tpl');

// Settings &c
const defaultImages = require('./default_images');
const defaultSettings = require('./default_settings');
const MAX_FILE_SIZE = 2 * 1024 * 1024;
const MAX_IMAGE_HEIGHT = 400;
const MAX_IMAGE_WIDTH = 600;


var ColorPickerView = Backbone.View.extend({
    initialize: function () {
        this.eventsEnabled = true;

        this.render();
        this.$colorPicker.on('changeColor.colorpicker', () => {
            this.model.set('color', this.$colorPicker.colorpicker('getValue'));
        });
    },

    render: function() {
        this.$colorPicker = this.$el.colorpicker();
    }
});

var PositionPickerView = Backbone.View.extend({
    events: {
        'change select': 'handleChange'
    },

    handleChange: function (e) {
        this.model.set('position', e.currentTarget.value);
    }
});

var WidgetPage = Backbone.View.extend({
    className: 'widget-legend col-md-4 call-feature-sidebar',

    events: {
        'change input': 'handleChange',
        'change select': 'handleChange',
        'change textarea': 'handleChange'
    },

    initialize: function (options) {
        this.widgetId = options.widgetId;
        this.render();
    },

    render: function () {
        Agents.allAgents = new Agents({ excludeGroups: true });
        Agents.allAgents.fetch();

        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    handleChange: function () {
        var settings = {},
            getTags = (tagName) => this.el.getElementsByTagName(tagName),
            tags;

        tags = [].slice.call(getTags('input'));
        tags.forEach(function (input) {
            let prop = utils.idToPropertyName(input.id);
            switch (input.type) {
                case 'text':
                case 'number':
                case 'hidden':
                    settings[prop] = input.value;
                    break;
                case 'checkbox':
                case 'radio':
                    settings[prop] = input.checked;
                    break;
            }
        });

        tags = [].slice.call(getTags('select'));
        tags.push.apply(tags, getTags('textarea'));
        tags.forEach(function (control) {
            let prop = utils.idToPropertyName(control.id);
            settings[prop] = control.value;
        });

        this.model.set(settings);
    }
});

var SelectTypeView = WidgetPage.extend({
    className: 'widget-type',
    template: selectTypeTemplate,

    events: {
        // Bootstrap Wizard triggers change:value on div, not input
        'change:value div': 'changeType'
    },

    changeType: function () {
        this.model.set('widgetType', this.$('input[name=widget-type]:checked').val());
    }
});

var BeforeCallView = WidgetPage.extend({
    events: {
        'change #widget-name': 'handleChange',
        'change #widget-branding': 'handleChange',
        'change input': 'handleChange',
        'change select': 'handleChange',
        'change textarea': 'handleChange',
        'change input[type=checkbox]': 'handleWidgetTypeChange',
        'change #widget-default-image': 'handleWidgetImageChange'
    },

    initialize: function (options) {
        WidgetPage.prototype.initialize.call(this, options);

        this.model.on('change:typeTab', () => {
            if (this.model.get('typeTab')) {
                this.$('#widget-tab-section').show(400);
            }else {
                this.$('#widget-tab-section').hide(400);
            }
        });

        this.model.on('change:typeImage', () => {
            if (this.$('#widget-type-image').prop('checked')) {
                this.$('#widget-image-section').show(400);
                this.handleWidgetImageChange();
            } else {
                this.$('#widget-image-section').hide(400);
            }
        });
    },

    render: function() {
        var that = this;

        this.el.innerHTML = beforeCallTemplate(this.model.toJSON());

        new ColorPickerView({
            el: this.$("#widget-color-container"),
            model: this.model
        });
        new PositionPickerView({
            el: this.$("#widget-position-container"),
            model: this.model
        });

        if (!this.model.get('typeImage')) {
            this.$('#widget-image-section').hide();
        }
        if (this.model.hasCustomImage()) {
            this.$('#widget-image-box').show();
        }

        this.$('.slider').each((i, el) => {
            var $el = $(el),
                $input = this.$('#' + $el.attr('data-slider-input')),
                $slider = $el.noUiSlider({
                    start: parseFloat($input.val()),
                    range: {
                        min: parseFloat($el.attr('data-slider-min')),
                        max: parseFloat($el.attr('data-slider-max')),
                    },
                });
            $slider.on('change', (e, value) => {
                $input.val(value).trigger('change');
            });
        });
        this.$('#widget-upload-image').dropzone({
            url: '/outbound/image',
            headers: {
                'X-CSRFToken': $('meta[name="csrf-token"]').attr('content')
            },
            init: function () {
                this.on('addedfile', function(file) {
                    utils.flash('');

                    if (file.size > MAX_FILE_SIZE) {
                        utils.flash(__('Image file size must be < 2 MB.'));
                        this.removeAllFiles();
                        return;
                    }
                    if (file.width > MAX_IMAGE_WIDTH || file.height > MAX_IMAGE_WIDTH) {
                        utils.flash(__('Image size must be smaller than 600x400.'));
                        this.removeAllFiles();
                        return;
                    }
                });
                this.on('error', function (file, response, xhr) {
                    utils.flash(response);
                });
                this.on('success', function (evt, response) {
                    that.model.set({ customImage: response.filename });
                });
            }
        });
    },

    handleWidgetTypeChange: function (event) {
        var typeTab = this.$('#widget-type-tab').prop('checked'),
            typeImage = this.$('#widget-type-image').prop('checked');

        this.model.set({typeTab: typeTab, typeImage: typeImage});
    },

    handleWidgetImageChange: function (event) {
        var imageName = this.$('#widget-default-image').val();

        if (!imageName || imageName === "Custom") {
            this.$('#widget-image-box').show();
        } else {
            this.$('#widget-image-box').hide();
        }
    }
});

var StartingCallView = WidgetPage.extend({
    events: {
        'change input': 'handleChange',
        'change select': 'handleChange',
        'change textarea': 'handleChange',
        'change #widget-add-hidden-information': 'handleHiddenChange',
    },

    template: startingCallTemplate,

    handleHiddenChange: function (e) {
        this.$('#widget-hidden-information').prop('disabled', !e.currentTarget.checked);
    }
});

var CallSettingsView = WidgetPage.extend({
    className: 'col-md-12',
    template: callSettingsTemplate,

    events: {
        'change input': 'handleChange',
        'change select': 'handleChange',
        'change textarea': 'handleChange',
        'change input#widget-enable-notifications': 'handleNotificationsChange',
        'click #add-agent-btn': 'handleAddAgentClick',
    },

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

        this.agents = new Agents(this.model.get('agents') || []);
        this.render();
        this.listenTo(this.agents, 'change remove add', () => {
            this.model.set({
                agents: this.agents.toJSON()
            });
        });
        // This is to hide feature for when BW TNs are used for widgets.
        //this.listenTo(this.model, 'change:fromNumberType', () => {
        //    if (this.model.get('fromNumberType') === 'tracking') {
        //        this.$('.row.routing-type, .row.retry-interval').hide();
        //    } else {
        //        this.$('.row.routing-type, .row.retry-interval').show();
        //    }
        //});
        this.listenTo(this.model, 'change:widgetType', this.showHideNameRow);
    },

    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        if (!this.model.get('notifyNone')) {
            this.$('.notification-settings').show();
        }
        this.showHideNameRow();
        this.$('#widget-name-adf').val(this.model.get('name'));

        new AgentsView({
            el: this.$('#widget-agents'),
            collection: this.agents,
            excludeGroups: true,
        });

        new NumberSelectView({
            el: this.$('#from-number'),
            settings: this.model
        });

        return this;
    },

    showHideNameRow: function () {
        if (this.model.get('widgetType') == 'adf') {
            this.$('.widget-name-row').show();
        } else {
            this.$('.widget-name-row').hide();
        }
    },

    handleChange: function (evt) {
        WidgetPage.prototype.handleChange.call(this);

        if(evt.target.id === "widget-add-hidden-information"){
            this.$('#widget-hidden-information').prop('disabled', !evt.target.checked);
        }

        if (this.model.get('widgetType') == 'adf' && this.model.has('nameAdf')) {
            this.model.set('name', this.model.get('nameAdf'));
            this.model.unset('nameAdf');
        }

        var retryRouting = [
            this.$('#widget-retry-routing-1').val(),
            this.$('#widget-retry-routing-2').val(),
            this.$('#widget-retry-routing-3').val()
        ];
        this.model.set({
            retryRouting: retryRouting
        });

        this.disableNotifyAdfRecipients();
    },

    handleNotificationsChange: function (e) {
        this.model.set('notifyNone', !e.currentTarget.checked);
        if (this.model.get('notifyNone')) {
            this.$('.notification-settings').hide();
        } else {
            this.$('.notification-settings').show();
        }
    },

    handleAddAgentClick: function (e) {
        $('#new-agent-modal').modal();
        new AgentCreationModalView({
            el: '#new-agent-modal',
            collection: this.agents,
        });
    },

    disableNotifyAdfRecipients: function () {
        var loNotifyAdf = $('#widget-notify-adf').is(':checked');

        if (loNotifyAdf) {
            //enable text area
            $('#widget-notify-adf-custom').prop('disabled', false);

        } else {
            //disable text area
            $('#widget-notify-adf-custom').prop('disabled', true);
        }
    },
});

var UnavailabilityView = WidgetPage.extend({
    template: unavailabilityTemplate
});

var TriggerView = WidgetPage.extend({
    className: 'widget-type',
    template: triggerTemplate,

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

        var pages = this.model.get('pages') || [];

        this.pagesColl = new Backbone.Collection(
            pages.map((url) => new Backbone.Model({
                url: url,
                id: _.uniqueId()
            }))
        );
        this.listenTo(this.pagesColl, 'add remove', () => {
            this.model.set('pages', this.pagesColl.toJSON().map(
                (model) => model.url
            ));
        });
        this.listenTo(this.model, 'change:triggerBasedOnTime', (model, val) => {
            this.$('#widget-trigger-interval').prop('disabled', !val);
        });
        this.listenTo(this.model, 'change:triggerBasedOnPage', (model, val) => {
            this.$('#widget-trigger-page-interval').prop('disabled', !val);
        });

        this.render();
    },

    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        new PagesView({ collection: this.pagesColl }).$el.appendTo(
            this.$('#pages-container')
        );

        return this;
    }
});


module.exports = {
    SelectTypeView,
    BeforeCallView,
    StartingCallView,
    CallSettingsView,
    UnavailabilityView,
    TriggerView,
};