CartoDB/cartodb20

var $ = require('jquery');
var CoreView = require('backbone/core-view');
var template = require('./table-head-item.tpl');
var ContextMenuView = require('builder/components/context-menu/context-menu-view');
var CustomListCollection = require('builder/components/custom-list/custom-list-collection');
var TableHeadOptionsItemView = require('./table-head-options-item-view');
var tableHeadOptionsItemTemplate = require('./table-head-options-item.tpl');
var ConfirmationModalView = require('builder/components/modals/confirmation/modal-confirmation-view');
var QueryColumnModel = require('builder/data/query-column-model');
var addColumnOperation = require('builder/components/table/operations/table-add-column');
var renameColumnOperation = require('builder/components/table/operations/table-rename-column');
var changeColumnTypeOperation = require('builder/components/table/operations/table-change-column-type');
var removeTableColumnOperation = require('builder/components/table/operations/table-remove-column');

var ENTER_KEY_CODE = 13;
var ESC_KEY_CODE = 27;

/*
 *  Main table view
 */

module.exports = CoreView.extend({

  className: 'Table-headItem',
  tagName: 'th',

  events: {
    'dblclick .js-attribute': '_onAttributeDblClicked',
    'focusout .js-attribute': '_saveNewName',
    'click .js-columnOptions': '_showContextMenu'
  },

  initialize: function (opts) {
    if (!opts.tableViewModel) throw new Error('tableViewModel is required');
    if (!opts.columnsCollection) throw new Error('columnsCollection is required');
    if (!opts.modals) throw new Error('modals is required');

    this._tableViewModel = opts.tableViewModel;
    this._columnsCollection = opts.columnsCollection;
    this._modals = opts.modals;

    this._hideContextMenu = this._hideContextMenu.bind(this);
    this._onKeyDown = this._onKeyDown.bind(this);
  },

  render: function () {
    this.clearSubViews();
    var columnName = this.model.get('name');
    this.$el.html(
      template({
        name: columnName,
        type: this.model.get('type'),
        isOrderBy: this._tableViewModel.get('order_by') === columnName,
        sortBy: this._tableViewModel.get('sort_order'),
        geometry: this.options.simpleGeometry
      })
    );
    return this;
  },

  _hasContextMenu: function () {
    return this._menuView;
  },

  _hideContextMenu: function () {
    this._unhighlightHead();
    this._destroyScrollBinding();
    this._menuView.collection.unbind(null, null, this);
    this.removeView(this._menuView);
    this._menuView.clean();
    delete this._menuView;
  },

  _highlightHead: function () {
    this.$el.addClass('is-highlighted');
  },

  _unhighlightHead: function () {
    this.$el.removeClass('is-highlighted');
  },

  _initScrollBinding: function () {
    $('.Table').scroll(this._hideContextMenu);
  },

  _destroyScrollBinding: function () {
    $('.Table').off('scroll', this._hideContextMenu);
  },

  _showContextMenu: function (ev) {
    var self = this;
    var position = { x: ev.clientX, y: ev.clientY };
    var elementIndex = this.$el.index();
    var modelCID = this.model.cid;
    var columnName = this.model.get('name');

    this._highlightHead();

    var menuItems = [{
      label: _t('components.table.columns.options.order'),
      val: 'order',
      isOrderBy: this._tableViewModel.get('order_by') === columnName,
      sortBy: this._tableViewModel.get('sort_order'),
      action: function (model) {
        self._tableViewModel.set({
          sort_order: model.get('sort'),
          order_by: columnName
        });
      }
    }];

    if (!this._tableViewModel.isDisabled()) {
      if (!this.model.isCartoDBIDColumn() && !this.model.isGeometryColumn()) {
        menuItems = menuItems.concat([
          {
            label: _t('components.table.columns.options.rename'),
            val: 'rename',
            action: function () {
              self._startEditing();
            }
          }, {
            label: _t('components.table.columns.options.change'),
            type: this.model.get('type'),
            isLastColumns: (this._columnsCollection.size() - elementIndex) < 3,
            val: 'change',
            action: function (model) {
              self._changeColumnType(model.get('type'));
            }
          }
        ]);
      }

      menuItems.push({
        label: _t('components.table.columns.options.create'),
        val: 'create',
        action: function () {
          self._addColumn();
        }
      });

      if (!this.model.isCartoDBIDColumn() && !this.model.isGeometryColumn()) {
        menuItems.push(
          {
            label: _t('components.table.columns.options.delete'),
            val: 'delete',
            destructive: true,
            action: function () {
              self._removeColumn();
            }
          }
        );
      }
    }

    var collection = new CustomListCollection(menuItems);

    this._menuView = new ContextMenuView({
      className: ContextMenuView.prototype.className + ' Table-columnMenu',
      collection: collection,
      itemTemplate: tableHeadOptionsItemTemplate,
      itemView: TableHeadOptionsItemView,
      triggerElementID: modelCID,
      position: position
    });

    collection.bind('change:selected', function (menuItem) {
      var action = menuItem.get('action');
      action && action(menuItem);
    }, this);

    this._menuView.model.bind('change:visible', function (model, isContextMenuVisible) {
      if (this._hasContextMenu() && !isContextMenuVisible) {
        this._hideContextMenu();
      }
    }, this);

    this._menuView.show();
    this.addView(this._menuView);

    this._initScrollBinding();
  },

  _addColumn: function () {
    addColumnOperation({
      columnsCollection: this._columnsCollection
    });
  },

  _changeColumnType: function (newType) {
    var self = this;
    var oldType = this.model.get('type');
    var isTypeChangeDestructive = QueryColumnModel.isTypeChangeDestructive(oldType, newType);
    if (!isTypeChangeDestructive) {
      changeColumnTypeOperation({
        columnModel: this.model,
        newType: newType
      });
    } else {
      this._modals.create(
        function (modalModel) {
          return new ConfirmationModalView({
            modalModel: modalModel,
            template: require('./modals-templates/change-table-column-type.tpl'),
            renderOpts: {
              columnName: self.model.get('name'),
              newType: newType
            },
            loadingTitle: _t('components.table.columns.change-type.loading', {
              columnName: self.model.get('name')
            }),
            runAction: function () {
              changeColumnTypeOperation({
                columnModel: self.model,
                newType: newType,
                onSuccess: function () {
                  modalModel.destroy();
                },
                onError: function (e) {
                  modalModel.destroy();
                }
              });
            }
          });
        }
      );
    }
  },

  _removeColumn: function () {
    var self = this;
    this._modals.create(
      function (modalModel) {
        return new ConfirmationModalView({
          modalModel: modalModel,
          template: require('./modals-templates/remove-table-column.tpl'),
          renderOpts: {
            name: self.model.get('name')
          },
          loadingTitle: _t('components.table.columns.destroy.loading', {
            columnName: self.model.get('name')
          }),
          runAction: function () {
            removeTableColumnOperation({
              columnModel: self.model,
              onSuccess: function () {
                modalModel.destroy();
              },
              onError: function (e) {
                modalModel.destroy();
              }
            });
          }
        });
      }
    );
  },

  _onAttributeDblClicked: function () {
    if (this.model.isEditable() && !this._tableViewModel.isDisabled()) {
      this._startEditing();
    }
  },

  _initRenameBinds: function () {
    $(document).bind('keydown', this._onKeyDown);
  },

  _destroyRenameBinds: function () {
    $(document).unbind('keydown', this._onKeyDown);
  },

  _onKeyDown: function (ev) {
    var keyCode = ev.which;
    if (keyCode === ENTER_KEY_CODE) {
      this._saveNewName();
    } else if (keyCode === ESC_KEY_CODE) {
      this._finishEditing();
    }
  },

  _startEditing: function () {
    this.$('.js-attribute')
      .addClass('is-active')
      .removeAttr('readonly');

    this._initRenameBinds();
  },

  _finishEditing: function () {
    this.$('.js-attribute')
      .val(this.model.get('name'))
      .removeClass('is-active')
      .attr('readonly', '');

    this._destroyRenameBinds();
  },

  _saveNewName: function () {
    if (this.model.isEditable()) {
      var newName = this.$('.js-attribute').val();
      var columnModel = this.model;
      var oldName = columnModel.get('name');

      if (oldName !== newName && newName !== '') {
        this._modals.create(
          function (modalModel) {
            return new ConfirmationModalView({
              modalModel: modalModel,
              template: require('./modals-templates/rename-table-column.tpl'),
              renderOpts: {
                columnName: oldName,
                newName: newName
              },
              loadingTitle: _t('components.table.columns.rename.loading', {
                columnName: oldName,
                newName: newName
              }),
              runAction: function () {
                renameColumnOperation({
                  columnModel: columnModel,
                  newName: newName,
                  onSuccess: function () {
                    modalModel.destroy();
                  },
                  onError: function (e) {
                    modalModel.destroy();
                  }
                });
              }
            });
          }
        );
      }
    }

    // Setting old name just in case user cancel it
    this._finishEditing();
  },

  focusInput: function () {
    this._startEditing();
    this.$('.js-attribute').select();
  },

  clean: function () {
    this._destroyRenameBinds();
    this._destroyScrollBinding();
    CoreView.prototype.clean.apply(this);
  }
});