import React from 'react';
import {TextInput, Card} from 'belle';

function conditionalTextInput(showTextInput) {
  if (showTextInput) {
    return <TextInput style={ {width: 250} } defaultValue="This TextInput can be removed." />;
  }
}

export default React.createClass({

  getInitialState() {
    return {
      showTextInput: true,
      inputValue: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    };
  },

  render() {
    const valueLink = {
      value: this.state.inputValue,
      requestChange: this._handleChange
    };

    return (
      <Card>
        <h2>TextInput</h2>

        {/* Common use case */}
        <TextInput allowNewLine={true} style={ {width: 250} } valueLink= { valueLink }
          onUpdate={ (event) => { console.log(event.value); } }/>
        <br />

        {/* Common use case disabled */}
        <TextInput style={ {width: 250} } disabled defaultValue="Lorem ipsum disabled sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
        <br />

        {/* Remove TextInput behaviour */}
        {conditionalTextInput(this.state.showTextInput)}
        <br />
        <button type="button" onClick={this._removeTextInput}>Remove TextInput</button>

        {/* Empty TextInput */}
        <TextInput style={ {width: 250} }/>
        <br />

        <h3>Not editable value</h3>
        <div style={ {width: 250} }>
          <TextInput allowNewLine={false}
                     value={ this.state.inputValue }
                     onUpdate={ (event) => {console.log(event.value); this._handleChange(event.value); } }/>
        </div>
        <br />

        {/* Full width TextInput */}
        <div style={ {position: 'relative'} }>
          <TextInput defaultValue="This is a very long text. Hint: if you resize the browser and there is not enough space it will automatically expand the box for the height needed. TODO: fix this"/>
        </div>
        <br />

        {/* TextInput with placeholder & a minHeight & custom hoverStyle */}
        <div style={ {width: 250} }>
          <TextInput minHeight={120}
                 placeholder="What is going on? Ohh, we provided a minHeight & a custom hoverStyle & focusStyle here."
                 hoverStyle={ { borderBottom: '1px red solid' } }
                 focusStyle={ { borderBottom: '1px brown solid' } } />
        </div>

        <h3>Test with 3 min rows & 5 max rows</h3>
        <div style={ {width: 250} }>
          <TextInput placeholder="Hello" minRows={ 3 } maxRows={ 5 }/>
        </div>

        <h3>Test 4 min rows & minHeight 80</h3>
        <div style={ {width: 250} }>
          <TextInput placeholder="Hello" minRows={ 4 } minHeight={ 80 }/>
        </div>

        <h3>Test 2 max rows & maxHeight 300</h3>
        <div style={ {width: 250} }>
          <TextInput placeholder="Hello" maxRows={ 2 } maxHeight={ 300 }/>
        </div>

        <h3>style minHeight 80</h3>
        <div style={{width: 250 }}>
          <TextInput style={{ minHeight: 80 }}/>
        </div>

        {/* Value test */}
        <div style={ {width: 250} }>
          <textarea value="abc" onChange={ (event) => console.log(event.target.value) }/>
        </div>
      </Card>
    );
  },

  _handleChange(newValue) {
    this.setState({ inputValue: newValue });
  },

  _removeTextInput() {
    this.setState({
      showTextInput: false
    });
  }

});

@@ -473,16 +473,17 @@
 aliqua.'
+,
 %0A    %7D;%0A
@@ -600,16 +600,17 @@
 leChange
+,
 %0A    %7D;%0A
@@ -1626,16 +1626,40 @@
 nt) =%3E %7B
+%0A                       
 console.
@@ -1675,16 +1675,39 @@
 .value);
+%0A                      
  this._h
@@ -1723,35 +1723,55 @@
 ge(event.value);
+%0A                    
  %7D
- 
 %7D/%3E%0A        %3C/di
@@ -1846,17 +1846,16 @@
  style=%7B
- 
 %7Bpositio
@@ -1868,17 +1868,16 @@
 lative'%7D
- 
 %7D%3E%0A     
@@ -2192,33 +2192,32 @@
     %3Cdiv style=%7B
- 
 %7Bwidth: 250%7D %7D%3E%0A
@@ -2204,33 +2204,32 @@
 le=%7B%7Bwidth: 250%7D
- 
 %7D%3E%0A          %3CTe
@@ -2252,16 +2252,20 @@
 t=%7B120%7D%0A
+    
         
@@ -2383,70 +2383,8 @@
     
-             hoverStyle=%7B %7B borderBottom: '1px red solid' %7D %7D%0A
     
@@ -2408,19 +2408,17 @@
 sStyle=%7B
- %7B 
+%7B
 borderBo
@@ -2440,19 +2440,17 @@
 n solid'
- %7D 
+%7D
 %7D /%3E%0A   
@@ -3470,16 +3470,17 @@
 t: false
+,
 %0A    %7D);
@@ -3483,14 +3483,15 @@
  %7D);%0A  %7D
+,
 %0A%0A%7D);%0A

fix linting for TextInputPlayground