import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction, isObj, isSafe } from 'exotic'
import InputState from 'src/forms/input/InputState'
import { ObserverInput, ObserverForm, FormState } from 'src/forms'
import { wording } from 'src/words'
import { inputList } from './fixture'
import { StyledShippingForm, StyledPrimaryButton } from './styled'

// @todo - radiogroup
class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

class FormButton extends React.PureComponent {
  render() {
    return <StyledPrimaryButton {...this.props} data-input-eh={true} />
  }
}

@observer
class FormCard extends ObserverForm {
  static FormState = formStateCard
  SubmitButton = FormButton
  defaultSubmitButtonLabel = wording.saveLabel

  static defaultProps = {
    state: formStateCard,
  }

  onPrefil(inputState: InputState) {
    const { item } = this.props
    if (isObj(item)) {
      const fullName =
        (isSafe(item.firstName) ? item.firstName : '') +
        ' ' +
        (isSafe(item.lastName) ? item.lastName : '')
      item.name = fullName

      if (
        isSafe(item[inputState.name]) &&
        inputState.value !== item[inputState.name]
      ) {
        inputState.setValue(item[inputState.name])
      }
    }
  }

  handleSubmit = event => {
    const { onShippingCardSave } = this.props
    event.preventDefault()
    console.log('data:', this.state.toSerialized())
    if (this.validateForm()) {
      if (isFunction(onShippingCardSave)) {
        onShippingCardSave(this.state)
      }
    }
  }
}

class Form extends React.Component {
  render() {
    return (
      <StyledShippingForm>
        <FormCard {...this.props} />
      </StyledShippingForm>
    )
  }
}

export { Form }
export default Form