import { TextInput, TextInputProps } from "react-native-paper";
import {
  KeyboardTypeOptions,
  Platform,
  NativeSyntheticEvent,
  TextInputSubmitEditingEventData,
  SubmitBehavior,
} from "react-native";

interface FormInputProps {
  label: string;
  value: string;
  onChangeText: (text: string) => void;
  onBlur?: () => void;
  icon?: string;
  keyboardType?: KeyboardTypeOptions;
  disabled?: boolean;
  autoCapitalize?: TextInputProps["autoCapitalize"];
  style?: any;
  onSubmitEditing?: (
    e?: NativeSyntheticEvent<TextInputSubmitEditingEventData>
  ) => void;
  returnKeyType?: any;
  submitBehavior?: SubmitBehavior;
}

export const FormInput = ({
  label,
  value,
  onChangeText,
  onBlur,
  icon = "pencil",
  keyboardType = "default",
  disabled = false,
  autoCapitalize = "none",
  style = {},
  onSubmitEditing,
  returnKeyType,
  submitBehavior,
}: FormInputProps) => {
  return (
    <TextInput
      label={label}
      mode="flat"
      value={value}
      onChangeText={onChangeText}
      onBlur={onBlur}
      style={{
        marginBottom: 16,
        backgroundColor: "transparent",
        ...style,
      }}
      keyboardType={keyboardType}
      autoCapitalize={autoCapitalize}
      onSubmitEditing={onSubmitEditing}
      returnKeyType={returnKeyType}
      submitBehavior={submitBehavior ?? "submit"}
      onKeyPress={(e) => {
        if (Platform.OS === "web" && e.nativeEvent.key === "Enter") {
          onSubmitEditing?.();
        }
      }}
      left={<TextInput.Icon icon={icon} color="#6750a4" />}
      theme={{ colors: { primary: "#6750a4" } }}
      disabled={disabled}
    />
  );
};