import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction } from 'exotic'
import { ObserverInput, ObserverForm, FormState } from 'src/forms'
import { inputList, wording } from './fixture'
import {
  StyledResetPasswordForm,
  StyledPrimaryButton,
  StyledSecondaryButton,
} from './styled'

class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

class SubmitFormButton extends React.PureComponent {
  render() {
    return (
      <StyledPrimaryButton
        {...this.props}
        data-input-eh={true}
        data-qa={'qa-continue-button'}
        text={wording.submit}
      />
    )
  }
}

class CancelFormButton extends React.PureComponent {
  render() {
    return (
      <StyledSecondaryButton
        {...this.props}
        data-input-eh={true}
        data-qa={'qa-cancel-button'}
        text={wording.cancel}
      />
    )
  }
}

@observer
class FormCard extends ObserverForm {
  static FormState = formStateCard
  SubmitButton = SubmitFormButton
  isCancelButtonNeeded = true
  CancelButton = CancelFormButton

  static defaultProps = {
    state: formStateCard,
  }
  handleSubmit = event => {
    const { onContinueClick } = this.props
    event.preventDefault()
    if (this.validateForm()) {
      if (isFunction(onContinueClick)) {
        const changeArgs = { event }
        onContinueClick(this.state)
      }
    }
  }
  handleCancel = event => {
    const { onCancelClick } = this.props
    event.preventDefault()
    if (isFunction(onCancelClick)) {
      const changeArgs = { event }
      onCancelClick(this.state)
    }
  }
}

class Form extends React.Component {
  render() {
    return (
      <StyledResetPasswordForm>
        <FormCard {...this.props} />
      </StyledResetPasswordForm>
    )
  }
}

export { Form }
export default Form