import React, { forwardRef } from 'react';

import { Input } 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;
};

const InputBox = forwardRef<HTMLInputElement, Props>(
  ({ onChange, disabled = false, ...rest }: Props, ref) => {
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
      if (onChange && !disabled) {
        onChange(e.target.value);
      }
    };

    return (
      <Input
        type="text"
        data-testid="input"
        ref={ref}
        disabled={disabled}
        onChange={handleChange}
        {...rest}
      />
    );
  },
);

InputBox.defaultProps = {
  id: '',
  name: '',
  onChange: () => {
    // do something
  },
  onBlur: () => {
    // do something
  },
  value: undefined,
  defaultValue: undefined,
  placeholder: '',
  disabled: false,
  error: false,
  shouldFitContainer: false,
};

export default InputBox;