import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { action } from 'xmobx/mobx'
import { isArray, isSafe, isFunction, isObj } from 'exotic'
import { ObserverForm, FormState } from 'src/forms'
import { wording } from 'src/words'
import { PaymentWithBillingAddressProps } from '../typings'
import { inputList } from './fixture'
import { paymentWithBillingAddressFormState } from './state'
import { Wrapper, StyledCancel, StyledSubmitButton } from './styled'

class FormStateCard extends FormState {
  inputsList = inputList
}
const formStateCard = new FormStateCard()

const SubmitButton = props => <StyledSubmitButton {...props} />
const CancelButton = props => <StyledCancel {...props} />
const fieldsToDisable = [
  'cardFirstName',
  'cardLastName',
  'cardNumber',
  'expirationMonth',
  'expirationYear',
  'securityCode',
]

/**
 * @todo this is missing typings!!!
 */

@observer
class FormCard extends ObserverForm {
  static FormState = formStateCard
  isSubmitButtonNeeded = !this.props.hasBlurValidation
  isCancelButtonNeeded = !this.props.hasBlurValidation

  SubmitButton = SubmitButton
  CancelButton = CancelButton

  static defaultProps = {
    state: formStateCard,
  }

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

  @action.bound
  setCheckBoxVisibility(state, isVisible) {
    state.isSelected = !isVisible
    state.isHidden = isVisible
  }

  componentDidMount() {
    const { isEditPayment } = this.props
    paymentWithBillingAddressFormState.setPaymentForm(this)
    if (isEditPayment === true) {
      this.doPrefillForm(this.props, this.state)
      const checkBoxState = this.state.get('billingAddressSameasShipping')
      this.setCheckBoxVisibility(checkBoxState, true)
    }
  }
  componentWillMount() {
    paymentWithBillingAddressFormState.toggleBillingAddress(this)
    const {
      submitButtonLabel,
      cancelButtonLabel,
      submitButtonDataQa,
      cancelButtonDataQa,
    } = this.props

    this.defaultSubmitButtonLabel = isSafe(submitButtonLabel)
      ? submitButtonLabel
      : wording.submit
    this.defaultCancelButtonLabel = isSafe(cancelButtonLabel)
      ? cancelButtonLabel
      : wording.cancel
    this.submitDataQa = submitButtonDataQa
    this.cancelDataQa = cancelButtonDataQa
  }
  componentWillUpdate() {
    paymentWithBillingAddressFormState.toggleBillingAddress(this)
  }
  componentWillUnmount() {
    const { isEditPayment } = this.props

    this.state.inputsList.map(inputState => {
      this.resetFormState(inputState)
      if (isEditPayment === true) {
        inputState.isDisabled = false
        if (inputState.name === 'billingAddressSameasShipping') {
          this.setCheckBoxVisibility(inputState, false)
        }
      }
    })
  }

  handleSubmit = (event: Event) => {
    event.preventDefault()
    const { hasSubmitValidation, onPaymentSubmit } = this.props
    if (hasSubmitValidation === true) {
      paymentWithBillingAddressFormState.isValidForm = this.validateForm()
      if (
        paymentWithBillingAddressFormState.isValidForm &&
        isFunction(onPaymentSubmit)
      ) {
        onPaymentSubmit(this.state)
        this.state.inputsList.map(this.resetFormState)
      }
    }
  }
  handleCancel = (event: Event) => {
    event.preventDefault()
    const { onPaymentCancel } = this.props
    if (isFunction(onPaymentCancel)) {
      onPaymentCancel(this.state)
    }
  }
}

class Form extends React.PureComponent<PaymentWithBillingAddressProps> {
  render() {
    const { className } = this.props
    console.log('[PaymentWithBillingAddress] Form: ', this.props)
    return (
      <Wrapper className={className}>
        <FormCard {...this.props} />
      </Wrapper>
    )
  }
}

export { Form }
export default Form