/* jshint esversion: 6 */

const Backbone = require('backbone');
const utils = require('../utils');
const whisperMessageTemplate = require('./templates/whisper_message.tpl');

const MAX_FILE_SIZE = 4 * 1024 * 1024;

/**
 * Defines change events for a 'whisper message' control.
 * The control is made up of two sections: a <textarea> defining the text-to-speech
 * message to be whispered to the caller, or a <input type="file"> used for uploading
 * a custom audio message.
 * The HTML for the control should be defined separately; for an example, see
 * step_call_routing.jinja2.
 */
var WhisperMessageView = Backbone.View.extend({
    events: {
        'change textarea': 'handleTextChange',
        'change input[type=radio]': 'handleRadioChange',
        'change input[type=file]': 'handleFileChange',
    },

    template: whisperMessageTemplate,

    initialize: function () {
        this.fieldId = this.$el.attr('id').replace('-container', '');
        this.baseFieldName = utils.idToPropertyName(this.fieldId);

        this.render();
    },

    render: function () {
        this.$el.html(this.template({}));
        this.$('.main-label').text(this.$el.attr('data-label'));
        this.$('input[type=radio]').attr('name', this.fieldId + '-type');
        this.$('textarea').attr('id', this.fieldId);
        this.$('textarea').attr('placeholder', this.$el.attr('data-placeholder'));
        this.$('textarea').each((i, el) => {
            el.value = this.model.get(this.baseFieldName);
        });
        this.$('input[type=radio]').each((i, el) => {
            const fieldName = utils.idToPropertyName(el.name);
            el.checked = (this.model.get(fieldName) === el.value);
        });

        this.showHideSections();
        this.setupUploadSection();

        return this;
    },

    showHideSections: function () {
        var type = this.model.get(this.baseFieldName + 'Type');
        this.$('div[data-message-type]').hide();
        if (type) {
            this.$('div[data-message-type=' + type + ']').fadeIn();
        }
    },

    handleTextChange: function (e) {
        const fieldName = utils.idToPropertyName(e.target.id);

        this.model.set(fieldName, e.target.value);
    },

    handleRadioChange: function (e) {
        const fieldName = utils.idToPropertyName(e.target.name);

        if (e.target.checked) {
            this.model.set(fieldName, e.target.value);
        }
        this.showHideSections();
    },

    setupUploadSection: function () {
        var that = this;

        this.$('.upload-music').dropzone({
            url: '/api/phonenumbers/audio',

            headers: {
                'X-CSRFToken': $('meta[name="csrf-token"]').attr('content')
            },

            init: function () {
                this.on('addedfile', function (file) {
                    if (file.size > MAX_FILE_SIZE) {
                        utils.flash(__('File size must be < 4 MB.'), 'danger');
                        this.removeAllFiles();
                        return;
                    }
                });
            },

            sending: function (data, xhr, formData) {
                formData.append('type', that .baseFieldName);
            },

            success: function (file, response, xhr) {
                utils.flash(__('File uploaded successfully.'), 'success');
                that.model.set(that.baseFieldName + 'Audio', response.id);
            },

            error: function (file, response, xhr) {
                utils.flash(__('File upload failed. Please make sure you use a mp3 or wav file format.'), 'danger');
            },

            complete: function () { }
        });
    },
});

module.exports = {
    WhisperMessageView,
};