/**
   *  Layer panel view added in the right menu
   *
   *  - It needs at least layer, visualization and user models.
   *    Globalerror to show connection or fetching errors.
   *
   *  var layer_view = new cdb.admin.LayerPanelView({
   *    model:        layer_model,
   *    vis:          vis_model,
   *    user:         user_model,
   *    globalError:  globalError_obj
   *  });
   */


  cdb.admin.LayerPanelView = cdb.admin.RightMenu.extend({

    _TEXTS: {
      error:  {
        default:  _t('Something went wrong, try again later')
      },
      visible:    _t('This layer is hidden, changes won\'t be shown \
                      until you make it visible'),
      dblclick:   _t('Double click will allow you to rename it')
    },

    MODULES: ['infowindow', 'legends'],
    className: "layer_panel",

    events: {
      'dblclick span.name': '_editAlias',
      'click .name_info a': '_goToLayer',
      'click .info':        '_switchTo',
      'click a.visibility': '_switchVisibility',
      'click a.remove':     '_removeLayer',
      'keyup input.alias':  '_changeAlias',
      'click input.alias':  'killEvent',
      'click':              'setPanelStatus'
    },

    initialize: function() {

      cdb.admin.RightMenu.prototype.initialize.call(this);

      _.bindAll(this, '_editAlias');

      // Set internal vars
      this.table = this.model.table;
      this.sqlView = new cdb.admin.SQLViewData();
      this.map = this.options.vis.map;
      this.globalError = this.options.globalError;
      this.user = this.options.user;
      this.vis = this.options.vis;

      // Set status view model
      this.view_model = new cdb.core.Model({ state:'idle' })

      this.render();

      // Set current panel view and data layer
      this.activeWorkView = 'table';
      this.setDataLayer(this.model);

      // New added layers need to wait to get model id
      this.model.bind('change:id', function(m) {
        this.vis.save('active_layer_id', this.dataLayer.id);
        this.$el.attr('model-id', this.model.id);
      }, this);
      this.model.bind('change:type',    this._setLayerType, this);
      // Show message when layer is not visible
      this.model.bind('change:visible', this.setVisibleMsg, this);
      this.model.bind('destroy', function() {
        this.trigger('destroy', this.dataLayer.cid);
      }, this);

      // When status change binding
      this.view_model.bind('change:state', this._onChangeStatus, this);
      this.add_related_model(this.view_model);

      // Bind when panel is closed
      cdb.god.bind("panel_action", this.setPanelStatus, this);

      this.add_related_model(cdb.god);

      this.$el.attr('model-id', this.model.id);
      this._setLayerType();
    },

    /* Layer events functions */

    // Set active this tab
    _switchTo: function(e) {
      if (e) e.preventDefault();
      var isActive = this.vis.get('active_layer_id') == this.dataLayer.id;

      // Preventing problem with double click
      // over span.name
      if (isActive && $(e.target).prop("tagName").toLowerCase() == "span"
        && $(e.target).prop("className") == "name") {

        // Preventing display the tooltip when user is
        // double clicking! :(
        var self = this;
        setTimeout(function() {
          if (!self._dblClick) self.$('.layer-info .info .name').tipsy("show");
          delete self._dblClick;
        }, 150);

        return false;
      }

      this.trigger('switchTo', this);
      this.view_model.set('state', 'idle');
      this.filters._addFilters();

      return false;
    },

    _goToLayer: function(ev) {
      if (ev) {
        ev.stopPropagation();
      }
    },

    // Change view model to show table
    // name alias input
    _editAlias: function(e) {
      e.preventDefault();
      e.stopPropagation();

      if (this.vis.isVisualization()) {
        this._dblClick = true;

        this.view_model.set('state',
          this.view_model.get('state') == 'idle' ? 'editing' : 'idle'
        );
      } else {
        this.trigger('switchTo', this);
      }

      return false;
    },

    // Change layer state when input is ready
    _changeAlias: function(e) {
      var value = $(e.target).val();

      // If form is submitted, go out!
      if (e && e.keyCode == 13) {
        this.view_model.set({ state: 'idle' });
        return false;
      }
    },

    setPanelStatus: function() {
      this.view_model.set('state', 'idle');
    },

    _onChangeStatus: function() {
      var $el = this.$('.layer-info div.left');
      if (this.view_model.get('state') == "idle") {
        var alias = $el.find('input').val();
        $el.find('input').hide();
        $el.find('span.name').show();
        $el.find('.name_info').show();

        if (alias != this.view_model.get('table_name_alias')) {
          // Set new changes in model
          if (alias == "" || alias == " ") {
            this.dataLayer.unset('table_name_alias')
          } else {
            this.dataLayer.set({ table_name_alias: alias })
          }
          this.dataLayer.save();
          this.setLayerName(this.dataLayer);
        }

      } else {
        $el.find('span.name').hide();
        $el.find('.name_info').hide();
        $el.find('input')
          .val(this.dataLayer.get('table_name_alias') || this.dataLayer.get('table_name').replace(/_/g,' '))
          .show()
          .focus();
      }
    },

    _setLayerType: function() {
      this.$el.attr('layer-type', this.model.get('type').toLowerCase());
    },

    activated: function() {
      // remove layer-info
      this.deactivated();
      this.$el.html('');
      this.render();

      // Set data layer
      this.setDataLayer(this.model);

      // Set previous active layer
      this.setActivePanelView();

      this.panels.bind('tabEnabled', this.saveActivePanelView, this);
    },

    deactivated: function() {
      this.clearSubViews();
      this._removeButtons();
      this.view_model.set('state', 'idle');
    },

    // Set visibility of the map layer
    _switchVisibility: function(e) {
      e.preventDefault();

      if (!this.vis.isVisualization()) {
        cdb.log.info("You can't toggle the layer visibility in a table view");
        return false;
      }

      // Hide infowindow if it is open
      this.model.infowindow && this.model.infowindow.set('visibility', false);

      this.model.save({ 'visible': !this.model.get('visible') });
    },

    // Remove this view and the map layer
    _removeLayer: function(e) {
      e.preventDefault();

      // Check if the visualization is devired type and not table
      if (!this.vis.isVisualization()) {
        cdb.log.info("You can't remove a layer in a table view");
        return false;
      }

      this.trigger('delete', this);
    },


    /* Layer info functions (order, options, name, ...) */

    _setLayerInfo: function(layer) {
      this.setLayerName(layer);
      this.setLayerOptions(layer);
      this.setLayerOrder(layer);
      this.setVisibility(layer);
      this.setVisibleMsg(layer);
      this.setView(layer);
    },

    // Set view options
    setView: function(layer) {
      this.$el[ this.vis.isVisualization() ? 'addClass' : 'removeClass' ]('vis')
    },

    setVisibleMsg: function() {
      var editors = ['sql_mod', 'cartocss_mod'];

      // Remove message
      this.$('.layer-views div.info.warning').remove()

      // Add message if it is necessary
      if (!this.model.get('visible')) {
        var $div = $('<div>')
          .addClass('info warning')
          .append('<p>' + this._TEXTS.visible + '</p>');

        var isEditor = _.contains(editors, this.currentPanelView);
        $div[ isEditor ? 'addClass' : 'removeClass' ]('editor');
        this.$('.layer-views').append($div);
      }
    },

    // Layer name
    setLayerName: function(layer) {
      if (this.vis.isVisualization()) {

        // table name
        this.$('.layer-info .info .name')
          .text(layer.get('table_name_alias') || layer.get('table_name').replace(/_/g,' '));

        // table name alias
        var layerUrl = layer.table && layer.table.viewUrl();
        this.$('.layer-info .info .name_info')
          .html('view of ')
          .append($('<a>').attr('href', layerUrl).text(layer.get('table_name')));

        // table synced?
        if (this.table.isSync()) {
          this.$('.layer-info .info .name')
            .append($('<i>').addClass('synced'));
        } else {
          this.$('.layer-info i.synced').remove();
        }

        // Set tipsy bind
        this._setLayerTooltip();
      } else {
        // Unset tipsy bind
        this._unsetLayerTooltip();
        this.$('.layer-info .info .name').text(layer.get('table_name'));
      }
    },

    _setLayerTooltip: function() {
      var self = this;
      this.$('.layer-info .info .name').tipsy({
        trigger:  'manual',
        fade:     true,
        gravity:  's',
        title:  function() {
          return self._TEXTS.dblclick
        }
      })
      .bind('mouseleave', function() {
        $(this).tipsy('hide');
      });
    },

    _unsetLayerTooltip: function() {
      var $name = this.$('.layer-info .info .name');
      // Remove tipsy
      if ($name.data('tipsy')) {
        $name.unbind('mouseenter mouseleave');
        $name.data('tipsy').remove();
      }
    },

    // Layer options
    setLayerOptions: function(layer) {
      // Layer options buttons
      if (this.vis && !this.vis.isVisualization()) {
        this.$('.layer-info div.right').hide();
      } else {
        this.$('.layer-info div.right').show();
      }
    },

    setVisibility: function(layer) {
      this._maybeHideVisibilitySwitch();

      var isVisible = layer.get('visible');
      this.$(".layer-info div.right a.switch")
        .toggleClass('enabled', !!isVisible)
        .toggleClass('disabled', !isVisible);
    },

    _maybeHideVisibilitySwitch: function() {
      var sw = this.$(".layer-info div.right a.switch");
      var close = this.$(".layer-info div.right a.remove");
      var dataLayers = this.vis.map.layers.getDataLayers();
      if (dataLayers.length === 1) {
        sw.hide();
        close.hide();
      } else {
        sw.css('display', 'inline-block');
        close.css('display', 'inline-block');
      }
    },

    // Layer order
    setLayerOrder: function(layer) {
      var order = '1';
      if(this.vis.isVisualization()) {
        order = layer.collection.indexOf(layer);
      }

      this.$('.layer-info .info .order').text(order);
    },


    /* Set data of the layer (bindings, errors, modules, ...) */
    setDataLayer: function(dataLayer) {
      var self = this;
      this.add_related_model(dataLayer);
      var enabledModulesInit = self.MODULES;

      if (!self.dataLayer) {
        self.dataLayer = dataLayer;
        this._initDataLayer(dataLayer);
      }

      // Set layer info
      this._setLayerInfo(dataLayer);

      /* SQL */
      var sql = new cdb.admin.mod.SQL({
        model: self.dataLayer,
        user: self.user,
        className: "sql_panel editor"
      });

      /* Filters */
      this.filters = new cdb.admin.mod.Filters({
        table: self.table,
        sqlView: self.sqlView,
        dataLayer: self.dataLayer
      });

      // load the scroll when the panel is open
      cdb.god.bind("end_narrow", function() {
        self.filters.loadScroll()
      }, this);

      /* Wizards */
      var activeWizards = {
        polygon:    "SimpleWizard",
        cluster:    "ClusterWizard",
        intensity:  "IntensityWizard",
        bubble:     "BubbleWizard",
        choropleth: "ChoroplethWizard",
        color:      "CategoryWizard",
        category:   "CategoryWizard",
        density:    "DensityWizard",
        torque:     "TorqueWizard",
        torque_cat:  "TorqueCategoryWizard",
        torque_heat: "TorqueHeatWizard"
      };


      var wizards = new cdb.admin.mod.CartoCSSWizard({
        user: this.user,
        model: this.dataLayer,
        table: this.table,
        map: this.map,
        className: "wizards_panel",
        wizards: activeWizards
      }).bind('modules', function(enabledModules) {
        enabledModulesInit = enabledModules;
        this.enableModules(enabledModules);
      }, this).bind('activeWizard', function(type) {
        // Close infowindow if it exists.
        this.dataLayer.infowindow && this.dataLayer.infowindow.set('visibility', false);
      }, this);

      /* Infowindow */
      var infowindow = this.infowindow = new cdb.admin.mod.InfoWindow({
        table: this.table,
        user: this.user,
        dataLayer: dataLayer
      });
      infowindow.bind('tabChanged', this._onModuleTabChanged, this);

      /* CartoCSS editor */
      var editorPanel = new cdb.admin.mod.CartoCSSEditor({
        model: this.dataLayer,
        table: this.table,
        user: this.user,
        className: "csseditor_panel editor"
      }).bind('hasErrors', function() {
        self.addClassToButton('cartocss_mod', 'has_errors');
      }).bind('clearError', function() {
        self.removeClassFromButton('cartocss_mod', 'has_errors');
      });

      /* Legends */
      var legends = new cdb.admin.mod.LegendEditor({
        model: dataLayer.legend,
        dataLayer: dataLayer,
        className: "legends_panel",
        availableLegends: [
          { name: "none",       enabled: true  },
          { name: "custom",     enabled: true  },
          { name: "color",      enabled: false },
          { name: "category",   enabled: false },
          { name: "bubble",     enabled: false },
          { name: "choropleth", enabled: false },
          { name: "intensity",  enabled: false },
          { name: "density",    enabled: false },
          { name: "torque_cat", enabled: false }
        ],
      }).bind('modules', function(enabledModules) {
        enabledModulesInit = enabledModules;
        self.enableModules(enabledModules);
      }).bind('tabChanged', this._onModuleTabChanged, this);

      if (!this.user.featureEnabled('disabled_ui_sql')) {
        self.addModule(sql.render(), ['table', 'tableLite', 'map', 'mapLite']);
      }
      self.addModule(wizards.render(),      ['map', 'mapLite']);
      self.addModule(infowindow.render(),   ['map', 'mapLite']);
      if (!this.user.featureEnabled('disabled_ui_cartocss')) {
        self.addModule(editorPanel.render(), ['map', 'mapLite']);
      }
      self.addModule(legends.render(),      ['map', 'mapLite']);
      self.addModule(this.filters.render(), ['table', 'tableLite', 'map', 'mapLite']);

      /* Lateral menu modules */
      var mergeTables = self.addToolButton("merge_datasets", 'table');
      var addRow      = self.addToolButton('add_row', 'table');
      var addColumn   = self.addToolButton('add_column', 'table');
      var addGeom     = self.addToolButton('add_feature', 'map');

      addRow.bind('click', this._addRow, this);
      addColumn.bind('click', this.trigger.bind(this, 'addColumn', this));
      mergeTables.bind('click', this._mergeTables, this);
      addGeom.bind('click', this._addFeature, this);

      this.enableModules(enabledModulesInit);
      this._bindDataLayer();
    },

    // set initial parameters to the layer
    _initDataLayer: function(layer) {
      layer.bind('change:table_name', this.setLayerName, this);
      layer.bind('change:order',      this.setLayerOrder, this);
      layer.bind('change:visible',    this.setVisibility, this);

      layer.collection.bind('add remove', this._maybeHideVisibilitySwitch, this);
      this.add_related_model(layer.collection);

      layer.set({
        stat_tag: this.vis.get('id'),
        user_name: this.user.get("username"),
        maps_api_template: cdb.config.get('maps_api_template'),
        cartodb_logo: false,
        no_cdn: false,
        force_cors: true // use CORS to control error management in a better way
      });

      // set api key
      var e = layer.get('extra_params') || {};
      e.api_key = e.map_key = this.user.get('api_key');
      layer.set('extra_params', e);
      layer.invalidate();
    },

    // bind related ui changed to datalayer
    _bindDataLayer: function() {
      var self = this;
      this.dataLayer.bindSQLView(this.sqlView);
      this.dataLayer
        .bind('parseError', function() {
          if(self.activeWorkView === 'map') {
            self.globalError.showError('There is a problem with the map tiles. Please, check your CartoCSS style.', 'error', 0, 'tiles');
          }
        }, this)
        .bind('sqlNoMercator', function() {
          if(self.activeWorkView === 'map') {
            // don't show this error, the warning is shown in the sql bar
            //self.globalError.showError(_t('the_geom_webmercator column should be selected'), 'warn', 0, 'tiles');
          }
        }, this)
        .bind('error', function(model, resp) {
          var aborted = resp && resp.statusText === 'abort';
          if(self.activeWorkView === 'map' && !aborted) {
            self.globalError.showError('There is a problem with your connection', 'error', 0, 'tiles');
          }
        }, this)
        .bind('tileOk', function() {
          self.globalError.hide('tiles');
        }, this);

      this.table.bind('columnRename columnDelete columnAdded geolocated', function() {
        self.dataLayer.invalidate();
      }, this);

      this.table.bind('change:geometry_types', function() {
        if(this.table.get('geometry_types').length) {
          this._enableGeometryRelatedWizards();
        } else {
          this._disableGeometryRelatedWizards();
        }
      }, this);

      // Need to check buttons when permission changes
      this.table.bind('change:permission',  this._checkButtons, this);
      this.table.bind('change:readOnly', this._checkButtons, this);
      this.table.bind('change:synchronization', this._checkButtons, this);
      this.table.bind('change:isSync', this._checkButtons, this);

      this.vis.bind('change:type', function() {
        this.setLayerOptions()
        this.setLayerName(this.model)
      }, this);

      this.model.bind('applySQLView errorSQLView clearSQLView', this._checkButtons, this);

      // this.model.bind('clearSQLView', this._onResetSQL, this);
      // this.model.bind('applySQLView', this._onApplySQL, this);
      // this.model.bind('errorSQLView', this._onErrorSQL, this);

      this.model.unbind('applyFilter', this._applyFilter, this);
      this.model.bind('applyFilter',  this._applyFilter, this);

      // Add related models to be cleaned when view is destroyed
      this.add_related_model(this.vis);
      this.add_related_model(this.table);

      this._checkButtons();
    },

    enableModules: function(enabledModules) {

      var self = this;

      _(self.MODULES).each(function(m) {

        if (m === "infowindow" && !self.model.wizard_properties.supportsInteractivity()) {
          self.disableModule("infowindow_mod");
        } else {

          if (_.contains(enabledModules, m)) {
            self.enableModule(m + "_mod");
          } else {
            self.disableModule(m + "_mod");
          }

        }

      });

    },

    SQL_WIZARDS: ['cartocss_mod', 'wizards_mod', 'infowindow_mod', 'legends_mod'],

    _disableGeometryRelatedWizards: function() {
      var self = this;
      _(this.SQL_WIZARDS).each(function(m) {
        self.disableModule(m);
      });
    },

    _enableGeometryRelatedWizards: function() {
      var self = this;

      _(this.SQL_WIZARDS).each(function(m) {

        if (m == 'infowindow_mod' && !self.model.wizard_properties.supportsInteractivity()) {
          self.disableModule(m);
        } else {
          self.enableModule(m);
        }

      });

    },

    _addRow: function() {
      this.table.data().addRow({ at: 0});
      this.trigger('createRow');
      cdb.god.trigger("closeDialogs");
    },

    _mergeTables: function() {
      var user = this.user;
      var view = new cdb.editor.MergeDatasetsView({
        table: this.table,
        user: user
      });
      view.appendToBody();
      cdb.god.trigger("closeDialogs");
    },

    _addFeature: function(mod) {
      if (this.map.get('provider') === 'leaflet') {
        this.map.clamp();
      }
      if (this.table.isGeoreferenced()) {
        this._addGeometry();
      } else {
        this._showScratchDialog();
      }
    },

    _showScratchDialog: function() {
      var view = new cdb.editor.ScratchView({
        clean_on_hide: true,
        enter_to_confirm: true,
        table: this.table,
        skipDisabled: true
      });
      view.bind("newGeometry", this._addGeometry, this);
      view.appendToBody();
    },

    _addGeometry: function(type) {
      // row is saved by geometry editor if it is needed
      type = type || this.table.geomColumnTypes()[0];
      this.dataLayer.trigger("startEdition", type);
    },

    /* Module functions */

    // When a tab is activated within a sub-module.
    // It could be the indowindow view, filters view, etc.
    _onModuleTabChanged: function(action) {
      this.trigger('tabChanged', action);
    },

    // check buttons if they should be enabled or not
    _checkButtons: function() {
      var self = this;
      var gt = this.table.get('geometry_types');

      // Changes over the SQL button
      var sql_button_changes = {
        applied:    'remove',
        has_errors: 'remove'
      };

      // *Table with read permissions* //
      if (this.table.isReadOnly()) {

        // Data layer has a query applied?
        if (this.table.isInSQLView()) {
          if(this.model.getCurrentState() === 'error') {
            sql_button_changes = {
              applied: 'add',
              has_errors: 'add'
            }
          } else {
            sql_button_changes.applied = 'add';
          }
        }

        // Check if there is any geometry
        if (gt && gt.length === 0) {
          this._disableGeometryRelatedWizards();
        } else {
          this._enableGeometryRelatedWizards();
        }

        this._readOnlyTableButtons();
      } else {
        // *Table with write permissions* //

        // Check if there is any geometry
        if(gt && gt.length === 0) {
          this._disableGeometryRelatedWizards();
        } else {
          this._enableGeometryRelatedWizards();
        }

        // Enable writable buttons
        this._writableTableButtons();
      }

      // Set title changes (as in name, sync info,...)
      this.setLayerName(this.dataLayer);

      // Set sql button changes
      _.each(sql_button_changes, function(value, key) {
        self[ value === "remove" ? 'removeClassFromButton' : 'addClassToButton' ]('sql_mod', key);
      });
    },

    _removeButtons: function() {
      this.buttons = [];
      this.panels.unbind('tabEnabled', this.saveActivePanelView, this);
      this.panels.clean();
      this.tabs.clean();
    },

    // Enable the correct buttons depending on
    // if the layer is in query mode or not
    setActiveWorkView: function(workView) {
      this.activeWorkView = workView;
      this._checkButtons();
      this.setActivePanelView(true);
    },

    saveActivePanelView: function(name) {
      this.currentPanelView = name;
      this.setVisibleMsg();
    },

    setActivePanelView: function(work_view) {
      if (work_view || !this.currentPanelView) {
        if (this.activeWorkView === 'map') {
          var gt = this.table.get('geometry_types');
          if(this.model.getCurrentState() !== 'error' && (gt && gt.length > 0)) {
            this.active('wizards_mod');
          }
        } else {
          this.active('sql_mod');
        }
      } else {
        this.active(this.currentPanelView);
      }
    },

    _readOnlyTableButtons: function() {
      if(this.activeWorkView === 'map') {
        this.showTools('mapLite', true);
      } else {
        this.showTools('tableLite', true);
      }
    },

    _writableTableButtons: function() {
      if(this.activeWorkView === 'map') {
        this.showTools('map', true);
      } else {
        this.showTools('table', true);
      }
    },

    _applyFilter: function(column_name) {

      var col = { column: column_name };

      var exists = this.filters.filters.find(function(a) {
        return a.get("column") == col.column
      });

      if (!exists) this.filters.filters.add(col);

    },


    /* View visibility functions */

    hide: function() {
      this.$('.layer-sidebar').hide();
      this.$('.layer-views').hide();
    },

    show: function() {
      this.$('.layer-sidebar').show();
      this.$('.layer-views').show();
    },

    showModule: function(modName, modTab) {
      // Set tab in the module
      if (modTab && this[modName]) this[modName].setActiveTab(modTab);
      // Show module
      this.trigger('show', modName + "_mod", this);
    },

    clean: function() {
      this._unsetLayerTooltip();
      this._removeButtons();
      this.elder('clean');
    }
  });