(function (global, $, _, Backbone) {
  var FormSubmit, FormSubmitModel,
      allowed_sizes = {
        min: 1,
        max: 3
      };

  FormSubmitModel = AMOFORMS.core.form.Model.extend({
    save: function (options) {
      $.ajax({
        url: ajaxurl,
        data: _.extend({
          action: AMOFORMS.ajax_action_prefix + 'update_submit_button',
          'form[id]': this.form_id,
        }, this.toJSON()),
        dataType: 'json',
        type: 'POST'
      })
      .done(_.bind(function (res) {
        if (res.result) {
          (options.success || function () {})(res, this);
        } else {
          (options.error || function () {})(res, this);
        }
      }, this))
      .fail(_.bind(function () {
        (options.error || function () {})(res, this);
      }));
    },
  });

  FormSubmit = Backbone.View.extend({
    selectors: {
      submit_btn: '.amoforms__fields__row__submit',
      edit_submit: '.amoforms__fields__edit-submit',
      form: '.amoforms__fields__edit',
      actions: '.amoforms__fields__edit__actions',
      size_input: '[name="form[settings][submit][size]"]',
      size_btns: '.amoforms__size-btn',
      color_picker: '.amoforms__colorpicker',
    },

    events: {
      'click .amoforms__fields__editor__row__actions__action-edit': 'setEdit',
      'click .js-amoforms-field-save': 'saveClick',
      'click .js-amoforms-field-cancel': 'cancelEdit',
      'blur [name="form[settings][submit][text]"]': 'checkError',
      'input [name="form[settings][submit][text]"]': 'clearError',
      'click .amoforms__size-btn': 'clickOnSize',
    },

    initialize: function (options) {
      var $colorpicker = this.$(this.selectors['edit_submit'] + ' .amoforms__colorpicker'),
          color = $colorpicker.val();

      this.form = new AMOFORMS.core.form.View({
        el: this.$(this.selectors['form']),
        Model: FormSubmitModel
      });

      this.form.model.form_id = options.form_id;

      this.form.model.on('change', _.bind(function (model) {
        this.renderChange(_.map(model.changed, function (value, key) {
          return {
            key: /form\[settings\]\[submit\]\[([\w\d]+)\]/gi.exec(key)[1] || '',
            value: value
          };
        }));
      }, this));

      $colorpicker.ColorPicker({
        color: color,
        onChange: function (rgb, hex_color) {
          if (hex_color !== 'transparent') {
            hex_color = '#' + hex_color;
          }

          $colorpicker
            .css({
              color: hex_color,
              backgroundColor: hex_color
            })
            .val(hex_color)
            .trigger('input');
        }
      });
    },

    setButtonColor: function (color) {
      this.$(this.selectors['submit_btn']).css('color', AMOFORMS.core.fn.isDarkColor(color) ? '#fff' : '#2a3640');
    },

    renderChange: function (changed_values) {
      _.each(changed_values, function (changed) {
        switch (changed.key) {
          case 'text':
            this.$(this.selectors['submit_btn']).text(changed.value);
            break;

          case 'color':
            this.$(this.selectors['submit_btn']).css({ backgroundColor: changed.value });
            this.$(this.selectors['color_picker']).css({ color: changed.value });
            this.$(this.selectors['color_picker']).css({ backgroundColor: changed.value });
            this.setButtonColor(changed.value);
            break;

          case 'size':
            this.$(this.selectors['submit_btn']).attr('data-size', changed.value);
            break;
        }
      }, this);
    },

    /* DOM-events */
    setEdit: function () {
      this.$el.addClass('in-edit');
      this.form.show();

      $(document.body).animate({
        scrollTop: this.$el.offset().top - 40
      }, 300);
    },

    cancelEdit: function (e) {
      if (e && e.preventDefault) {
        e.preventDefault();
      }

      this.$el.removeClass('in-edit');
      this.form.model.set(this.form.model.defaults);
      this.form.revert();
      this.form.hide();
    },

    checkError: function (e) {
      var $this = $(e.currentTarget);

      if (!$this.val()) {
        $this.addClass('error');
      } else {
        $this.removeClass('error');
      }
    },

    clearError: function (e) {
      $(e.currentTarget).removeClass('error');
    },

    clickOnSize: function (e) {
      var $this = $(e.currentTarget),
          current_val = parseInt(this.form.model.get('form[settings][submit][size]'), 10);

      current_val = current_val + ($this.attr('data-type') == 'plus' ? 1 : -1);

      if (current_val >= allowed_sizes.max) {
        this.$(this.selectors['size_btns'] + '[data-type="plus"]').addClass('disabled');
        this.$(this.selectors['size_btns'] + '[data-type="minus"]').removeClass('disabled');
      } else {
        this.$(this.selectors['size_btns'] + '[data-type="plus"]').removeClass('disabled');
      }
      if (current_val <= allowed_sizes.min) {
        this.$(this.selectors['size_btns'] + '[data-type="plus"]').removeClass('disabled');
        this.$(this.selectors['size_btns'] + '[data-type="minus"]').addClass('disabled');
      } else {
        this.$(this.selectors['size_btns'] + '[data-type="minus"]').removeClass('disabled');
      }
      if (current_val > allowed_sizes.max ||
          current_val < allowed_sizes.min
      ) {
        return;
      }

      this.$(this.selectors['size_input']).val(current_val).trigger('input');
    },
    /* end of DOM-events */

    saveClick: function (options) {
      this.form.save({
        success: _.bind(function () {
          this.cancelEdit();
        }, this),
        error: _.bind(function () {
          this.$(this.selectors['actions']).addClass('animated shake');

          _.delay(_.bind(function () {
            this.$(this.selectors['actions']).removeClass('shake');
          }, this), 800);
        }, this),
      });
    },
  });

  global.AMOFORMS = $.extend(true, global.AMOFORMS || {}, {
    views: {
      submit: FormSubmit
    }
  });
}(window, jQuery, _, Backbone));