import React from 'react'
import { isArray, isFunction } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { ObserverForm, FormState } from '@skava/ui/dist/forms'
import { searchInputList } from '../fixture'
import { Wrapper } from './styled'

class FormStateCard extends FormState {
  inputsList = searchInputList
}

const formStateCard = new FormStateCard()

@observer
class SearchForm extends ObserverForm {
  static FormState = formStateCard
  isSubmitButtonNeeded = false

  static defaultProps = {
    state: formStateCard,
  }

  handleChange = args => {
    const { value, state } = args
    state.setValue(value)
    this.handleSearch()
  }

  handleSearch = () => {
    const { onSearch } = this.props
    console.log('[Search form] state value', this.state.toSerialized())
    if (isFunction(onSearch)) {
      onSearch(this.state)
    }
  }

  onInputInit = inputState => {
    if (inputState.type === 'select') {
      inputState.onDropdownChange = this.handleChange
    } else if (inputState.name === 'search') {
      inputState.onIconClick = this.handleSearch
    }
  }

  componentWillMount() {
    const toList = state => isArray(state.inputsList) && state.inputsList
    const list = toList(this.state)
    this.onInputInit(list)
  }
}

class SearchUser extends React.PureComponent {
  render() {
    return (
      <Wrapper>
        <SearchForm {...this.props} />
      </Wrapper>
    )
  }
}

export { SearchUser }
export default SearchUser