import {connectSearchBox} from 'react-instantsearch/connectors'
import IconSearch from 'react-icons/lib/md/search'
import IconClear from 'react-icons/lib/md/clear'
import React, {createClass} from 'react'
import classnames from 'classnames'

import './style.scss'

const CustomSearchBox = createClass({
  getInitialState () {
    return { focus: false }
  },

  onInputMount (input) {
    this.input = input
  },

  onChange (e) {
    this.props.refine(e.target.value)
  },

  onClear () {
    this.props.refine('')
    this.input.focus()
  },

  onFocus (e) {
    this.setState({focus: true})
  },

  onBlur (e) {
    this.setState({focus: false})
  },

  render () {
    const iconStyle = 'searchbox__icon absolute f3'
    const {props, onInputMount, onChange, onFocus, onBlur, onClear, state} = this
    const {focus: isFocus} = state
    const {currentRefinement, className, style} = props

    const iconSearchStyle = classnames(iconStyle, 'searchbox__icon-search ph3-l ph2 ml2-ns ml1 mr2-ns', {
      'searchbox__icon-search--focus': isFocus,
      'searchbox__icon-search--blur': !isFocus
    })

    const iconClearStyle = classnames(iconStyle, 'searchbox__icon-clear nl4 pointer', {
      'searchbox__icon-clear--active': currentRefinement
    })

    const boxStyle = classnames('searchbox relative w-80 w-70-l', className)

    return (
      <div data-app='searchbox' role='search' className={boxStyle} style={style}>
        <IconSearch
          className={iconSearchStyle}
        />
        <input
          ref={onInputMount}
          className='searchbox__input border-0 outline-0 w-100 input-reset bg-black-10 ph5-ns pv2 lh-solid br2 fw3'
          type='search'
          results={5}
          value={currentRefinement}
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
          autoSave='searchbox'
          name='s'
          placeholder='brand, model, size,...'
          autoComplete='off'
          autoCorrect='off'
          autoCapitalize='off'
          spellCheck='false'
          autoFocus
        />
        <IconClear
          onClick={onClear}
          className={iconClearStyle}
        />
      </div>
    )
  }
})

export default connectSearchBox(CustomSearchBox)

@@ -331,17 +331,16 @@
 return %7B
- 
 focus: f
@@ -343,17 +343,16 @@
 s: false
- 
 %7D%0A  %7D,%0A%0A
@@ -727,14 +727,27 @@
 st %7B
-props,
+%0A      props,%0A     
  onI
@@ -756,16 +756,22 @@
 utMount,
+%0A     
  onChang
@@ -772,16 +772,22 @@
 nChange,
+%0A     
  onFocus
@@ -791,16 +791,22 @@
 cus,
+%0A     
  onBlur,
  onC
@@ -801,16 +801,22 @@
  onBlur,
+%0A     
  onClear
@@ -816,22 +816,33 @@
 onClear,
+%0A     
  state
+%0A    
 %7D = this
@@ -965,32 +965,39 @@
 le = classnames(
+%0A      
 iconStyle, 'sear
@@ -982,32 +982,38 @@
       iconStyle,
+%0A     
  'searchbox__ico
@@ -1050,16 +1050,22 @@
 mr2-ns',
+%0A     
  %7B%0A     
@@ -1057,32 +1057,34 @@
 ,%0A      %7B%0A      
+ 
+ 
 'searchbox__icon
@@ -1105,24 +1105,26 @@
 ': isFocus,%0A
+  
       'searc
@@ -1158,25 +1158,32 @@
 isFocus%0A    
-%7D
+  %7D%0A    
 )%0A%0A    const
@@ -1211,16 +1211,23 @@
 ssnames(
+%0A      
 iconStyl
@@ -1228,16 +1228,22 @@
 onStyle,
+%0A     
  'search
@@ -1271,19 +1271,27 @@
 ointer',
+%0A     
  %7B%0A
+  
       's
@@ -1343,17 +1343,24 @@
 ent%0A    
-%7D
+  %7D%0A    
 )%0A%0A    c
@@ -1452,19 +1452,47 @@
 %0A      %3C
-div
+form%0A        noValidate%0A       
  data-ap
@@ -1504,16 +1504,24 @@
 archbox'
+%0A       
  role='s
@@ -1526,16 +1526,24 @@
 'search'
+%0A       
  classNa
@@ -1555,16 +1555,24 @@
 oxStyle%7D
+%0A       
  style=%7B
@@ -1598,26 +1598,16 @@
 onSearch
-%0A         
  classNa
@@ -1622,32 +1622,24 @@
 SearchStyle%7D
-%0A       
  /%3E%0A        
@@ -2170,16 +2170,38 @@
 'false'%0A
+          required=''%0A
         
@@ -2241,26 +2241,16 @@
 conClear
-%0A         
  onClick
@@ -2259,26 +2259,16 @@
 onClear%7D
-%0A         
  classNa
@@ -2286,24 +2286,16 @@
 arStyle%7D
-%0A       
  /%3E%0A    
@@ -2302,11 +2302,12 @@
   %3C/
-div
+form
 %3E%0A  

Improve searchbox