const $ = require('jquery');
const _ = require('underscore');
const CoreView = require('backbone/core-view');
const Table = require('dashboard/components/table/table');
const templateSQLViewNotice = require('./sql-view-notice.tpl');
const templateSQLLoading = require('./sql-loading.tpl');
const templateEmptySQL = require('./empty-sql.tpl');
const templateTablePaginationLoaders = require('./table-pagination-loaders.tpl');
const RowView = require('./row-view');
const checkAndBuildOpts = require('builder/helpers/required-opts');

const REQUIRED_OPTS = [
  'configModel'
];

module.exports = Table.extend({

  classLabel: 'cdb.admin.TableView',

  events: CoreView.extendEvents({
    'click .clearview': '_clearView',
    'click .sqlview .export_query': '_tableFromQuery',
    'click .noRows': 'addEmptyRow'
  }),

  rowView: RowView,

  initialize: function (opts) {
    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
    Table.prototype.initialize.call(this);
    this.options.row_header = true;
    this.globalError = this.options.globalError;
    this.vis = this.options.vis;
    this.user = this.options.user;
    this._editorsOpened = null;

    this.initializeBindings();

    this.initPaginationAndScroll();
  },

  /**
   * Append all the bindings needed for this view
   * @return undefined
   */
  initializeBindings: function () {
    _.bindAll(this, 'render', 'rowSaving', 'addEmptyRow',
      '_checkEmptyTable', '_forceScroll', '_scrollMagic',
      'rowChanged', 'rowSynched', '_startPagination', '_finishPagination',
      'rowFailed', 'rowDestroyed', 'emptyTable');

    this.model.data().bind('newPage', this.newPage, this);

    // this.model.data().bind('loadingRows', this._startPagination);
    this.model.data().bind('endLoadingRows', this._finishPagination);

    this.bind('cellDblClick', this._editCell, this);
    this.bind('createRow', () => {
      this._checkEmptyTable();
    });

    this.model.bind('change:dataSource', this._onSQLView, this);
    // when model changes the header is re rendered so the notice should be added
    // this.model.bind('change', this._onSQLView, this);
    this.model.bind('dataLoaded', () => {
      // this._checkEmptyTable();
      this._forceScroll();
    }, this);

    this.model.bind('change:permission', this._checkEmptyTable, this);

    this.model.bind('change:isSync', this._swicthEnabled, this);
    this._swicthEnabled();

    // Geocoder binding
    this.options.geocoder.bind('geocodingComplete geocodingError geocodingCanceled', function () {
      this.notice(_t('loaded'));
    }, this);
    this.add_related_model(this.options.geocoder);
  },

  initPaginationAndScroll: function () {
    var topReached = false;
    var bottomReached = false;

    // Initialize moving header and loaders when scrolls
    this.scroll_position = { x: $(window).scrollLeft(), y: $(window).scrollTop(), last: 'vertical' };
    $(window).scroll(this._scrollMagic);

    // Pagination
    var SCROLL_BACK_PIXELS = 2;
    this.checkScrollTimer = setInterval(() => {
      if (!this.$el.is(':visible') || this.model.data().isFetchingPage()) {
        return;
      }
      var pos = $(this).scrollTop();
      var d = this.model.data();
      // do not let to fetch previous pages
      // until the user dont scroll back a little bit
      // see comments below
      if (pos > SCROLL_BACK_PIXELS) {
        topReached = false;
      }
      var pageSize = $(window).height() - this.$el.offset().top;
      var tableHeight = this.$('tbody').height();
      var realPos = pos + pageSize;
      if (tableHeight < pageSize) {
        return;
      }
      // do not let to fetch previous pages
      // until the user dont scroll back a little bit
      // if we dont do this when the user reach the end of the page
      // and there are more rows than max_rows, the rows form the beggining
      // are removed and the scroll keeps at the bottom so a new page is loaded
      // doing this the user have to move the scroll a little bit (2 px)
      // in order to load the page again
      if (realPos < tableHeight - SCROLL_BACK_PIXELS) {
        bottomReached = false;
      }
      if (realPos >= tableHeight) {
        if (!bottomReached) {
          // Simulating loadingRows event
          if (!d.lastPage) this._startPagination('down');

          setTimeout(function () {
            d.loadPageAtBottom();
          }, 600);
        }
        bottomReached = true;
      } else if (pos <= 0) {
        if (!topReached) {
          // Simulating loadingRows event
          if (d.pages && d.pages[0] != 0) this._startPagination('up'); // eslint-disable-line eqeqeq

          setTimeout(function () {
            d.loadPageAtTop();
          }, 600);
        }
        topReached = true;
      }

      this._setUpPagination(d);
    }, 300);
    this.bind('clean', function () {
      clearInterval(this.checkScrollTimer);
    }, this);
  },

  needsRender: function (table) {
    if (!table) return true;
    var ca = table.changedAttributes();
    if (ca.geometry_types && _.keys(ca).length === 1) {
      return false;
    }
    return true;
  },

  render: function (args) {
    if (!this.needsRender(args)) return;
    Table.prototype.render.call(this, args);
    if (this.model.isInSQLView()) {
      this._onSQLView();
    }
    this._swicthEnabled();
    this.trigger('render');
  },

  _renderHeader: function () {
    var thead = Table.prototype._renderHeader.apply(this);
    // New custom shadow (better performance)
    thead.append($('<div>').addClass('shadow'));
    return thead;
  },

  addColumn: function (column) {
    this.newColumnName = 'column_' + new Date().getTime();

    this.model.addColumn(this.newColumnName, 'string');

    this.unbind('render', this._highlightColumn, this);
    this.bind('render', this._highlightColumn, this);
  },

  _highlightColumn: function () {
    if (this.newColumnName) {
      var $th = this.$("a[href='#" + this.newColumnName + "']").parents('th');
      var position = $th.index();

      if (position) {
        setTimeout(function () {
          var windowWidth = $(window).width();
          if ($th && $th.position()) {
            var centerPosition = $th.position().left - windowWidth / 2 + $th.width() / 2;
            $(window).scrollLeft(centerPosition);
          }
          this.$("[data-x='" + position + "']").addClass('is-highlighted');
        }, 300);

        this.unbind('render', this._highlightColumn, this);
      }
    }
  },

  /**
   *  Take care if the table needs space at top and bottom
   *  to show the loaders.
   */
  _setUpPagination: function (d) {
    var pages = d.pages;

    // Check if the table is not in the first page
    if (pages.length > 0 && pages[0] > 0) {
      // In that case, add the paginator-up loader and leave it ready
      // when it is necessary
      if (this.$el.find('tfoot.page_loader.up').length == 0) { // eslint-disable-line eqeqeq
        this.$el.append(templateTablePaginationLoaders({ direction: 'up' }));
      }
      // Table now needs some space at the top to show the loader
      this.$el.parent().addClass('page_up');
    } else {
      // Loader is not needed and table doesn't need any space at the top
      this.$el.parent().removeClass('page_up');
    }

    // Checks if we are in the last page
    if (!d.lastPage) {
      // If not, let's prepare the paginator-down
      if (this.$el.find('tfoot.page_loader.down').length == 0) { // eslint-disable-line eqeqeq
        this.$el.append(templateTablePaginationLoaders({ direction: 'down' }));
      }
      // Let's say to the table that we have paginator-down
      this.$el.parent().addClass('page_down');
    } else {
      // Loader is not needed and table doesn't need any space at the bottom
      this.$el.parent().removeClass('page_down');
    }
  },

  /**
   *  What to do when a pagination starts
   */
  _startPagination: function (updown) {
    // Loader... move on buddy!
    this.$el.find('.page_loader.' + updown + '').addClass('active');
  },

  /**
   *  What to do when a pagination finishes
   */
  _finishPagination: function (page, updown) {
    // If we are in a different page than 0, and we are paginating up
    // let's move a little bit the scroll to hide the loader again
    // HACKY
    if (page != 0 && updown == 'up') { // eslint-disable-line eqeqeq
      setTimeout(function () {
        $(window).scrollTop(180);
      }, 300);
    }

    this.$el.find('.page_loader.active').removeClass('active');
  },

  _onSQLView: function () {
    // bind each time we change dataSource because table unbind
    // all the events from sqlView object each time useSQLView is called
    this.$('.sqlview').remove();

    this.options.sqlView.unbind('reset error', this._renderSQLHeader, this);
    this.options.sqlView.unbind('loading', this._renderLoading, this);

    this.options.sqlView.bind('loading', this._renderLoading, this);
    this.options.sqlView.bind('reset', this._renderSQLHeader, this);
    this.options.sqlView.bind('error', this._renderSQLHeader, this);
    this._renderSQLHeader();
  },

  _renderLoading: function (opts) {
    opts = opts || {};
    this.cleanEmptyTableInfo();
    if (!opts.add) {
      this._renderBodyTemplate(templateSQLLoading);
    }
  },

  _renderSQLHeader: function () {
    if (this.model.isInSQLView()) {
      var empty = this.isEmptyTable();
      this.$('thead').find('.sqlview').remove();
      this.$('thead').append(
        templateSQLViewNotice({
          empty: empty,
          isVisualization: this.vis.isVisualization(),
          warnMsg: null
        })
      );

      this.$('thead > tr').css('height', 64 + 42);
      if (this.isEmptyTable()) {
        this.addEmptySQLIfo();
      }

      this._moveInfo();
    }
  },

  // depending if the sync is enabled add or remove a class
  _swicthEnabled: function () {
    // Synced?
    this.$el[ this.model.isSync() ? 'addClass' : 'removeClass' ]('synced');
    // Visualization?
    this.$el[ this.vis.isVisualization() ? 'addClass' : 'removeClass' ]('vis');
  },

  _clearView: function (e) {
    if (e) e.preventDefault();
    this.options.layer.clearSQLView();
    return false;
  },

  _tableFromQuery: function (e) {
    throw new Error('Method not migrated, check original implementation');
  },

  /**
   *  Function to control the scroll in the table (horizontal and vertical)
   */
  _scrollMagic: function (ev) {
    var actual_scroll_position = { x: $(window).scrollLeft(), y: $(window).scrollTop() };

    if (this.scroll_position.x != actual_scroll_position.x) { // eslint-disable-line eqeqeq
      this.scroll_position.x = actual_scroll_position.x;
      this.$el.find('thead').addClass('horizontal');

      // If last change was vertical
      if (this.scroll_position.last == 'vertical') { // eslint-disable-line eqeqeq
        this.scroll_position.x = actual_scroll_position.x;

        this.$el.find('thead > tr > th > div > div:not(.dropdown)')
          .removeAttr('style')
          .css('top', actual_scroll_position.y + 'px');

        this.scroll_position.last = 'horizontal';
      }
    } else if (this.scroll_position.y != actual_scroll_position.y) { // eslint-disable-line eqeqeq
      this.scroll_position.y = actual_scroll_position.y;
      this.$el.find('thead').removeClass('horizontal');

      // If last change was horizontal
      if (this.scroll_position.last == 'horizontal') { // eslint-disable-line eqeqeq
        this.$el.find('thead > tr > th > div > div:not(.dropdown)')
          .removeAttr('style')
          .css({'marginLeft': '-' + actual_scroll_position.x + 'px'});

        this.scroll_position.last = 'vertical';
      }
    }
  },

  /**
   *  Move the info content if the panel is opened or hidden.
   *  - Query info if query is applied
   *  - Query loader if query is appliying in that moment
   *  - Add some padding to last column of the content to show them
   */
  _moveInfo: function (type) {
    if (type == 'show') { // eslint-disable-line eqeqeq
      this.$el
        .removeClass('narrow')
        .addClass('displaced');
    } else if (type == 'narrow') { // eslint-disable-line eqeqeq
      this.$el.addClass('displaced narrow');
    } else if (type == 'hide') { // eslint-disable-line eqeqeq
      this.$el.removeClass('displaced narrow');
    } else {
      // Check from the beginning if the right menu is openned, isOpen from
      // the menu is not working properly
      if ($('.table_panel').length > 0) {
        var opened = $('.table_panel').css('right').replace('px', '') == 0; // eslint-disable-line eqeqeq
        if (!opened) {
          this.$el.removeClass('displaced');
        }
      }
    }
  },

  _getEditor: function (columnType, opts) {
    throw new Error('Method not migrated, check original implementation');
  },

  closeEditor: function () {
    if (this._editorsOpened) {
      this._editorsOpened.hide();
      this._editorsOpened.clean();
    }
  },

  _editCell: function (e, cell, x, y) {
    throw new Error('Method not migrated, check original implementation');
  },

  headerView: function (column) {
    throw new Error('Method not migrated, check original implementation');
  },

  /**
  * Checks if the table has any rows, and if not, launch the method for showing the appropiate view elements
  * @method _checkEmptyTable
  */
  _checkEmptyTable: function () {
    if (this.isEmptyTable()) {
      this.addEmptyTableInfo();
    } else {
      this.cleanEmptyTableInfo();
    }
  },

  /**
  * Force the table to be at the beginning
  * @method _forceScroll
  */
  _forceScroll: function (ev) {
    $(window).scrollLeft(0);
  },

  _renderEmpty: function () {
    this.addEmptyTableInfo();
  },

  /**
  * Adds the view elements associated with no content in the table
  * @method addemptyTableInfo
  */
  addEmptyTableInfo: function () {
    throw new Error('Method not migrated, check original implementation');
  },

  /**
  * Adds the view elements associated with no content in the table when a SQL is applied
  * @method addEmptySQLIfo
  */
  addEmptySQLIfo: function () {
    if (this.model.isInSQLView()) {
      this._renderBodyTemplate(templateEmptySQL);
    }
  },

  _renderBodyTemplate: function (template) {
    this.$('tbody').html('');
    this.$('tfoot').remove();
    this.$el.hide();

    // Check if panel is opened to move the loader some bit left
    var panel_opened = false;
    if ($('.table_panel').length > 0) {
      panel_opened = $('.table_panel').css('right').replace('px', '') == 0; // eslint-disable-line eqeqeq
    }

    var content = template({ config: this._configModel, panel_opened });
    var $footer = $('<tfoot class="sql_loader"><tr><td colspan="100">' + content + '</td></tr></tfoot>');

    this.$el.append($footer);
    this.$el.fadeIn();
  },

  /**
  * Removes from the view the no-content elements
  * @method cleanEmptyTableInfo
  */
  cleanEmptyTableInfo: function () {
    this.$('tfoot').fadeOut('fast', function () {
      $(this).remove();
    });
    this.$('.noRows').slideUp('fast', function () {
      $(this).remove();
    });
  },

  notice: function (text, type, time) {
    this.globalError.showError(text, type, time);
  },

  /**
  * Add a new row and removes the empty table view elemetns
  * @method addEmptyRow
  * @todo: (xabel) refactor this to include a "addRow" method in _models[0]
  */
  addEmptyRow: function () {
    this.dataModel.addRow({ at: 0 });
    this.cleanEmptyTableInfo();
  },

  /**
  * Captures the saving event from the row and produces a notification
  * @todo (xabel) i'm pretty sure there has to be a less convulted way of doing this, without capturing a event
  * to throw another event in the model to be captured by some view
  */
  rowSaving: function () {
    this.notice('Saving your edit', 'load', -1);
  },

  /**
  * Captures the change event from the row and produces a notification
  * @method rowSynched
  * @todo (xabel) i'm pretty sure there has to be a less convulted way of doing this, without capturing a event
  * to throw another event in the model to be captured by some view
  */
  rowSynched: function () {
    this.notice('Sucessfully saved');
  },

  /**
  * Captures the change event from the row and produces a notification
  * @method rowSynched
  * @todo (xabel) i'm pretty sure there has to be a less convulted way of doing this, without capturing a event
  * to throw another event in the model to be captured by some view
  */
  rowFailed: function () {
    this.notice('Oops, there has been an error saving your changes.', 'error');
  },

  /**
  * Captures the destroy event from the row and produces a notification
  * @method rowDestroyed
  */

  rowDestroying: function () {
    this.notice('Deleting row', 'load', -1);
  },

  /**
  * Captures the sync after a destroy event from the row and produces a notification
  * @method rowDestroyed
  */

  rowDestroyed: function () {
    this.notice('Sucessfully deleted');
    this._checkEmptyTable();
  }
});