import Input from '../Input/Input.coffee'

export default observer class SignUpForm extends Component
  constructor: (props) ->
    super props
    
    @state = observable
      email: props.defaultValue.email or ''
      password: props.defaultValue.password or ''
      passwordConfirm: props.defaultValue.passwordConfirm or ''
      emailError: if props.defaultValue.email then '' else null
      passwordError: if props.defaultValue.password then '' else null
      passwordConfirmError: if props.defaultValue.passwordConfirm then '' else null

  @propTypes:
    defaultValue: PropTypes.object
    onChange: PropTypes.func

  @defaultProps:
    defaultValue: {}
    onChange: =>

  onChangeInput: (event, data, error) =>
    @state["#{data.name}"] = data.value

    @state["#{data.name}Error"] = error

    value =
      email: @state.email
      password: @state.password
      passwordConfirm: @state.passwordConfirm

    error =
      email: @state.emailError
      password: @state.passwordError
      passwordConfirm: @state.passwordConfirmError

    @props.onChange value, error

  passwordConfirmValidator: (value) =>
    if value isnt @state.password
      '비밀번호가 일치하지 않습니다'

    else
      ''

  render: =>
    <div>
      <Input type="email" defaultValue={@props.defaultValue.email} onChange={@onChangeInput} name="email" label="이메일" placeholder="이메일" />
      <Input marginTop={20} type="password" defaultValue={@props.defaultValue.password} onChange={@onChangeInput} name="password" label="비밀번호" placeholder="비밀번호" />
      <Input marginTop={20} type="password" defaultValue={@props.defaultValue.passwordConfirm} onChange={@onChangeInput} name="passwordConfirm" label="비밀번호 확인" validator={@passwordConfirmValidator} placeholder="비밀번호 확인" />
    </div>