import { Input } from 'semantic-ui-react'

import './Input.less'

export default observer class _Input extends Component
  constructor: (props) ->
    super props

    @state = observable
      error: null

  @propTypes:
    onChange: PropTypes.func

  @defaultProps:
    onChange: =>

  validate: (value) =>
    if value is ''
      @state.error = null

      return

    if not @props.validator
      if @props.type is 'email'
        isValid = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test value

        if not isValid
          @state.error = '이메일이 형식에 맞지 않습니다'

      else if @props.type is 'password'
        isValid = true

        if value.length < 8
          isValid = false

        if not /[^a-zA-Z0-9]/.test value
          isValid = false

        if not /[1234567890]/.test value
          isValid = false

        if not isValid
          @state.error = '비밀번호는 숫자, 특수문자 포함 8글자 이상으로 해주세요'

    else
      error = @props.validator value

      @state.error = error

    if isValid
      @state.error = ''

  onChangeInput: (event, data) =>
    @validate data.value

    @props.onChange event, data, @state.error

  render: =>
    props = _.cloneDeep @props

    props.label = null

    <div className="slap-input" style={{ marginTop: @props.marginTop, marginLeft: @props.marginLeft }}>
      <div>{ @props.label } <span>*</span>&nbsp;&nbsp;&nbsp;<span>{ @state.error }</span></div>
      <Input fluid {...props} placeholder={@props.placeholder} onChange={@onChangeInput} />
    </div>