import React from 'react'
import { isObj, isFunction } from 'exotic'
import { ObserverForm, FormState } from 'src/forms'
import { SearchInputProps } from '../typings'
import { inputList } from './fixture'

class FormStateCard extends FormState {
  inputsList = inputList
}

class Form extends ObserverForm<SearchInputProps> {
  constructor(props) {
    super(props)
    this.state = new FormStateCard(props)
  }

  isSubmitButtonNeeded = false

  static defaultProps = {
    state: new FormStateCard(),
  }

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

  onInputInit = inputState => {
    if (inputState.name === 'search') {
      inputState.onIconClick = this.handleSearch
    }
  }

  componentWillMount() {
    const { searchAdditionalProps } = this.props
    const searchInputList = this.state.get('search')

    if (isObj(searchAdditionalProps)) {
      Object.keys(searchAdditionalProps).forEach(
        key => (searchInputList[key] = searchAdditionalProps[key])
      )
    }
  }

  onSubmit = (event: Event) => {
    event.preventDefault()
    const { onSearch } = this.props
    if (isFunction(onSearch)) {
      onSearch(this.state)
    }
  }
}

export { Form }
export default Form