'use strict';

var React = require('react/addons');
var TaggedTextEditor = require('./tagged-text-editor');
var ChoicesDropdown = require('./choices-dropdown');

// TODO: temp hack, switch to use replaceChoices structure
// Convert replacmentChoices array to key / label map.
function tagToLabelMap(replaceChoices) {
  var map = {};
  replaceChoices.map(function (choice) {
    map[choice.value] = choice.label;
  });
  return map;
}

module.exports = React.createClass({
  displayName: 'TaggedText',

  mixins: [require('../../mixins/field'), require('../../mixins/undo-stack'), require('../../mixins/resize')],

  getInitialState: function() {
    return { value: this.props.field.initialValue };
  },

  handleSelection: function (key) {
    // TODO: appending to end for now but need to insert at last cursor position
    var tag = '{{' + key + '}}';
    var newValue = this.state.value + tag;

    this.setState({ value: newValue });
  },

  updateValue: function (newValue) {
    this.setState({ value: newValue });
  },

  render: function() {
    return this.renderWithConfig();
  },

  renderDefault: function () {
    var config = this.props.config;
    var field = this.props.field;
    var choices = tagToLabelMap(field.replaceChoices);
    var props = { field: field, plain: this.props.plain };
    var tabIndex = field.tabIndex;

    var element = (
      <div>
        <TaggedTextEditor value={this.state.value} choices={choices} newValue={this.updateValue}
                          tabIndex={tabIndex} />
        <ChoicesDropdown choices={choices} handleSelection={this.handleSelection} />
      </div>
    );

    return config.createElement('field', props, element);
  }
});

@@ -269,16 +269,19 @@
 el map.%0A
+// 
 function
@@ -313,16 +313,19 @@
 ices) %7B%0A
+// 
   var ma
@@ -332,16 +332,19 @@
 p = %7B%7D;%0A
+// 
   replac
@@ -376,20 +376,23 @@
 oice) %7B%0A
+//
     
+ 
 map%5Bchoi
@@ -421,16 +421,22 @@
 el;%0A
+// 
   %7D);%0A
+//
   
+ 
 retu
@@ -443,16 +443,19 @@
 rn map;%0A
+// 
 %7D%0A%0Amodul
@@ -719,16 +719,195 @@
 ;%0A  %7D,%0A%0A
+  tagToLabelMap: function () %7B%0A    var map = %7B%7D;%0A    this.props.field.replaceChoices.map(function (choice) %7B%0A      map%5Bchoice.value%5D = choice.label;%0A    %7D);%0A    return map;%0A  %7D,%0A%0A
   handle
@@ -1405,16 +1405,21 @@
 oices = 
+this.
 tagToLab
@@ -1424,36 +1424,16 @@
 abelMap(
-field.replaceChoices
 );%0A    v

Make tagToLabel method private instance method in pretty-text2.js