import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { addConfirmPasswordToAttributes } from './deps'
import {
  ConfirmPasswordPluginProps as Props,
  ConfirmPasswordInputState,
} from './typings'
import { PasswordPlugin } from './PasswordPlugin'

@observer
class ConfirmPasswordPlugin extends React.Component<Props> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['confirmPassword'].includes(props.type)
  }
  static defaultState = (inputState: ConfirmPasswordInputState) => {
    addConfirmPasswordToAttributes(inputState)
    const confirmPasswordState = inputState.attributes.confirmPasswordState!
    return {
      validate: () => confirmPasswordState.isValid,
    }
  }
  render() {
    const { type, state, ...remainingProps } = this.props
    const { password, confirmPassword } = state.attributes.confirmPasswordState!

    return (
      <>
        <PasswordPlugin
          state={password}
          {...remainingProps}
          type="password"
          autoComplete="password"
        />
        <span data-qa="password-rules-label">
          Password must contain at least 6 characters.
        </span>
        <PasswordPlugin
          state={confirmPassword}
          {...remainingProps}
          type="password"
          autoComplete="password"
        />
      </>
    )
  }
}

export { ConfirmPasswordPlugin }
export default ConfirmPasswordPlugin