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

class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

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

  static defaultProps = {
    state: formStateCard,
  }
  componentDidMount() {
    shippingAddressFormState.setShippingAddressForm(this)
  }
}

class Form extends React.PureComponent<ShippingAddressProps> {
  render() {
    return (
      <Wrapper>
        <FormCard {...this.props} />
      </Wrapper>
    )
  }
}

export { Form }
export default Form