import React, { FC, useState, useCallback } from 'react';
import * as sc from './styles';
import { Icon } from '../Icon';
import {
  SvgCheckboxMarkedCircle,
  SvgCloseCircle,
} from '../../assets/images/icons';
import { ValidationInputProps } from './types';

export const ValidationInput: FC<ValidationInputProps> = (props) => {
  const {
    onFocus,
    onBlur,
    readOnly,
    disabled,
    invalid,
    className,
    inputRef,
    transparent,
    ...restProps
  } = props;

  const [focused, setFocusedState] = useState(false);

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

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

  return (
    <sc.Wrapper
      {...{ transparent, focused, disabled, invalid, readOnly, className }}
    >
      <sc.Input
        onFocus={handleFocus}
        onBlur={handleBlur}
        ref={inputRef}
        disabled={disabled}
        readOnly={readOnly}
        data-testid="base-input"
        {...restProps}
      />
      {invalid !== undefined && (
        <sc.Icon>
          {invalid ? (
            <Icon Asset={SvgCloseCircle} color="alert" width={14} height={14} />
          ) : (
            <Icon
              Asset={SvgCheckboxMarkedCircle}
              color="success"
              width={14}
              height={14}
            />
          )}
        </sc.Icon>
      )}
    </sc.Wrapper>
  );
};
