import React, { forwardRef } from 'react';

import { Input, TextArea } from './styled';

type Props = {
  id?: string;
  name?: string;
  onChange?: (val: string) => void;
  onBlur?: () => void;
  value?: string | number;
  defaultValue?: string | number;
  placeholder?: string;
  disabled?: boolean;
  error?: boolean;
  shouldFitContainer?: boolean;
  variant?: 'standard' | 'multiline';
};

type Ref = any;

const TextField = forwardRef<Ref, Props>(
  (
    { variant = 'standard', onChange, disabled = false, ...rest }: Props,
    ref
  ) => {
    const handleChange = (
      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ): void => {
      if (onChange && !disabled) {
        onChange(e.target.value);
      }
    };

    return variant === 'standard' ? (
      <Input
        data-testid="input"
        ref={ref}
        disabled={disabled}
        onChange={handleChange}
        {...rest}
      />
    ) : (
      <TextArea
        ref={ref}
        disabled={disabled}
        onChange={handleChange}
        {...rest}
      />
    );
  }
);

export default TextField;