/**
 Widget to display live editor of label / input
 Will fire LIVE_INPUT_CHANGED on data changed and also will fire a custom event
 if one was give via options.customEvent
 Powered by the awesome validator: https://github.com/chriso/validator.js
 @class LiveInput
 @constructor
 @return {object} instantiated LiveInput
 **/
define(['jquery', 'backbone', 'validator'], function ($, Backbone, validator) {

    var LiveInput = Backbone.View.extend({

        /**
         Constructor
         @method initialize
         **/
        initialize: function (options) {
            var self = this;
            self.m_validator = validator;
            self.m_validationRules = {};
            self.LIVE_INPUT_CHANGED = 'LIVE_INPUT_CHANGED';
            self.LIVE_INPUT_VALID_ERROR = 'LIVE_INPUT_VALID_ERROR';
            self.m_options = options;
            self.m_prevValue = self.m_options.value;
            var snippet = '<div>';
            snippet += '        <h5 class="liveInput" data-toggle="popover" data-placement="auto right" data-trigger="manual" data-content="">' + self.m_options.value + '</h5>';
            snippet += '        <a class="liveInputLink"><i style="color: gray" class="fa fa-pencil"></i></a>';
            snippet += '        <input class="liveInputRename" type="text" data-localize="' + self.m_options.dataLocalize + '" placeholder="' + self.m_options.placeHolder + '" value="">';
            snippet += '   </div>';

            self.$el.append(snippet);
            self.m_value = 0;
            self.m_liveRename = self.$('.liveInput');
            self.m_liveRenameInput = self.$('.liveInputRename');
            self._listenRename();
            self._extendValidator();
        },

        /**
         Adding our own validation rules
         @method _extendValidator
         @return {Boolean} pass or fail
         **/
        _extendValidator: function () {
            var self = this;
            validator.extend('noEmpty', function (str) {
                return !(_.isUndefined(str) || _.isNull(str) || str.trim().length === 0)
            });
            validator.extend('isNumberInRange', function (str, opts) {
                str = Number(str);
                if (_.isNaN(str))
                    return false;
                if (str < opts.min || str > opts.max)
                    return false;
                return true;
            });
        },

        /**
         Listen to up button increasing meters
         @method _listenUp
         **/
        _listenRename: function () {
            var self = this;
            self.m_faIcon = self.$el.find('i');
            self.$el.on('mousedown mouseup', function (e) {
                // if mouse up, just give focus to control
                if (e.type == "mouseup") {
                    self.m_liveRenameInput.focus();
                    return;
                }
                // already in edit mode, return since blur will kick next
                if (!self.m_faIcon.hasClass('fa-pencil'))
                    return;

                // on entering edit mode
                self.m_liveRenameInput.show();
                self.m_liveRename.hide();
                self.m_faIcon.removeClass('fa-pencil').addClass('fa-check');
                var value = self.m_liveRename.text();
                self.m_liveRenameInput.prop('value', value);

                // on entering view mode
                self.m_liveRenameInput.one('blur', function (e) {
                    var value = self.m_liveRenameInput.prop('value');
                    self.m_faIcon.removeClass('fa-check').addClass('fa-pencil');
                    self.m_liveRename.text(value);
                    self.m_liveRenameInput.toggle();
                    self.m_liveRename.toggle();
                    self.setValue(value, true, true);
                });
            });
        },

        /**
         Validate against all the given rules per instance
         @method _validated
         @param {Number} i_value
         @return {Array} status of array of error messages
         **/
        _validated: function (i_value) {
            var self = this;
            var errors = [];
            _.forEach(self.m_validationRules, function (rule, v) {
                var func = rule[0];
                var err = rule[1];
                var opts = rule[2];
                var value = i_value;
                if (func)
                    if (func(value, opts) == false)
                        errors.push(err);
            });

            if (errors.length > 0) {
                self.trigger(self.LIVE_INPUT_VALID_ERROR, errors);
                self.m_liveRename.attr('data-content', errors[0]);
                //self.m_liveRename.attr('data-content', 'hello world');
                self.m_liveRename.popover('show');
                setTimeout(function () {
                    self.m_liveRename.popover('hide');
                }, 3000);
            }
            return errors;
        },

        /**
         Return the validator object so caller can reference the isXXX functions as validation rules
         @method getValidator
         @return {Object} validator object
         **/
        getValidator: function () {
            var self = this;
            return self.m_validator;
        },

        /**
         Enable validation via config object
         @method rules
         @param {Object} the config objects uses a AND rule and so ALL rules must match for no error message to display.
         if any error we return it in the array of errors.
         **/
        rules: function (i_validationRules) {
            var self = this;
            self.m_validationRules = i_validationRules;
        },

        /**
         Get current input value
         @method getValue
         @return {String} value
         **/
        getValue: function () {
            return self.m_prevValue;
        },

        /**
         Set value and announce the change
         only announce if set to true
         @method _listenUp
         @params {String} i_value
         @params {Boolean} i_announce
         @params {Boolean} i_ignoreValidation
         **/
        setValue: function (i_value, i_announce, i_validate) {
            var self = this;
            if (i_value == self.m_prevValue)
                return;
            var edata = {
                value: i_value,
                preValue: self.m_prevValue,
                el: self.m_options.el
            };

            // check for validation errors
            if (i_validate) {
                var errors = self._validated(i_value);
                if (errors.length > 0) {
                    self.m_liveRename.text(self.m_prevValue);
                    return errors;
                }
            }

            self.m_prevValue = i_value;
            self.m_liveRename.text(i_value);

            if (!i_announce)
                return;
            self.trigger(self.LIVE_INPUT_CHANGED, edata);
            if (self.m_options.customEvent)
                BB.comBroker.fire(self.m_options.customEvent, self, self, edata);
        }
    });

    return LiveInput;
});