/* eslint-disable react/prop-types */
import classNames from 'classnames';
import { EyeIcon, EyeOffIcon } from '@heroicons/react/outline';
import { useBooleanState } from '../../../hooks/index/use-boolean-state';

function FormInput({ field, form, inline, ...props }) {
  const { value: showPass, toggle: togglePass } = useBooleanState(false);
  const id = props.id || field.name;
  const label = props.label || field.name;
  const placeholder = props.placeholder || label;
  const type = props.type || 'input';
  const exactLabel = ['.', '?', '!', '؟'].includes(label.charAt(label.length - 1))
    ? label.substring(0, label.length - 1)
    : label;
  const error = form.errors[field.name];
  const hasError = error && form.touched[field.name];

  return (
    <div
      className={classNames({ 'inline ': inline }, { hidden: type === 'hidden' }, props.className)}
    >
      <label
        htmlFor={id}
        className={classNames(
          inline ? 'my-2 block sm:ml-4 sm:inline' : 'mb-3 block',
          'text-sm font-medium text-gray-700',
          { 'after:mx-1 after:text-red-500 after:content-["*"]': props.required },
          { 'after:mx-1 after:text-green-500 after:content-["(اختیاری)"]': !props.required },
          { 'text-red-500': hasError }
        )}
      >
        {`${exactLabel} :`}
      </label>
      <div
        className={classNames(
          'flex flex-row-reverse items-center p-0',
          { 'rounded-md border shadow-sm': type !== 'hidden' },
          { 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-red-500': hasError },
          { 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500': !hasError }
        )}
      >
        {props.prefix && (
          <span
            className={classNames('ltr mx-2 font-normal xs:mx-4', { 'text-red-400 ': hasError })}
          >
            {props.prefix}
          </span>
        )}
        {type === 'password' && (
          <span className={classNames('absolute z-10 mx-3', { 'text-red-400 ': hasError })}>
            {showPass ? (
              <EyeIcon width={15} onClick={togglePass} />
            ) : (
              <EyeOffIcon width={15} onClick={togglePass} />
            )}
          </span>
        )}
        <input
          {...props}
          {...field}
          id={id}
          data-testid={`${field.name}-field`}
          type={type === 'password' && showPass ? 'text' : type}
          placeholder={placeholder}
          className={classNames(
            'flex-grow-1 rounded-md border-none px-4 py-2 outline-none sm:text-sm',
            'text-center placeholder:text-center',
            { 'text-red-400 placeholder:text-red-400': hasError },
            { 'my-2 block sm:ml-4 sm:inline': inline },
            { 'block w-full': !inline }
          )}
        />
      </div>
      {hasError && (
        <div data-testid={`${field.name}-field-error`} className='mt-1 px-2 text-sm text-red-400'>
          {error}
        </div>
      )}
    </div>
  );
}

export default FormInput;
