import { observable, computed } from 'xmobx/mobx'
import { isValidPassword } from '../../../validators'
import { InputState } from '../../inputs'

export class ConfirmPasswordState {
  @observable.ref password: InputState = new InputState()
  @observable.ref confirmPassword: InputState = new InputState()

  @computed
  get isValid() {
    return this.password.isValid && this.confirmPassword.isValid
  }
  toJSON() {
    return {
      password: this.password.value,
    }
  }
  static init() {
    const state = new ConfirmPasswordState()
    state.password.setType('password')
    state.confirmPassword.setType('password')

    /**
     * @todo use `extends string ? ...` as a type conditional to auto do this
     */
    state.password.setValidator(value => {
      // @todo password rules...
      return isValidPassword(value as string) ? true : 'is not valid password'
    })

    /**
     * @todo could disable it if we don't have a value in password
     */
    state.confirmPassword.setValidator(value => {
      if (!isValidPassword(value as string)) {
        // can do password validation here
        return 'is not valid password'
      } else if (value !== state.password.value) {
        return 'passwords must match'
      } else {
        return true
      }
    })
    return state
  }
}