import { ErrorMessage } from '@hookform/error-message'
import React from 'react'
import { useFormContext } from 'react-hook-form'

import { IFormInputProps } from './types'

import './index.less'

// UnControlled Form Component
// this component should be used in the Form with react-hook-form provider (see ./Form.tsx)
const FormInput = ({
  name,
  required,
  inline,
  fluid,
  label,
  rules,
  preHelper,
  helper,
  ...restProps
}: IFormInputProps) => {
  const { register, formState, getFieldState } = useFormContext()
  // use lodash get method to query a chained path of the property
  const { error } = getFieldState(name, formState)

  return (
    <div className="form-group">
      <div className={`${inline ? 'inline' : ''} ${required ? 'required' : ''} field`}>
        {preHelper}
        {label && <label htmlFor={name}>{label}</label>}
        <div className={`ui input ${fluid ? 'fluid' : ''}`}>
          <input id={name} {...register(name, rules)} {...restProps} />
        </div>
        {helper}
      </div>
      {/* for input validation message */}
      <p className={`hint ${!!error ? 'negative' : ''}`}>
        {!!error && <ErrorMessage errors={formState.errors} name={name} />}
      </p>
    </div>
  )
}

export default React.memo(FormInput)