import React from 'react';
import IMask from 'imask';
import { Field } from 'formik';

import * as S from './styles';

const Input = ({
  err,
  type,
  name,
  mask,
  prefix,
  onClick,
  inlineCss,
}) => {
  const masked = mask && IMask.createMask(mask);

  return (
    <S.Wrapper inlineCss={inlineCss} err={err} onClick={() => onClick && onClick()}>
      <Field
        name={name}
      >
        {({ field, form: { setFieldValue } }) => (
          <>
            {prefix ? <span>{prefix}</span> : null}
            <input
              type={type}
              {...field}
              onChange={({ target: { value } }) => {
                setFieldValue(name,
                  masked ? masked.resolve(value) : value);
              }}
            />
          </>
        )}
      </Field>
    </S.Wrapper>
  );
};

export default Input;