var $ = require('jquery');
var _ = require('underscore');
var cdb = require('cartodb.js');

/**
 * Select the columns to use for city names georeference.
 */
module.exports = cdb.core.View.extend({

  initialize: function() {
    this._initViews();
    this._initBinds();
  },

  render: function() {
    var $el = $(
        this.getTemplate('common/dialogs/georeference/city_names/select_columns')({
      })
    );
    $el.find('.js-city').append(this._cityView.render().el);
    $el.find('.js-admin-region').append(this._adminRegionView.render().el);
    $el.find('.js-country').append(this._countryView.render().el);
    this.$el.html($el);
    return this;
  },

  _initViews: function() {
    this._cityView = this._createSelectView('column_name', true);
    this._adminRegionView = this._createSelectView('region');
    this._countryView = this._createSelectView('location');
  },

  _createSelectView: function(attrName, useDefaultCombo) {
    var ComboView;
    var data;

    if (useDefaultCombo) {
      ComboView = cdb.forms.Combo;
      data = this.model.get('columnsNames');
    } else {
      ComboView = cdb.forms.CustomTextCombo;
      data = this._columnsDataForCustomTextCombo();
    }

    var view = new ComboView({
      model: this.model,
      property: attrName,
      className: 'Select',
      width: '100%',
      placeholder: 'Select column or type it',
      extra: data
    });
    this.addView(view);
    return view;
  },

  _columnsDataForCustomTextCombo: function() {
    // The cdb.forms.CustomTextCombo expects the data to be in order of [type, name], so need to translate the raw schema
    return _.map(this.model.get('columns'), function(rawColumn) {
      var type = rawColumn[1];
      var name = rawColumn[0];
      return [type, name];
    });
  },

  _columnName: function(m) {
    return m.name;
  },

  _initBinds: function() {
    this.model.bind('change', this.model.assertIfCanContinue, this.model);
  }

});

@@ -737,89 +737,143 @@
 iew(
-'column_name', true);%0A    this._adminRegionView = this._createSelectView('region'
+cdb.forms.Combo, %7B%0A      property: 'column_name',%0A      placeholder: 'Select column',%0A      extra: this.model.get('columnsNames')%0A    %7D
 );%0A 
@@ -877,31 +877,35 @@
 ;%0A    this._
-country
+adminRegion
 View = this.
@@ -926,258 +926,169 @@
 iew(
-'location');%0A  %7D,%0A%0A  _createSelectView: function(attrName, useDefaul
+cdb.forms.CustomTex
 tCombo
-)
+,
  %7B%0A    
+ 
-var ComboView;%0A    var data;%0A%0A    if (useDefaultCombo) %7B%0A      ComboView = cdb.forms.
+ property: 'region',%0A      extra: this._columnsDataForCustomText
 Combo
-;
+()
 %0A    
-  data = this.model.get('columnsNames');%0A    %7D else %7B%0A      Combo
+%7D);%0A    this._countryView = this._createSelect
 View
- = 
+(
 cdb.
@@ -1112,22 +1112,52 @@
 ombo
-;
+, %7B
 %0A      
-data =
+property: 'location',%0A      extra:
  thi
@@ -1194,16 +1194,71 @@
 bo()
-;
 %0A    %7D
-%0A
+);%0A  %7D,%0A%0A  _createSelectView: function(ComboView, data) %7B
 %0A   
@@ -1283,18 +1283,36 @@
 mboView(
-%7B
 %0A
+      _.extend(%7B%0A  
       mo
@@ -1334,32 +1334,8 @@
 ,%0A  
-    property: attrName,%0A
     
@@ -1363,16 +1363,18 @@
 ,%0A      
+  
 width: '
@@ -1378,32 +1378,34 @@
 : '100%25',%0A      
+ 
+ 
 placeholder: 'Se
@@ -1431,33 +1431,28 @@
  it'
-,
 %0A      
-extra:
+%7D,
  data
+)
 %0A    
-%7D
 );%0A 

Change placeholder for city column