import App from 'newsletter_editor/App';
import jQuery from 'jquery';
import MailPoet from 'mailpoet';
import Marionette from 'backbone.marionette';

var Module = {};

Module.HistoryView = Marionette.View.extend({
  MAX_HISTORY_STATES: 25,

  elements: {
    redo: null,
    undo: null,
  },

  events: {
    'click #mailpoet-history-arrow-undo': 'undo',
    'click #mailpoet-history-arrow-redo': 'redo',
  },

  model: {
    states: [], // from newest
    currentStateIndex: 0,
  },

  getTemplate: function getTemplate() {
    return window.templates.history;
  },

  initialize: function initialize() {
    App.getChannel().on('afterEditorSave', this.setCurrentState, this);
  },

  onAttach: function onRender() {
    this.elements.redo = jQuery('#mailpoet-history-arrow-redo');
    this.elements.undo = jQuery('#mailpoet-history-arrow-undo');
    this.setCurrentState(App.toJSON());
  },

  setCurrentState: function setCurrentState(json) {
    if (!json || !json.body) {
      return;
    }
    if (this.model.currentStateIndex > 0) {
      this.model.states.splice(0, this.model.currentStateIndex);
    }
    this.model.states.unshift(JSON.stringify(json.body));
    this.model.currentStateIndex = 0;
    this.model.states.length = Math.min(this.model.states.length, this.MAX_HISTORY_STATES);
    this.updateArrowsUI();
  },

  canUndo: function canUndo() {
    return this.model.currentStateIndex < (this.model.states.length - 1)
  },

  canRedo: function canRedo() {
    return this.model.currentStateIndex !== 0;
  },

  undo: function undo() {
    if (!this.canUndo()) {
      return;
    }
  },

  redo: function redo() {
    if (!this.canRedo()) {
      return;
    }
  },

  updateArrowsUI: function updateArrowsUI() {
    this.elements.undo.addClass('mailpoet_history_arrow_inactive');
    this.elements.undo.prop('title', MailPoet.I18n.t('canNotUndo'));
    this.elements.redo.addClass('mailpoet_history_arrow_inactive');
    this.elements.redo.prop('title', MailPoet.I18n.t('canNotRedo'));
    if (this.canUndo()) {
      this.elements.undo.removeClass('mailpoet_history_arrow_inactive');
      this.elements.undo.prop('title', MailPoet.I18n.t('canUndo'));
    };
    if (this.canRedo()) {
      this.elements.redo.removeClass('mailpoet_history_arrow_inactive');
      this.elements.redo.prop('title', MailPoet.I18n.t('canRedo'));
    };
  },
});

App.on('start', function appStart(StartApp) {
  StartApp._appView.showChildView('historyRegion', new Module.HistoryView());
});

export default Module;