import {
  Image,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  Text,
  TextInput,
  TouchableWithoutFeedback,
  View,
} from "react-native";

import { tr } from "@/lib/i18n";
import type { InputFieldProps } from "@/types/type";

export const InputField = ({
  label,
  labelStyles,
  icon,
  secureTextEntry = false,
  containerStyles,
  inputStyles,
  iconStyles,
  className,
  ...props
}: InputFieldProps) => (
  <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View className="my-2 w-full">
        <Text
          className={`text-lg font-JakartaSemiBold mb-3 text-black dark:text-white ${labelStyles}`}
        >
          {label}
        </Text>

        <View
          className={`flex flex-row justify-start items-center relative bg-neutral-100 dark:bg-neutral-800 rounded-full border border-neutral-100 dark:border-neutral-800 focus:border-primary-500 ${containerStyles}`}
        >
          {icon && (
            <Image
              source={icon}
              alt={tr("components.inputField.labelIconAlt", { label })}
              className={`h-6 w-6 ml-4 mt-1 ${iconStyles}`}
            />
          )}

          <TextInput
            className={`rounded-full p-4 font-JakartaSemiBold text-[15px] flex-1 text-left text-black dark:text-white ${inputStyles}`}
            secureTextEntry={secureTextEntry}
            autoCapitalize="none"
            autoComplete="off"
            placeholderTextColor="#a3a3a3"
            selectionColor="#0286ff"
            {...props}
          />
        </View>
      </View>
    </TouchableWithoutFeedback>
  </KeyboardAvoidingView>
);