define([
    'newsletter_editor/App',
    'newsletter_editor/components/communication',
    'mailpoet',
    'backbone',
    'backbone.marionette',
    'backbone.supermodel',
    'underscore',
    'jquery',
    'sticky-kit'
  ], function(
    App,
    CommunicationComponent,
    MailPoet,
    Backbone,
    Marionette,
    SuperModel,
    _,
    jQuery,
    StickyKit
  ) {

  "use strict";

  var Module = {};

  // Widget handlers for use to create new content blocks via drag&drop
  Module._contentWidgets = new (Backbone.Collection.extend({
    model: SuperModel.extend({
      defaults: {
        name: '',
        priority: 100,
        widgetView: undefined
      }
    }),
    comparator: 'priority'
  }))();
  Module.registerWidget = function(widget) { return Module._contentWidgets.add(widget); };
  Module.getWidgets = function() { return Module._contentWidgets; };

  // Layout widget handlers for use to create new layout blocks via drag&drop
  Module._layoutWidgets = new (Backbone.Collection.extend({
    model: SuperModel.extend({
      defaults: {
        name: '',
        priority: 100,
        widgetView: undefined
      }
    }),
    comparator: 'priority'
  }))();
  Module.registerLayoutWidget = function(widget) { return Module._layoutWidgets.add(widget); };
  Module.getLayoutWidgets = function() { return Module._layoutWidgets; };

  var SidebarView = Marionette.View.extend({
    getTemplate: function() { return templates.sidebar; },
    regions: {
      contentRegion: '.mailpoet_content_region',
      layoutRegion: '.mailpoet_layout_region',
      stylesRegion: '.mailpoet_styles_region',
      previewRegion: '.mailpoet_preview_region'
    },
    events: {
      'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function(event) {
        var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)'),
          $targetRegion = this.$el.find(event.target).closest('.mailpoet_sidebar_region');

        $openRegion.find('.mailpoet_region_content').velocity(
          'slideUp',
          {
            duration: 250,
            easing: "easeOut",
            complete: function() {
              $openRegion.addClass('closed');
            }.bind(this)
          }
        );

        if ($openRegion.get(0) !== $targetRegion.get(0)) {
          $targetRegion.find('.mailpoet_region_content').velocity(
            'slideDown',
            {
              duration: 250,
              easing: "easeIn",
              complete: function() {
                $targetRegion.removeClass('closed');
              }
            }
          );
        }
      }
    },
    initialize: function(options) {
      jQuery(window)
        .on('resize', this.updateHorizontalScroll.bind(this))
        .on('scroll', this.updateHorizontalScroll.bind(this));
    },
    onRender: function() {
      this.showChildView('contentRegion', new Module.SidebarWidgetsView(
        App.getWidgets()
      ));
      this.showChildView('layoutRegion', new Module.SidebarLayoutWidgetsView(
        App.getLayoutWidgets()
      ));
      this.showChildView('stylesRegion', new Module.SidebarStylesView({
        model: App.getGlobalStyles(),
        availableStyles: App.getAvailableStyles()
      }));
      this.showChildView('previewRegion', new Module.SidebarPreviewView());
    },
    updateHorizontalScroll: function() {
      // Fixes the sidebar so that on narrower screens the horizontal
      // position of the sidebar would be scrollable and not fixed
      // partially out of visible screen
      this.$el.parent().each(function () {
        var calculated_left, self;

        self = jQuery(this);

        if (self.css('position') === 'fixed') {
          calculated_left = self.parent().offset().left - jQuery(window).scrollLeft();
          self.css('left', calculated_left + 'px');
        } else {
          self.css('left', '');
        }
      });
    },
    onDomRefresh: function() {
      this.$el.parent().stick_in_parent({
        offset_top: 32
      });
      this.$el.parent().on('sticky_kit:stick', this.updateHorizontalScroll.bind(this));
      this.$el.parent().on('sticky_kit:unstick', this.updateHorizontalScroll.bind(this));
      this.$el.parent().on('sticky_kit:bottom', this.updateHorizontalScroll.bind(this));
      this.$el.parent().on('sticky_kit:unbottom', this.updateHorizontalScroll.bind(this));
    }
  });

  /**
   * Draggable widget collection view
   */
  Module.SidebarWidgetsCollectionView = Marionette.CollectionView.extend({
    childView: function(item) { return item.get('widgetView'); }
  });

  /**
   * Responsible for rendering draggable content widgets
   */
  Module.SidebarWidgetsView = Marionette.View.extend({
    getTemplate: function() { return templates.sidebarContent; },
    regions: {
      widgets: '.mailpoet_region_content'
    },

    initialize: function(widgets) {
      this.widgets = widgets;
    },

    onRender: function() {
      this.showChildView('widgets', new Module.SidebarWidgetsCollectionView({
        collection: this.widgets
      }));
    }
  });

  /**
   * Responsible for rendering draggable layout widgets
   */
  Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
    getTemplate: function() { return templates.sidebarLayout; }
  });

  /**
   * Responsible for managing global styles
   */
  Module.SidebarStylesView = Marionette.View.extend({
    getTemplate: function() { return templates.sidebarStyles; },
    behaviors: {
      ColorPickerBehavior: {}
    },
    events: function() {
      return {
        "change #mailpoet_text_font_color": _.partial(this.changeColorField, 'text.fontColor'),
        "change #mailpoet_text_font_family": function(event) {
          this.model.set('text.fontFamily', event.target.value);
        },
        "change #mailpoet_text_font_size": function(event) {
          this.model.set('text.fontSize', event.target.value);
        },
        "change #mailpoet_h1_font_color": _.partial(this.changeColorField, 'h1.fontColor'),
        "change #mailpoet_h1_font_family": function(event) {
          this.model.set('h1.fontFamily', event.target.value);
        },
        "change #mailpoet_h1_font_size": function(event) {
          this.model.set('h1.fontSize', event.target.value);
        },
        "change #mailpoet_h2_font_color": _.partial(this.changeColorField, 'h2.fontColor'),
        "change #mailpoet_h2_font_family": function(event) {
          this.model.set('h2.fontFamily', event.target.value);
        },
        "change #mailpoet_h2_font_size": function(event) {
          this.model.set('h2.fontSize', event.target.value);
        },
        "change #mailpoet_h3_font_color": _.partial(this.changeColorField, 'h3.fontColor'),
        "change #mailpoet_h3_font_family": function(event) {
          this.model.set('h3.fontFamily', event.target.value);
        },
        "change #mailpoet_h3_font_size": function(event) {
          this.model.set('h3.fontSize', event.target.value);
        },
        "change #mailpoet_a_font_color": _.partial(this.changeColorField, 'link.fontColor'),
        "change #mailpoet_a_font_underline": function(event) {
          this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
        },
        "change #mailpoet_newsletter_background_color": _.partial(this.changeColorField, 'wrapper.backgroundColor'),
        "change #mailpoet_background_color": _.partial(this.changeColorField, 'body.backgroundColor')
      };
    },
    templateContext: function() {
      return {
        model: this.model.toJSON(),
        availableStyles: this.availableStyles.toJSON()
      };
    },
    initialize: function(options) {
      this.availableStyles = options.availableStyles;
    },
    changeField: function(field, event) {
      this.model.set(field, jQuery(event.target).val());
    },
    changeColorField: function(field, event) {
      var value = jQuery(event.target).val();
      if (value === '') {
        value = 'transparent';
      }
      this.model.set(field, value);
    }
  });

  Module.SidebarPreviewView = Marionette.View.extend({
    getTemplate: function() { return templates.sidebarPreview; },
    events: {
      'click .mailpoet_show_preview': 'showPreview',
      'click #mailpoet_send_preview': 'sendPreview'
    },
    onBeforeDestroy: function() {
      if (this.previewView) {
        this.previewView.destroy();
        this.previewView = null;
      }
    },
    showPreview: function() {
      var json = App.toJSON();

      // Stringify to enable transmission of primitive non-string value types
      if (!_.isUndefined(json.body)) {
        json.body = JSON.stringify(json.body);
      }

      MailPoet.Modal.loading(true);

      MailPoet.Ajax.post({
        api_version: window.mailpoet_api_version,
        endpoint: 'newsletters',
        action: 'showPreview',
        data: json
      }).always(function() {
        MailPoet.Modal.loading(false);
      }).done(function(response) {
        this.previewView = new Module.NewsletterPreviewView({
          previewUrl: response.meta.preview_url
        });

        var view = this.previewView.render();
        this.previewView.$el.css('height', '100%');
 
        MailPoet.Modal.popup({
          template: '',
          element: this.previewView.$el,
          width: '95%',
          height: '94%',
          title: MailPoet.I18n.t('newsletterPreview'),
          onCancel: function() {
            this.previewView.destroy();
            this.previewView = null;
          }.bind(this)
        });
      }.bind(this)).fail(function(response) {
        if (response.errors.length > 0) {
          MailPoet.Notice.error(
            response.errors.map(function(error) { return error.message; }),
            { scroll: true }
          );
        }
      });
    },
    sendPreview: function() {
      // get form data
      var $emailField = this.$('#mailpoet_preview_to_email');
      var data = {
        subscriber: $emailField.val(),
        id: App.getNewsletter().get('id')
      };

      if (data.subscriber.length <= 0) {
        MailPoet.Notice.error(
          MailPoet.I18n.t('newsletterPreviewEmailMissing'),
          {
            positionAfter: $emailField,
            scroll: true
          }
        );
        return false;
      }

      // send test email
      MailPoet.Modal.loading(true);

      // save before sending
      var saveResult = {promise: null};
      App.getChannel().trigger('save', saveResult);

      saveResult.promise.always(function() {
        CommunicationComponent.previewNewsletter(data).always(function() {
          MailPoet.Modal.loading(false);
        }).done(function(response) {
          MailPoet.Notice.success(
            MailPoet.I18n.t('newsletterPreviewSent'),
            { scroll: true });
        }).fail(function(response) {
          if (response.errors.length > 0) {
            MailPoet.Notice.error(
              response.errors.map(function(error) { return error.message; }),
              { scroll: true, static: true }
            );
          }
        });
      });
    }
  });

  Module.NewsletterPreviewView = Marionette.View.extend({
    getTemplate: function() { return templates.newsletterPreview; },
    initialize: function(options) {
      this.previewUrl = options.previewUrl;
      this.width = '100%';
      this.height = '100%';
      // this.width = App.getConfig().get('newsletterPreview.width');
      // this.height = App.getConfig().get('newsletterPreview.height')
    },
    templateContext: function() {
      return {
        previewUrl: this.previewUrl,
        width: this.width,
        height: this.height
      };
    }
  });

  App.on('before:start', function(App, options) {
    App.registerWidget = Module.registerWidget;
    App.getWidgets = Module.getWidgets;
    App.registerLayoutWidget = Module.registerLayoutWidget;
    App.getLayoutWidgets = Module.getLayoutWidgets;
  });

  App.on('start', function(App, options) {
    var stylesModel = App.getGlobalStyles(),
      sidebarView = new SidebarView();

    App._appView.showChildView('sidebarRegion', sidebarView);
  });

  return Module;
});