import React from "react";
import { Text, TextInput, TouchableOpacity, View } from "react-native";
import { style } from "./style";
import { appColors, appFonts, fontSizes, windowWidth } from "@src/themes";
import { external } from "../../styles/externalStyle";
import { windowHeight } from "@src/themes";
import { useValues } from "@src/utils/context/index";
import { InputTextProps } from "../type";
import { useSelector } from "react-redux";

export function InputText({
  title,
  placeholder,
  icon,
  show,
  showTitle,
  marginVertical,
  backgroundColor,
  placeholderTextColor,
  rightIcon,
  onPress,
  keyboard,
  value,
  onChangeText,
  warningText,
  secureText,
  editable,
  autoCapitalize,
  textOnpress,
  optional
}: InputTextProps) {
  const { textRTLStyle, isDark, viewRTLStyle } = useValues();
  const { translateData } = useSelector((state: any) => state.setting);

  return (
    <View style={style.container}>
      {showTitle && (
        <View style={{ flexDirection: viewRTLStyle, alignItems: 'center' }}>
          <Text
            style={[
              style.title,
              {
                textAlign: textRTLStyle,
                color: isDark ? appColors.whiteColor : appColors.primaryText,
              },
            ]}
          >
            {title}
          </Text>
          {optional && <Text style={{ color: appColors.iconColor, fontFamily: appFonts.regular, fontSize: fontSizes.FONT17, marginBottom: windowWidth(5), marginHorizontal: windowWidth(8) }}>{translateData?.optional}</Text>
          }        </View>
      )}

      <View
        style={[
          style.textInputContainer,
          { backgroundColor },
          { marginVertical: marginVertical },
          {
            borderColor: isDark
              ? appColors.darkBorder
              : appColors.loaderPrimary,
          },
        ]}
      >
        {icon && (
          <View
            style={{
              paddingHorizontal: show ? windowHeight(7) : windowHeight(5),
              left: windowHeight(4),
            }}
          >
            {icon}
          </View>
        )}
        <TextInput
          style={[
            style.textInputColor,
            { paddingHorizontal: icon ? windowHeight(5) : windowHeight(13) },
            { textAlign: textRTLStyle },
            {
              color:
                editable === false
                  ? appColors.regularText
                  : isDark
                    ? appColors.whiteColor
                    : appColors.blackColor,
            },
          ]}
          placeholder={placeholder}
          placeholderTextColor={placeholderTextColor || appColors.regularText}
          keyboardType={keyboard}
          value={value}
          onChangeText={onChangeText}
          secureTextEntry={secureText}
          editable={editable}
          autoCapitalize={autoCapitalize}
          onPress={textOnpress}
        />
        {rightIcon && (
          <TouchableOpacity
            style={[external.mh_5]}
            onPress={onPress}
            activeOpacity={0.7}
          >
            {rightIcon}
          </TouchableOpacity>
        )}
      </View>
      {warningText ? (
        <Text style={style.warningText}>{warningText}</Text>
      ) : null}
    </View>
  );
}
