import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isArray, isObj, isSafe, isFunction } from 'exotic'
import { ObserverForm, FormState } from 'src/forms'
import { ShippingAddressProps } from '../typings'
import { inputList } from './fixture'
import { shippingAddressFormState } from './state'
import { Wrapper } from './styled'
import { FormProps } from './typings'

class FormStateCard extends FormState {
  inputsList = inputList
}

const fieldsToFill = [
  'firstName',
  'middleName',
  'lastName',
  'addressLine1',
  'addressLine2',
  'city',
  'state',
  'postalCode',
  'country',
  'telephone',
  'emailAddress',
]

@observer
class FormCard<Props extends FormProps = FormProps> extends ObserverForm<
  Props
> {
  constructor(props) {
    super(props)
    this.state = new FormStateCard()
  }

  isSubmitButtonNeeded = false

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

  onSubmit = event => {
    event.preventDefault()
    const { hasBlurValidation } = this.props
    if (hasBlurValidation === false) {
      const isValidForm = this.validateForm()
      const { onFormSubmit } = this.props
      if (isValidForm === true && isFunction(onFormSubmit)) {
        onFormSubmit(this.state)
      }
    }
  }

  doPrefillForm(props, state) {
    const { address } = props
    const toList = state => isArray(state.inputsList) && state.inputsList
    const list = toList(state)
    list.map(inputState => {
      fieldsToFill.map(fieldName => {
        if (
          isSafe(address[fieldName]) &&
          inputState.name === fieldName &&
          inputState.value !== address[fieldName]
        ) {
          inputState.setValue(address[fieldName])
        }
      })
    })
  }

  componentWillMount() {
    const { isRegisteredUser, addressFormIdentifier } = this.props
    this.formId = addressFormIdentifier
    if (isSafe(isRegisteredUser) && isRegisteredUser === true) {
      const inputState = this.state.get('emailAddress')
      inputState.isHidden = true
    }
  }

  componentDidMount() {
    const { address } = this.props
    shippingAddressFormState.setShippingAddressForm(this)
    if (isObj(address)) {
      this.doPrefillForm(this.props, this.state)
    }
  }

  componentWillUnmount() {
    if (isObj(this.props.address)) {
      this.state.inputsList.map(inputState => {
        this.resetFormState(inputState)
      })
    }
  }
}

class Form extends React.PureComponent<ShippingAddressProps> {
  static defaultProps = {
    hasBlurValidation: false,
  }
  render() {
    const { className } = this.props
    return (
      <Wrapper className={className}>
        <FormCard {...this.props} />
      </Wrapper>
    )
  }
}

export { Form }
export default Form