import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isSafe, isFunction, isArray, isObj } from 'exotic'
import InputState from '@skava/ui/dist/forms/input/InputState'
import { ObserverForm, FormState } from '@skava/ui/dist/forms'
import { inputList, wording } from './fixture'
import { StyledPaymentForm, StyledPrimaryButton } from './styled'

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

const formStateCard = new FormStateCard()

const SubmitButton = props => <StyledPrimaryButton {...props} />

@observer
class PaymentForm extends ObserverForm {
  static FormState = formStateCard
  SubmitButton = SubmitButton
  defaultSubmitButtonLabel = wording.button

  toggleBillingAddress() {
    const checkBoxState = this.state.get('defaultBillingAddress')
    const isSelected = isSafe(checkBoxState) && checkBoxState.isSelected

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

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

  setValueOnValidation(items: InputState, inputField: Object) {
    if (isSafe(items.expiry)) {
      const expiryDate = items.expiry.split('/')

      items.expirationMonth = isSafe(expiryDate[0]) ? expiryDate[0] : ''
      items.expirationYear = isSafe(expiryDate[1]) ? expiryDate[1] : ''
    }

    if (
      isSafe(items[inputField.name]) &&
      inputField.value !== items[inputField.name]
    ) {
      inputField.setValue(items[inputField.name])
    }
  }

  onPrefil(inputState: InputState) {
    const { item } = this.props
    if (isObj(item)) {
      if (inputState.type === 'groupElements') {
        inputState.elementList.map(inputs => {
          this.setValueOnValidation(item, inputs)
        })
      } else {
        this.setValueOnValidation(item, inputState)
      }
    }
  }

  componentWillMount() {
    this.toggleBillingAddress()
  }

  componentWillUpdate() {
    this.toggleBillingAddress()
  }

  classList = {
    form: 'subscription-add-new-payment-form',
    submitButton: 'subscription-add-new-payment-submit-button',
  }

  static defaultProps = {
    state: formStateCard,
  }
  handleSubmit = event => {
    const { onPaymentCardSave } = this.props
    event.preventDefault()
    // console.log('data:', this.state.toSerialized())
    if (this.validateForm()) {
      // this.props.cardState.handleToggle()
      if (isFunction(onPaymentCardSave)) {
        onPaymentCardSave(this.state)
      }
    }
  }
}

class FormFields extends React.Component {
  render() {
    return (
      <StyledPaymentForm>
        <PaymentForm {...this.props} />
      </StyledPaymentForm>
    )
  }
}

export { FormFields }
export default FormFields