import React, { forwardRef } from 'react';

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

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

type Ref = any;

const TextField = forwardRef<Ref, Props>(({
  id = '',
  name = '',
  onChange = () => {},
  onBlur = () => {},
  defaultValue = '',
  placeholder = '',
  disabled = false,
  error = false,
  shouldFitContainer = false,
  variant = 'standard',
}, ref) => {

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    if (!disabled) {
      onChange(e.target.value);  
    }
  };

  const transferProps = {
    id,
    name,
    defaultValue,
    placeholder,
    onChange: handleChange,
    onBlur,
    disabled,
    error,
    shouldFitContainer,
  }

  return (
    variant === 'standard' ? (
      <Input
        ref={ref}
        {...transferProps}
      />  
    ) : (
      <TextArea
        ref={ref}
        {...transferProps}
      />
    )
  );
});

export default TextField;
