import React, {
  Component,
  PropTypes
} from 'react'
import {
  FormGroup,
  FormControl,
  Col,
  Button
} from 'react-bootstrap'
import SearchIcon from 'react-icons/lib/md/search'
import './SearchForm.scss'
export default class SearchForm extends Component {
  static propTypes = {
    isRenderSearchForm2: PropTypes.bool,
    setSearchCategoryValue: PropTypes.func,
    searchCategoryValue: React.PropTypes.string,
    requestSearchNews: React.PropTypes.func,
  // setSearchLanguageValue: React.PropTypes.func
  // searchLanguageValue: React.PropTypes.string,
  // toggleSearchForm: PropTypes.func,
  };

  constructor (props) {
    super(props)
    this.state = { isRenderSearchForm2: false }
  }

  handleToggleClick = () => {
    this.setState({
      isRenderSearchForm2: !this.state.isRenderSearchForm2
    })
  }

  handleSearch = () => {
    const searchParams = {
      category: this.props.searchCategoryValue,
      // language: this.props.searchLanguageValue
    }
    this.props.requestSearchNews(searchParams)
    this.setState({
      isRenderSearchForm2: !this.state.isRenderSearchForm2
    })
  }
  handleCategoryChange = (e) => {
    this.props.setSearchCategoryValue(e.target.value)
  }
  // handleLanguageChange = (e) => {
  //   this.props.setSearchLanguageValue(e.target.value)
  // }

  renderSearchForm (props) {
    if (this.state.isRenderSearchForm2) {
      return (
        <div className='searchFromWraper'>
          <div className='searchFromlocator'>
            <form className='searchFrom'>
              <FormGroup controlId='formHorizontalText'>
                <Col smOffset={4} sm={4}>
                  <FormControl
                    type='text'
                    className='searchInput'
                    placeholder='Category, like: business, entertainment, gaming...'
                    onChange={this.handleCategoryChange}
                  />
                </Col>
              </FormGroup>
              {/* <Row>
               <div>OR</div>
               </Row> */}
              {/* <FormGroup controlId='formHorizontalPassword'>
                <Col cozmponentClass={ControlLabel} smOffset={4} sm={1}>
                 language
                 </Col>
                <Col smOffset={4} sm={4}>
                  <FormControl
                    className='searchInput'
                    type='text'
                    placeholder='en, de, fr ...'
                    onChange={this.handleLanguageChange} />
                </Col>
              </FormGroup> */}

              <FormGroup>
                <Col smOffset={4} sm={4} className='buttonWraper'>
                  <Button
                    className='searchButton'
                    onClick={this.handleSearch}>
                    Search
                  </Button>
                </Col>
              </FormGroup>
            </form>
          </div>
        </div>
      )
    }
  }

  render () {
    return (
      <div>
        <div
          className='searchIcon'
          onClick={this.handleToggleClick}>
          <SearchIcon size={30} />
        </div>
        {this.renderSearchForm()}
      </div>
    )
  }
}

@@ -457,18 +457,19 @@
 pes.func
-,
 %0A
+  
   // set
@@ -512,16 +512,18 @@
 .func%0A  
+ 
+ 
 // searc
@@ -562,16 +562,18 @@
 string,%0A
+  
   // tog
@@ -926,59 +926,8 @@
 alue
-,%0A      // language: this.props.searchLanguageValue
 %0A   
@@ -1161,109 +1161,8 @@
 %0A  %7D
-%0A  // handleLanguageChange = (e) =%3E %7B%0A  //   this.props.setSearchLanguageValue(e.target.value)%0A  // %7D
 %0A%0A  
@@ -1760,32 +1760,32 @@
          %3C/Col%3E%0A
+
               %3C/
@@ -1799,588 +1799,8 @@
 up%3E%0A
-              %7B/* %3CRow%3E%0A               %3Cdiv%3EOR%3C/div%3E%0A               %3C/Row%3E */%7D%0A              %7B/* %3CFormGroup controlId='formHorizontalPassword'%3E%0A                %3CCol cozmponentClass=%7BControlLabel%7D smOffset=%7B4%7D sm=%7B1%7D%3E%0A                 language%0A                 %3C/Col%3E%0A                %3CCol smOffset=%7B4%7D sm=%7B4%7D%3E%0A                  %3CFormControl%0A                    className='searchInput'%0A                    type='text'%0A                    placeholder='en, de, fr ...'%0A                    onChange=%7Bthis.handleLanguageChange%7D /%3E%0A                %3C/Col%3E%0A              %3C/FormGroup%3E */%7D%0A%0A
     

delete commands