import s from './InputWrapper.module.scss';
import { useField } from 'formik';
import { useState, useEffect } from 'react';

type InputWrapperT = {
  type: string;
  labelFor: string;
  name: string;
  tag: string;
  maxLength?: string;
  placeholder: string;
};

const InputWrapper = ({ ...props }: InputWrapperT) => {
  const { type, labelFor, name, tag, maxLength, placeholder } = props;
  const [field, meta]: any = useField(props);

  let error: string = '';
  let isError: boolean = !!error;

  if (meta.touched) {
    error = meta.error;
    isError = !!error;
  }

  return (
    <div className={s.input__wrapper}>
      {tag == 'input' ? (
        <input
          {...field}
          id={labelFor}
          name={name}
          type={type}
          className={s.input}
          placeholder={placeholder}
          maxLength={maxLength}
          // onChange={onChangeHundler}
        />
      ) : (
        <textarea
          {...field}
          id={labelFor}
          name={name}
          className={s.input}
          placeholder={placeholder}
          // onChange={onChangeHundler}
        ></textarea>
      )}

      {isError && <div className={`${isError ? s.error : null}`}>{error}</div>}
    </div>
  );
};

export default InputWrapper;