import {
  View,
  Text,
  TextInput,
  Image,
  Pressable,
  Platform,
} from "react-native";
import React, { useState } from "react";
import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import { BlurView } from "expo-blur";
import { icons } from "../../../assets";

const EditInput = ({ label = "", placeholder = "", type = "default", value = "", setValue = () => {} }) => {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <View style={{ gap: 4 }}>
      <View
        style={{
          ...Style.containerSpaceBetween,
        }}
      >
        <Text
          style={{
            fontSize: 16,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterRegular,
          }}
        >
          {label}
        </Text>
        <Text
          style={{
            fontSize: 12,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterRegular,
          }}
        >
          Modifier
        </Text>
      </View>
      <BlurView
        intensity={20}
        style={{
          paddingHorizontal: 12,
          borderRadius: 12,
          backgroundColor: Palette.glass,
          overflow: "hidden",
          height: 52,
          ...Style.containerRow,
        }}
        experimentalBlurMethod={
          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
        }
      >
        <TextInput
          placeholder={placeholder}
          placeholderTextColor={Palette.gray}
          style={{
            fontSize: 16,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterRegular,
            flex: 1,
          }}
          keyboardType={type}
          value={value}
          onChangeText={setValue}
          {...(type === "password" && {
            secureTextEntry: !showPassword,
          })}
        />
        {type === "password" && (
          <Pressable onPress={() => setShowPassword(!showPassword)}>
            <Image source={icons.eye} />
          </Pressable>
        )}
      </BlurView>
    </View>
  );
};

export default EditInput;
