import React, { forwardRef, useState } from 'react';
import {
  TextInput,
  TextInputProps,
  View,
  StyleSheet,
  TouchableOpacity,
  StyleProp,
  ViewStyle,
  TextStyle,
} from 'react-native';
import { useTheme, ThemeType } from '../../theme';
import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
import { ThemedText as Text } from "../ui";

export interface CustomInputProps extends Omit<TextInputProps, 'style'> {
  label?: string;
  error?: string;
  helper?: string;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  onRightIconPress?: () => void;
  containerStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
  inputStyle?: StyleProp<TextStyle>;
  inputContainerStyle?: StyleProp<ViewStyle>;
  errorStyle?: StyleProp<TextStyle>;
  helperStyle?: StyleProp<TextStyle>;
  onChangeText?: (text: string) => void;
  onBlur?: () => void;
  onFocus?: () => void;
  isRTL?: boolean;
  isBottomSheet?: boolean;
}

const CustomInput = forwardRef<TextInput, CustomInputProps>(
  (
    {
      label,
      error,
      helper,
      leftIcon,
      rightIcon,
      onRightIconPress,
      containerStyle,
      labelStyle,
      inputStyle,
      inputContainerStyle,
      errorStyle,
      helperStyle,
      onChangeText,
      onBlur,
      onFocus,
      isRTL = false,
      isBottomSheet,
      ...rest
    },
    ref
  ) => {
    const {theme, isRTL : rtl} = useTheme();
    isRTL = rtl;
    const [isFocused, setIsFocused] = useState(false);

    const handleFocus = () => {
      setIsFocused(true);
      onFocus && onFocus();
    };
    const handleBlur = () => {
      setIsFocused(false);
      onBlur && onBlur();
    };

    const styles = createStyles(theme);

    const FinalInput = isBottomSheet ? BottomSheetTextInput : TextInput;

    return (
      <View style={[styles.container, containerStyle]}>
        {label && (
          <Text
            style={[
              styles.label,
              labelStyle,
            ]}
          >
            {label}
          </Text>
        )}

        <View
          style={[
            styles.inputContainer,
            inputContainerStyle,
            isFocused && styles.focusedInput,
            error && styles.errorInput,
            isRTL && { flexDirection: "row-reverse" },
          ]}
        >
          {leftIcon && (
            <View
              style={[
                styles.leftIcon,
                isRTL && { paddingRight: 12, paddingLeft: 0 },
              ]}
            >
              {leftIcon}
            </View>
          )}

          <FinalInput
            //@ts-ignore
            ref={ref}
            style={[
              styles.input,
              leftIcon ? styles.inputWithLeftIcon : undefined,
              rightIcon ? styles.inputWithRightIcon : undefined,
              { textAlign: isRTL ? "right" : "left" },
              inputStyle,
            ]}
            onChangeText={onChangeText}
            onFocus={handleFocus}
            onBlur={handleBlur}
            placeholderTextColor={theme.placeholderText} // Use placeholderText
            {...rest}
          />

          {rightIcon && (
            <TouchableOpacity
              style={[
                styles.rightIcon,
                isRTL && { paddingLeft: 12, paddingRight: 0 },
              ]}
              onPress={onRightIconPress}
              disabled={!onRightIconPress}
            >
              {rightIcon}
            </TouchableOpacity>
          )}
        </View>

        {error ? (
          <Text
            style={[
              styles.error,
              errorStyle,
            ]}
          >
            {error}
          </Text>
        ) : helper ? (
          <Text
            style={[
              styles.helper,
              helperStyle,
            ]}
          >
            {helper}
          </Text>
        ) : null}
      </View>
    );
  }
);

// Function to create themed styles
const createStyles = (theme: ThemeType) =>
  StyleSheet.create({
    container: {},
    label: {
      fontSize: 14,
      fontWeight: '500',
      marginBottom: 6,
      color: theme.labelText, // Use labelText
    },
    inputContainer: {
      flexDirection: 'row',
      borderWidth: 1,
      borderColor: theme.border, // Use border
      borderRadius: 8,
      backgroundColor: theme.inputBackground, // Use inputBackground
      alignItems: 'center',
      // minHeight: 48,
    },
    focusedInput: {
      borderColor: theme.primary, // Use primary for focus indication
    },
    errorInput: {
      borderColor: theme.error, // Correctly uses error
    },
    input: {
      flex: 1,
      paddingHorizontal: 12,
      paddingVertical: 12,
      fontSize: 16,
      color: theme.inputText, // Use inputText
      backgroundColor: 'transparent', // Keep transparent
    },
    inputWithLeftIcon: {
      paddingLeft: 8,
    },
    inputWithRightIcon: {
      paddingRight: 8,
    },
    leftIcon: {
      paddingLeft: 12,
    },
    rightIcon: {
      paddingRight: 12,
    },
    error: {
      fontSize: 12,
      color: theme.error, // Correctly uses error
      marginTop: 4,
    },
    helper: {
      fontSize: 12,
      color: theme.helper, // Correctly uses helper
      marginTop: 4,
    },
  });

export default CustomInput;