import React, { forwardRef, useState } from "react";
import { Pressable, TextInput, View, } from "react-native";
import { cn } from "../utils/cn";
import { ErrorText, Label } from "./text";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
export const Input = forwardRef(({ className, containerClassName, label, labelClassName, error, errorClassName, invalid, leftIcon, rightIcon, isPassword = false, showPasswordToggle = true, containerStyle, onFocus, onBlur, secureTextEntry, ...props }, ref) => {
    const showInvalid = invalid || !!error;
    const [showPassword, setShowPassword] = useState(false);
    const [isFocused, setIsFocused] = useState(false);
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const handleFocus = (e) => {
        setIsFocused(true);
        onFocus?.(e);
    };
    const handleBlur = (e) => {
        setIsFocused(false);
        onBlur?.(e);
    };
    const shouldShowPassword = isPassword && !showPassword;
    const showToggle = isPassword && showPasswordToggle;
    // Each border color carries an explicit `dark:` variant matching that CSS
    // variable's `.dark` value one-for-one (see button.tsx for why: a bare
    // CSS-var utility with no `dark:` variant has been observed stuck on its
    // light value on native regardless of actual system theme).
    //
    // Destructive is the one exception: `--destructive`'s dark value
    // (rgb(127 29 29), a fill-appropriate dark red) has too little contrast
    // as a 2px outline against a black surface. red-400 matches this
    // package's own convention for destructive text on dark (see
    // ErrorText in text.tsx) — legible, not just "technically correct."
    let borderClass;
    if (showInvalid) {
        borderClass = "border-2 border-destructive dark:border-red-400";
    }
    else if (isFocused) {
        borderClass = "border-2 border-primary dark:border-white";
    }
    else {
        borderClass = "border border-border dark:border-neutral-800";
    }
    return (<View className={cn("w-full", containerClassName)} style={containerStyle}>
        {label ? <Label className={cn("mb-2", labelClassName)}>{label}</Label> : null}

        <View className={cn("h-12 flex-row items-center rounded-lg bg-card dark:bg-black pl-3", showToggle ? "pr-1" : "pr-3", borderClass, className)}>
          {leftIcon ? <View className="mr-2">{leftIcon}</View> : null}

          <TextInput ref={ref} className="flex-1 py-2 text-base text-foreground dark:text-white" placeholderTextColor={isDark ? "#737373" : "#A3A3A3"} onFocus={handleFocus} onBlur={handleBlur} secureTextEntry={secureTextEntry ?? shouldShowPassword} {...props}/>

          {showToggle ? (<Pressable onPress={() => setShowPassword(!showPassword)} className="px-2 py-2" hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
              <Ionicons name={showPassword ? "eye-off-outline" : "eye-outline"} size={20} color={isDark ? "#A3A3A3" : "#737373"}/>
            </Pressable>) : null}

          {rightIcon && !showToggle ? <View className="ml-2">{rightIcon}</View> : null}
        </View>

        {error ? <ErrorText className={cn("mt-2", errorClassName)}>{error}</ErrorText> : null}
      </View>);
});
Input.displayName = "Input";
export const SearchInput = forwardRef(({ className, ...props }, ref) => {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    return (<Input ref={ref} className={className} leftIcon={<Ionicons name="search-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"}/>} placeholder="Search..." returnKeyType="search" {...props}/>);
});
SearchInput.displayName = "SearchInput";
export const EmailInput = forwardRef(({ className, ...props }, ref) => {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    return (<Input ref={ref} className={className} leftIcon={<Ionicons name="mail-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"}/>} placeholder="you@example.com" keyboardType="email-address" autoCapitalize="none" autoCorrect={false} textContentType="emailAddress" autoComplete="email" {...props}/>);
});
EmailInput.displayName = "EmailInput";
export const PasswordInput = forwardRef(({ className, ...props }, ref) => {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    return (<Input ref={ref} className={className} leftIcon={<Ionicons name="lock-closed-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"}/>} placeholder="••••••••" isPassword autoCapitalize="none" autoCorrect={false} textContentType="password" autoComplete="password" {...props}/>);
});
PasswordInput.displayName = "PasswordInput";
export const TextArea = forwardRef(({ className, containerClassName, ...props }, ref) => {
    const [isFocused, setIsFocused] = useState(false);
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const handleFocus = (e) => {
        setIsFocused(true);
        props.onFocus?.(e);
    };
    const handleBlur = (e) => {
        setIsFocused(false);
        props.onBlur?.(e);
    };
    return (<View className={cn("w-full", containerClassName)}>
        {props.label ? <Label className="mb-2">{props.label}</Label> : null}

        <View className={cn("min-h-[100px] rounded-lg bg-background px-3 py-3 dark:bg-black", isFocused
            ? "border-2 border-foreground dark:border-white"
            : "border border-border dark:border-neutral-800", className)}>
          <TextInput ref={ref} className="text-base text-foreground dark:text-white" placeholderTextColor={isDark ? "#737373" : "#A3A3A3"} multiline numberOfLines={4} textAlignVertical="top" onFocus={handleFocus} onBlur={handleBlur} {...props}/>
        </View>

        {props.error ? <ErrorText className="mt-2">{props.error}</ErrorText> : null}
      </View>);
});
TextArea.displayName = "TextArea";
//# sourceMappingURL=input.jsx.map