import React, { FC, useState, useCallback, InputHTMLAttributes } from 'react';
import * as sc from './styles';

export interface Props extends InputHTMLAttributes<HTMLInputElement> {
  unit?: React.ReactNode;
  icon?: React.ReactNode;
  invalid?: boolean;
  inputRef?: React.Ref<HTMLInputElement>;
}

// export const BaseInput: FC<Props> = React.forwardRef(
//   (
//     {
//       icon,
//       unit,
//       onFocus,
//       onBlur,
//       readOnly,
//       disabled,
//       invalid,
//       className,
//       inputRef,
//       ...props
//     }: Props,
//     ref
//   ) => {

//   }
// );

export const BaseInput: FC<Props> = props => {
  const {
    icon,
    unit,
    onFocus,
    onBlur,
    readOnly,
    disabled,
    invalid,
    className,
    inputRef,
    ...restProps
  } = props;

  const [focused, setFocusedState] = useState(false);
  const handleBlur = useCallback(
    e => {
      onBlur && onBlur(e);
      setFocusedState(false);
    },
    [onBlur, setFocusedState]
  );

  const handleFocus = useCallback(
    e => {
      onFocus && onFocus(e);
      setFocusedState(true);
    },
    [onFocus, setFocusedState]
  );

  return (
    <sc.Wrapper {...{ focused, disabled, invalid, readOnly, className }}>
      {icon && <sc.Icon>{icon}</sc.Icon>}
      <sc.Input
        onFocus={handleFocus}
        onBlur={handleBlur}
        ref={inputRef}
        disabled={disabled}
        readOnly={readOnly}
        data-testid="base-input"
        {...restProps}
      />
      {unit && <sc.Unit>{unit}</sc.Unit>}
    </sc.Wrapper>
  );
  // return <div>BASE INPUT</div>;
};
