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

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

export const PasswordInput = ({
  label,
  value,
  onChangeText,
  onBlur,
  disabled = false,
  style = {},
  onSubmitEditing,
  returnKeyType,
  submitBehavior,
}: PasswordInputProps) => {
  const [secureTextEntry, setSecureTextEntry] = useState(true);

  return (
    <TextInput
      label={label}
      mode="flat"
      value={value}
      secureTextEntry={secureTextEntry}
      onChangeText={onChangeText}
      onBlur={onBlur}
      style={{
        marginBottom: 16,
        backgroundColor: "transparent",
        ...style,
      }}
      onSubmitEditing={onSubmitEditing}
      returnKeyType={returnKeyType}
      submitBehavior={submitBehavior ?? "submit"}
      onKeyPress={(e) => {
        if (Platform.OS === "web" && e?.nativeEvent?.key === "Enter") {
          onSubmitEditing?.();
        }
      }}
      left={<TextInput.Icon icon="lock" color="#6750a4" />}
      right={
        <TextInput.Icon
          icon={secureTextEntry ? "eye" : "eye-off"}
          color="#6750a4"
          onPress={() => setSecureTextEntry(!secureTextEntry)}
        />
      }
      theme={{ colors: { primary: "#6750a4" } }}
      disabled={disabled}
      placeholderTextColor="#d9d9d9"
    />
  );
};