import React from 'react';
import { TextInputMask, TextInputMaskProps } from 'react-native-masked-text';
import { TextInputProps, TextInput } from 'react-native';

export type CardInputProps = {
  name: string;
  onChange: (name: string, text: string) => void | null;
  maskProps: TextInputMaskProps;
  placeholderTextColor: string;
  refInput: React.MutableRefObject<any>;
} & TextInputProps;

const CardInput: any = ({
  name,
  maskProps,
  refInput,
  onChange = () => {},
  style,
  ...props
}: CardInputProps) => {
  const handleChange = React.useCallback(
    (text) => {
      const value = text.toUpperCase();
      return onChange(name, value);
    },
    [name, onChange]
  );

  const setRef = (inputRef: any, ref: any) => {
    if (typeof ref === 'object') {
      ref.current = inputRef;
    }
  };

  const InputComponent: any = maskProps ? TextInputMask : TextInput;
  const customProps = maskProps
    ? { refInput: (ref: any) => setRef(ref, refInput) }
    : { ref: refInput };

  return (
    <InputComponent
      style={style}
      onChangeText={handleChange}
      hitSlop={{ top: 10, bottom: 10, left: 0, right: 0 }}
      {...maskProps}
      {...props}
      {...customProps}
    />
  );
};

export default CardInput;