import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { action } from 'xmobx/mobx'
import { omit } from '@skava/utils'
import { isFunction } from 'exotic'
import { isValidSelect } from 'src/forms'
import {
  ActiveOption,
  SelectDropDown,
  ActiveOptionProps,
} from 'molecules/SelectDropDown'
import { errorMessage } from 'src/forms/deps'
import { InputChain } from '../../../InputChain'
import { SelectBoxWrapper, StyledLabel, StyledErrorMessage } from './styled'

@observer
class SelectBoxInput extends InputChain {
  static isSatisfiedByProps(props): boolean {
    return props.type === 'select'
  }

  @action.bound
  validateSelectField(args) {
    const state = this.get('state')
    if (isValidSelect(args)) {
      state.isValidInput = true
    } else {
      state.errorMessage = errorMessage(state.errorMessageFor)
      state.isValidInput = false
    }
  }

  @action.bound
  handleChange(args) {
    const { onDropdownChange } = this.get('props')
    const state = this.get('state')
    const { label } = state
    if (isFunction(onDropdownChange)) {
      onDropdownChange({ value: args, state })
    }
    this.validateSelectField({ value: args, label })
    state.setValue(args)
    // console.log('[Forms/SelectDropdown] handleDropdownChange()', args, state)
  }

  @action.bound
  handleBlur() {
    const { value, label } = this.get('state')
    this.validateSelectField({ value, label })
    // console.log('[Forms/SelectDropdown] handleDropdownBlur()', state)
  }

  @action.bound
  handleFocus() {
    const state = this.get('state')
    state.isValidInput = true
    // console.log('[Forms/SelectDropdown] handleDropdownFocus()')
  }

  render() {
    const props = this.get('props')
    const state = this.get('state')
    const {
      label,
      labelText,
      wrapperClassName,
      options,
      className,
      ...remainingProps
    } = props

    const renderActiveItem = (props, state) => {
      const passThroughProps = omit(props, ['label'])
      return <ActiveOption state={state} {...passThroughProps} />
    }

    const errorMessageView = state.isValidInput === false && (
      <StyledErrorMessage
        key="textbox-error-message"
        text={state.errorMessage}
        className={'input-error-message'}
      />
    )

    const attributes = {
      options,
      className: `${className}${state.isValidInput ? '' : ' input-error'}`,
      onChange: this.handleChange,
      onBlur: this.handleBlur,
      onFocus: this.handleFocus,
      renderActiveItem,
      ...remainingProps,
    }
    console.info(attributes)

    return (
      <SelectBoxWrapper className={wrapperClassName}>
        <StyledLabel className={'label-text'} content={labelText} />
        <SelectDropDown {...attributes} data-qa={props.dataQa} />
        {errorMessageView}
      </SelectBoxWrapper>
    )
  }
}

export { SelectBoxInput }
export default SelectBoxInput