import React, { Component } from 'react'

export default class TextBase extends Component {
  constructor(props){
    super(props);
    this.newId = 1;

    const inputs = [];
    this.props.values.forEach((target) => {
      inputs.push(this.createFormTag(target))
    });
    this.state = {
      inputs: inputs
    }

    this.$wrapper = null;
  }

  getCount(){
    return this.props.data.count === undefined ? 1 : this.props.data.count;
  }

  onValueChange(e){
    const values = [];
    this.$wrapper.find('.text-form').each((key, elem) => {
      const $elem = $(elem)
      values.push({
        id: $elem.attr("data-id"),
        value: $elem.val(),
      });
    });

    this.props.onValueChange({
      values: values,
      code: this.props.data.code
    });
  }

  createFormTag(){
    throw new Error("Imprements createFormTag");
  }

  componentDidMount(){
    this.$wrapper = $(this.refs.wrapper);
    if(this.props.data.count == 1){
      if(this.props.values.length == 0){
        this.onClickAdd();
      }
    } else {
      this.$wrapper
        .sortable({
  			  opacity: 0.8,
          handle: '.handle',
          stop: (ev, ui) => {
          }
        })
    }
  }

  onClickAdd(){
    const values = [...this.props.values];
    values.push({id: 'new_' + this.newId++, value: ""})
    this.props.onValueChange({
      values: values,
      code: this.props.data.code
    });
  }

  render() {
    let addButton = null;
    if(this.props.data.count > 1){
      addButton = (
        <button className="btn btn-primary" type="button" onClick={() => this.onClickAdd()}>
          <i className="fa fa-plus" aria-hidden="true"></i>&nbsp; 追加
        </button>
      )
    }
    return (
      <div>
        {addButton}
        <ul ref="wrapper" className="list-unstyled">
          {this.props.values.map(target => {
            return this.createFormTag(target)
          })}
        </ul>
      </div>
    )
  }
}

@@ -1150,24 +1150,58 @@
 v, ui) =%3E %7B%0A
+            this.onValueChange();%0A
           %7D%0A
@@ -1196,24 +1196,24 @@
           %7D%0A
-
         %7D)%0A 
@@ -1436,16 +1436,236 @@
 );%0A  %7D%0A%0A
+  onClickDelete(e)%7B%0A    const id = e.currentTarget.getAttribute(%22data-id%22);%0A    this.props.onValueChange(%7B%0A      values: this.props.values.filter(target =%3E target.id != id),%0A      code: this.props.data.code%0A    %7D);%0A  %7D%0A%0A
   render
@@ -2110,33 +2110,631 @@
 urn 
-this.createFormTag(target
+(%0A              %3Cdiv key=%7Btarget.id%7D className=%22clearfix%22%3E%0A                %3Cdiv className=%22handle%22%3E%0A                  %3Ci className=%22fa fa-bars%22 aria-hidden=%22true%22%3E%3C/i%3E%0A                %3C/div%3E%0A                %3Cdiv className=%22body%22%3E%0A                  %7Bthis.createFormTag(target)%7D%0A                %3C/div%3E%0A                %3Cdiv className=%22delete%22%3E%0A                  %3Cbutton data-id=%7Btarget.id%7D className=%22btn btn-danger%22 type=%22button%22 onClick=%7B(e) =%3E this.onClickDelete(e)%7D%3E%0A                    %3Ci className=%22fa fa-times%22 aria-hidden=%22true%22%3E%3C/i%3E%0A                  %3C/button%3E%0A                %3C/div%3E%0A              %3C/div%3E%0A            
 )%0A  

削除を実装。