(function (global, $, Backbone, _) {
  'use strict';

  var PageView, SidebarView, FieldsView,
      prepareField = function (field) {
        var attrs = {};
        _.each(field, function (value, key) {
          attrs[key.replace(/field\[(.*)\]/gi, '$1')] = value;
        });
        return attrs;
      };

  SidebarView = Backbone.View.extend({
    selectors: {
      item: '.amoforms__fields__rightside__item',
      item_head: '.amoforms__fields__rightside__item__head',
      fields: '.amoforms__fields__rightside__item__content__fields'
    },

    events: {
      'click .amoforms__fields__rightside__item:not(.expanded)': 'itemToggle',
      'click .amoforms__fields__rightside__item__content__fields__field': 'addNewFieldClick',
      'focus .js-amoforms-shortcode': 'selectOnFocus',
      'mouseup .js-amoforms-shortcode': 'selectOnMouseUp',
    },

    initialize: function () {
      this.itemToggle({
        currentTarget: this.$(this.selectors['item'] + ':first')
      });

      this.items_new = new Sortable(this.$(this.selectors['fields'])[0], {
        group: {
          name: 'fields',
          put: false,
          pull: 'clone'
        },
        scroll: this.$('.amoforms__fields__rightside__item__head:first')[0],
        scrollSensitivity: 100,
        scrollSpeed: 20,
        sort: false,
        onMove: _.bind(function (e) {
          var $dragEl = $(e.dragged);
          if ($dragEl.find('[data-type="captcha"]').length > 0 && $dragEl.find('[data-type="captcha"]').attr('data-active') == 'false') {
            return;
          }
          $dragEl.find('.amoforms__fields__row').remove();

          $dragEl.append(this.generateField({
            type: $dragEl.find('.amoforms__fields__rightside__item__content__fields__field').attr('data-type'),
            class_name: 'sortable-ghost'
          }));
        }, this),

        onEnd: _.bind(function (e) {
          var $dragEl = $(e.item),
              type = $dragEl.find('.amoforms__fields__rightside__item__content__fields__field').attr('data-type');

          if (!$dragEl.closest(this.selectors['fields']).length) {
            AMOFORMS.app.createField({
              type: type,
              position: $dragEl.index(),
              success: _.bind(function (res) {
                var $new_field = this.generateField({
                  field: res.field,
                  type: type
                });

                $dragEl.before($new_field);
                $dragEl.remove();

                AMOFORMS.app.addField($new_field);
                if (type == 'captcha') {
                  $('[data-type="captcha"]').attr('data-active', 'false');
                }
              }, this)
            });
          }
        }, this)
      });
    },

    /* DOM-events */
    addNewFieldClick: function (e) {
      var type = $(e.currentTarget).attr('data-type');
      if (type == 'captcha' && $(e.currentTarget).attr('data-active') == 'false') {
        return;
      }
      AMOFORMS.app.createField({
        type: type,
        position: AMOFORMS.app.fields.$('.js-fields-sortable .amoforms__fields__row').length,
        success: _.bind(function (res) {
          var $new_field = this.generateField({
            field: res.field,
            type: type
          });

          AMOFORMS.app.fields.$('.js-fields-sortable').append($new_field);

          AMOFORMS.app.addField($new_field);
          if (type == 'captcha') {
            $('[data-type="captcha"]').attr('data-active', 'false');
          }
        }, this)
      });
    },

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

      this
        .$(this.selectors['item'] + '.expanded')
        .removeClass('expanded')
        .find('.amoforms__fields__rightside__item__content')
        .css('min-height', '');

      $this
        .addClass('expanded')
        .find($this.find('.amoforms__fields__rightside__item__content'))
        .css('min-height', $this.find('.amoforms__fields__rightside__item__content__inner')[0].offsetHeight);
    },

    selectOnMouseUp: function (e) {
      setTimeout(function () {
        $(e.currentTarget).select();
      }, 30);
    },
    /* end of DOM-events */

    generateField: function (options) {
      var render_params;

      options = options || {};

      render_params = {
        class_name: options.class_name,
        edit_mode: true,
        field_id: (options.field && options.field.id) ? options.field.id : 999,
        field: options.field || { name: options.type.charAt(0).toUpperCase() + options.type.slice(1) },
        is_pos_after: options.field ? options.field.description_position == AMOFORMS.consts.pos_after : '',
        is_layout_inline: options.field ? options.field.layout == AMOFORMS.consts.layout_inline : '',
        consts: AMOFORMS.consts
      };
      render_params['name_position_' + AMOFORMS.app.$('.amoforms__fields__settings__btn[data-type="name-position"]').attr('data-value')] = true;
      render_params['is_' + options.type] = true;

      return $(Mustache.render(AMOFORMS.templates.field_in_edit, render_params, AMOFORMS.templates.partials));
    },
  });

  FieldsView = Backbone.View.extend({
    selectors: {
      field: '.amoforms__fields__row',
      submit: '.amoforms__fields__row-submit',
      edit_form: '.amoforms__fields__edit',
      settings: '.amoforms__fields__settings',
    },

    initialize: function () {
      var _this = this;

      this.form_id = this.$el.attr('data-form-id');

      this.initSubmit();

      this.settings = new AMOFORMS.views.settings({
        el: this.$(this.selectors['settings']),
        form_id: this.form_id,
        $fields: this.$el,
        submit: this.submit
      });

      this.$('.js-fields-sortable ' + this.selectors['field']).each(function() {
        _this.addField($(this));
      });

      this.items_sort = new Sortable(this.$el.find('.js-fields-sortable')[0], {
        group: 'fields',
        handle: '.amoforms__fields__row-view',
        animation: 150,
        draggable: this.selectors['field'],
        filter: '.amoforms__fields__row-submit',
        scroll: this.$(this.selectors['settings'])[0],
        scrollSensitivity: 100,
        scrollSpeed: 20,

        // setData: _.bind(function (dataTransfter, dragEl) {
          // var $dragEl = $(dragEl).addClass('drag-started');

          // if ($dragEl.find(this.selectors['edit_form']).is(':visible')) {
          //   $dragEl
          //     .addClass('drag-hidden')
          //     .find(this.selectors['edit_form'])
          //     .hide();
          // }

          // this.$el.addClass('drag-sorting');
        // }, this),

        onEnd: _.bind(function (e) {
          var $dragEl = $(e.item).removeClass('drag-started'),
              view, fields = [];

          if ($dragEl.hasClass('drag-hidden')) {
            $dragEl
              .removeClass('drag-hidden')
              .find(this.selectors['edit_form'])
              .show();
          }

          this.$('.js-fields-sortable .amoforms__fields__row').each(function () {
            view = $(this).data('view');
            fields.push(prepareField(view.form.model.toJSON()));
          });

          $.ajax({
            url: ajaxurl,
            data: {
              action: AMOFORMS.ajax_action_prefix + 'update_fields',
              form: {
                id: this.form_id,
                fields: fields
              },
            },
            dataType: 'json',
            type: 'POST'
          });

          this.$el.removeClass('drag-sorting');
        }, this),
      });
    },

    addField: function ($el) {
      var view = new AMOFORMS.views.field({
        el: $el,
        form_id: this.form_id,
      });

      $el.data('view', view);

      return view;
    },

    initSubmit: function () {
      this.submit = new AMOFORMS.views.submit({
        el: this.$(this.selectors['submit']),
        form_id: this.form_id
      });
    }
  });

  PageView = Backbone.View.extend({
    events: {
      'click #delete_form': 'deleteFormClick',
      'click #duplicate_form': 'duplicateFormClick',
    },

    sendRequest: function (action, error) {
      $.post(
        ajaxurl,
        {
          action: AMOFORMS.ajax_action_prefix + action,
          form: {
            id: this.fields.form_id
          }
        },
        function (res) {
          if (!res.form_url) {
            error();
          } else {
            window.location = res.form_url;
          }
        }
      );
    },

    initialize: function () {
      this.sidebar = new SidebarView({ el: $('#amoforms_sidebar') });
      this.fields = new FieldsView({ el: $('#amoforms_fields') });
    },

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

      $this[0].blur();

      new AMOFORMS.core.confirm({
        template_params: {
          caption: 'Are you sure you want to delete form?',
          accept_btn: 'Yes',
          decline_btn: 'No'
        },
        accept: _.bind(function (confirm) {
          this.sendRequest('delete_form', _.bind(function () {
            this.shakeError($this);
          }, this));

          confirm.done();
        }, this),
      });
    },

    duplicateFormClick: function (e) {
      this.sendRequest('duplicate_form', function () {
        this.shakeError($(e.currentTarget));
      });
    },

    shakeError: function ($el) {
      $el.addClass('animated shake');
      setTimeout(function () {
        $el.removeClass('animated shake');
      }, 800);
    },

    duplicateField: function ($field_el, field_id) {
      var fail = function () {
            $field_el.find('.amoforms__fields__editor__row__actions').addClass('visible animated shake');

            _.delay(function () {
              $field_el.find('.amoforms__fields__editor__row__actions').removeClass('visible animated shake');
            }, 800);
          };

      if (this.duplicate_wip) {
        return;
      }
      this.duplicate_wip = true;

      $.ajax({
        url: ajaxurl,
        data: {
          action: AMOFORMS.ajax_action_prefix + 'duplicate_field',
          form: {
            id: this.fields.form_id,
          },
          field: {
            id: field_id
          }
        },
        dataType: 'json',
        type: 'POST'
      })
      .always(_.bind(function () {
        this.duplicate_wip = false;
      }, this))
      .done(_.bind(function (res) {
        if (res.result) {
          $field_el.after(this.addField(this.sidebar.generateField({
            field: res.field,
            type: res.field.type
          })).$el);
        } else {
          fail();
        }
      }, this))
      .fail(_.bind(function (res) {
        fail();
      }, this));
    },

    createField: function (options) {
      if (this.create_wip) {
        return;
      }
      this.create_wip = true;

      $.ajax({
        url: ajaxurl,
        data: {
          action: AMOFORMS.ajax_action_prefix + 'add_field',
          form: {
            id: this.fields.form_id,
          },
          field: {
            type: options.type,
            position: options.position
          }
        },
        dataType: 'json',
        type: 'POST'
      })
      .always(_.bind(function () {
        this.create_wip = false;
      }, this))
       .done(_.bind(function (res) {
        if (res.result) {
          (options.success || function () {})(res);
        } else {
          (options.fail || function () {})(res);
        }
      }, this))
      .fail(_.bind(function (res) {
        (options.fail || function () {})(res);
      }, this));
    },

    addField: function ($el) {
      return this.fields.addField($el);
    }
  });

  $(function () {
    global.AMOFORMS.app = new PageView({ el: $('#amoforms') });
  });

  global.AMOFORMS = $.extend(true, global.AMOFORMS || {}, {
    ajax_action_prefix: 'amoforms_',
    views: {
      page: PageView,
      sidebar: SidebarView,
      fields: FieldsView
    }
  });
}(window, jQuery, Backbone, _));