import { observer } from 'xmobx/mobx-react'
import { action, observable } from 'xmobx/mobx'
import { isSafe, isArray, isFunction } from 'exotic'
import InputState from 'src/forms/input/InputState'

class PaymentWithBillingAddressFormState {
  @observable paymentWithBillingAddress = {}
  @observable isValidForm = false

  @action
  setPaymentForm(form) {
    this.paymentWithBillingAddress = form
    console.log(
      '[Payment with Billing Address] setPaymentForm()',
      this
    )
  }

  @action.bound
  handleBlur = () => {
    const formInstance = this.paymentWithBillingAddress
    const { state, props, validateForm } = formInstance
    const { hasBlurValidation, onPaymentBlur } = props

    if (hasBlurValidation === true) {
      this.isValidForm = validateForm()
      if (this.isValidForm === true && isFunction(onPaymentBlur)) {
        onPaymentBlur(state)
      }
    } else {
      console.warn('THIS FORM HAS NO ONBLUR VALIDATION SUPPORT ENABLED :: PASS IN THE FLAG hasBlurValidation={true}')
    }
  }

  @action.bound
  toggleBillingAddress(props) {
    const checkBoxState = props.state.get('billingAddressSameAsShipping')
    const isSelected = isSafe(checkBoxState) && checkBoxState.isSelected

    const toList = state => isArray(state.inputsList) && state.inputsList
    const inputStateList = toList(props.state)

    inputStateList.map((inputs: InputState) => {
      if (inputs.name === 'billing-address') {
        inputs.isHidden = isSelected
      }
    })
  }
}

// Object Creation
const paymentWithBillingAddressFormState = new PaymentWithBillingAddressFormState()

export { paymentWithBillingAddressFormState }
export default paymentWithBillingAddressFormState