import React, { FC, useState } from 'react';
import {
  TextInput,
  Text,
  View,
  InputModeOptions,
  NativeSyntheticEvent,
  TextInputFocusEventData
} from 'react-native';
import { styling } from './style';

type Props = {
  placeholder?: string;
  onChange?: (text: string) => void;
  header?: string;
  isPrivate?: boolean;
  inputMode?: InputModeOptions;
  isFocused?: (boolean: boolean) => void;
  value?: string;
  active?: boolean;
  onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
  formikError?: string | boolean;
};

export const Input: FC<Props> = ({
  onChange,
  placeholder,
  header,
  isPrivate,
  inputMode,
  isFocused,
  onBlur,
  value,
  formikError
}) => {
  const [focused, setFocused] = useState(false);

  const styles = styling(focused);

  return (
    <View>
      {header ? <Text style={styles.text}>{header}</Text> : null}
      <TextInput
        value={value}
        inputMode={inputMode ?? 'text'}
        secureTextEntry={isPrivate ?? false}
        placeholder={placeholder}
        onChangeText={onChange}
        onFocus={() => {
          setFocused(true);
          if (isFocused) {
            isFocused(true);
          }
        }}
        onBlur={(e) => {
          setFocused(false);
          if (onBlur) {
            onBlur(e);
          }
        }}
        style={[styles.wrapper, formikError ? styles.inputError : null]}
      />
      {formikError ? <Text style={styles.errorText}>{formikError}</Text> : null}
    </View>
  );
};