import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction, isArray } from 'exotic'
import { wording } from '@skava/ui/dist/words'
import { ObserverForm, FormState } from '@skava/ui/dist/forms'
import { inputList } from './fixture'
import { StyledPrimaryButton, Wrapper } from './styled'
// import { handleResetPassword } from '../renderProps'

class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

class FormButton extends React.PureComponent {
  render() {
    return <StyledPrimaryButton aria-label={wording.signInLabel} {...this.props} data-qa={'qa-signin-signin'} />
  }
}

@observer
class FormCard extends ObserverForm {
  static FormState = formStateCard
  SubmitButton = FormButton
  defaultSubmitButtonLabel = wording.signInLabel

  static defaultProps = {
    state: formStateCard,
  }

  handleForgotPassword = event => {
    const { onForgotPasswordClick } = this.props
    if (isFunction(onForgotPasswordClick)) {
      const changeArgs = { event }
      onForgotPasswordClick(this.state)
    }
  }

  // adding handler for forgot password
  onInputInit = inputState => {
    if (inputState.name === 'forgotpassword') {
      inputState.onClick = this.handleForgotPassword
    }
  }

  handleSubmit = event => {
    const { onSignInClick } = this.props
    event.preventDefault()
    event.stopPropagation()

    if (this.validateForm()) {
      if (isFunction(onSignInClick)) {
        onSignInClick(this.state)
      }
    }
  }
}

class Form extends React.PureComponent {
  render() {
    return (
      <Wrapper>
        <FormCard {...this.props} />
      </Wrapper>
    )
  }
}
export { Form }
export default Form