/* eslint-disable react/prop-types */
import classNames from 'classnames';

function FormTextArea({ field, form, inline, ...props }) {
  const id = props.id || field.name;
  const label = props.label || field.name;
  const placeholder = props.placeholder || label;
  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 }, props.className)}>
      <label
        htmlFor={id}
        className={classNames(
          inline ? 'my-2 block sm:ml-4 sm:inline' : 'mb-3 block',
          'text-sm font-medium ',
          { 'after:mx-1 after:text-red-500 after:content-["*"]': props.required },
          { 'after:mx-1 after:text-indigo-600 after:content-["(اختیاری)"]': !props.required },
          hasError ? 'text-red-400' : 'text-gray-700'
        )}
      >
        {`${exactLabel} :`}
      </label>
      <textarea
        {...props}
        {...field}
        id={id}
        placeholder={placeholder}
        className={classNames(
          'rounded-md border px-4 py-2 shadow-sm focus:outline-none sm:text-sm',
          { 'text-red-300 placeholder-red-300': hasError },
          { 'border-red-300 bg-red-50 focus:border-red-500 focus:ring-red-500': hasError },
          { 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500': !hasError },
          inline ? 'my-2 block sm:ml-4 sm:inline' : 'block w-full'
        )}
      />
      {hasError && <div className='mt-1 px-2 text-sm text-red-400'>{error}</div>}
    </div>
  );
}

export default FormTextArea;
