import React from 'react';

class CategoriesList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

  onChange(e) {
    this.setState({ name: e.target.value });
  }

  onSubmit(e) {
    e.preventDefault();
    this.props.onSubmit(this.state.name);
    this.setState({ name: '' });
  }

  render() {
    const { categories } = this.props;

    return (
      <div className='col-xs-12'>
        <h3>Categories</h3>
        <form onSubmit={ (e) => this.onSubmit(e) }>
          <div className='control-group'>
            <input
              onChange={ (e) => this.onChange(e) }
              type='text'
              value={ this.state.name }
              className='form-control'
              placeholder='Category Name' />
          </div>
        </form>
        <br />
        { categories && categories.length ? (
          <table className='table table-striped'>
            <tbody>
              { categories.map((category, index) => (
                <tr key={ index }>
                  <td>{ category }</td>
                  <td className='action'>
                    <span>
                      <img
                        className='delete'
                        onClick={ () => this.props.handleDelete(index) }
                        src='assets/svg/icon.svg' />
                    </span>
                  </td>
                </tr>
              )) }
            </tbody>
          </table>
        ) : <img src='assets/svg/empty.svg' className='empty-state'/> }
      </div>
    );
  }
}

export default CategoriesList;

@@ -469,16 +469,48 @@
 es%3C/h3%3E%0A
+        %3Cdiv className='row'%3E%0A  
         
@@ -549,24 +549,67 @@
 ubmit(e) %7D%3E%0A
+            %3Cdiv className='col-xs-9'%3E%0A    
           %3Cd
@@ -654,15 +654,23 @@
     
+    
 %3Cinput%0A
+    
     
@@ -730,16 +730,20 @@
         
+ 
+   
 type='te
@@ -746,16 +746,20 @@
 ='text'%0A
+    
         
@@ -790,16 +790,20 @@
 .name %7D%0A
+    
         
@@ -847,16 +847,20 @@
         
+    
 placehol
@@ -888,24 +888,28 @@
 %3E%0A          
+    
 %3C/div%3E%0A     
@@ -915,14 +915,245 @@
     
-%3C/form
+    %3C/div%3E%0A            %3Cdiv className='col-xs-3'%3E%0A              %3Cbutton href='#' className='btn btn-block btn-success' type='submit'%3E%0A                Add Category%0A              %3C/button%3E%0A            %3C/div%3E%0A          %3C/form%3E%0A        %3C/div
 %3E%0A  

Add "Add Category" button to control