import React from 'react'
import { Input } from 'antd'
import NumberInput from 'toss.components/NumberInput'
import './styles.scss'

const FormInput = ({ showCounter, prefix, suffix, value, onChange, maxLength, inputRef, type, ...props }) => {
  const valueLength = value ? value.length : 0
  return (
    <div className={`lz-component-form-input${type === 'textarea' ? ' lz-component-form-input' : ''}`}>
      {prefix ? <span className="input-prefix">{prefix}</span> : null}
      <div className="input-wrap">
        {type === 'textarea' ? (
          <Input.Textarea className="textarea" value={value} ref={inputRef} onChange={onChange} {...props} />
        ) : type == 'number' ? (
          <NumberInput value={value} ref={inputRef} onChange={onChange} {...props} />
        ) : (
          <Input autoComplete="off" className="input" value={value} ref={inputRef} onChange={onChange} {...props} />
        )}
        {showCounter ? (
          <span className="input-counter" data-overflow={valueLength > maxLength}>
            {valueLength}/{maxLength}
          </span>
        ) : null}
      </div>
      {suffix ? <span className="input-suffix">{suffix}</span> : null}
    </div>
  )
}

FormInput.defaultProps = {
  showCounter: false,
}

export default React.forwardRef((props, ref) => {
  return <FormInput {...props} inputRef={ref} />
})