import {connectSearchBox} from 'react-instantsearch/connectors'
import IconSearch from '../Icon/search'
import IconClose from '../Icon/close'
import createClass from 'create-react-class'
import classnames from 'classnames'
import React from 'react'

import './style.scss'

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

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

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

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

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

  onSubmit (e) {
    e.preventDefault()
    e.stopPropagation()
    this.input.blur()
    return false
  },

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

    const iconSearchStyle = classnames(
      iconStyle,
      'searchbox__icon-search',
      {
        'searchbox__icon-search--focus': isFocus,
        'searchbox__icon-search--blur': !isFocus
      }
    )

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

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

    return (
      <form
        noValidate
        data-app='searchbox'
        role='search'
        className={boxStyle}
        style={style}
        onSubmit={onSubmit}
        >
        <IconSearch className={iconSearchStyle} />
        <input
          ref={node => (this.input = node)}
          className='searchbox__input white border-0 outline-0 w-100 input-reset bg-black-10 pv2 lh-solid br2 fw3 f5 helvetica'
          type='search'
          value={currentRefinement}
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
          placeholder='What do you want to find?'
          autoComplete='off'
          autoCorrect='off'
          autoCapitalize='off'
          spellCheck='false'
          autoFocus
        />
        <IconClose onClick={onSearchClear} className={iconSearchClearStyle} />
      </form>
    )
  }
})

export default connectSearchBox(CustomSearchBox)

@@ -1018,16 +1018,21 @@
 e, style
+, get
 %7D = prop
@@ -1508,16 +1508,53 @@
 assName)
+%0A    const isMobile = get('isMobile')
 %0A%0A    re
@@ -2135,16 +2135,50 @@
 eholder=
+%7BisMobile ? 'sails, boards,...' : 
 'What do
@@ -2196,16 +2196,17 @@
 o find?'
+%7D
 %0A       

Fix placeholder on mobile