import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction } from 'exotic'
import { omit } from 'uxui-modules/utils/omit'
import { ObserverForm, FormState } from 'src/forms'
import { wording } from 'src/words'
import { changePasswordInputList } from '../fixture'
import { StyledButton } from '../styled'
import { Heading, ChangePasswordWrapper } from './styled'

class FormStateCard extends FormState {
  inputsList = changePasswordInputList
}

const formStateCard = new FormStateCard()

class FormButton extends React.PureComponent {
  render() {
    const passThroughProps = omit(this.props, ['children'])
    return <StyledButton {...passThroughProps} text={wording.resetPassword} data-qa={'qa-reset-password'}/>
  }
}

@observer
class FormCard extends ObserverForm {
  static FormCard = formStateCard
  SubmitButton = FormButton

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

class ChangePassword extends React.PureComponent {
  render() {
    return (
      <ChangePasswordWrapper>
        <Heading breedType="h2" content={wording.changePassword} />
        <FormCard {...this.props} />
      </ChangePasswordWrapper>
    )
  }
}

export { ChangePassword }
export default ChangePassword