import {
  KeyboardTypeOptions,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {MyIcon} from './MyIcon';
import {useSelector} from 'react-redux';
import {RootState} from '@redux/store';
import {Text} from '@gluestack-ui/themed';
import {ReactNode, useRef, useState} from 'react';

interface MyIconInputProps {
  text: string;
  iconName: string;
  keyboardType?: KeyboardTypeOptions;
  secureTextEntry?: boolean;
  value?: string;
  onChangeText?: (text: string) => void;
  disableContainer?: boolean;
  maxLength?: number;
  rightComponent?: ReactNode;
  helper?: ReactNode;
}

export function MyIconInput({
  text,
  iconName,
  keyboardType,
  secureTextEntry,
  value,
  onChangeText,
  disableContainer,
  maxLength,
  rightComponent,
  helper,
}: MyIconInputProps) {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  const [password, setPassword] = useState('');
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);

  const togglePasswordVisibility = () => {
    setIsPasswordVisible(!isPasswordVisible);
  };

  return (
    <View
      style={[
        !disableContainer && {
          backgroundColor: currentTheme.backgroundDark300,
          borderRadius: 10,
        },
      ]}>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <View style={{marginLeft: 12}}>
          <MyIcon name={iconName} size={30} />
        </View>

        <View style={{flex: 1, margin: 12, gap: 2}}>
          <Text size="sm" color={currentTheme.textLight200}>
            {text}
          </Text>

          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              backgroundColor: currentTheme.backgroundDark400,
              borderRadius: 10,
            }}>
            <TextInput
              style={{
                flex: 1,
                height: 40,
                paddingLeft: 10,
                paddingRight: 10,
              }}
              keyboardType={keyboardType}
              secureTextEntry={secureTextEntry}
              value={value}
              onChangeText={onChangeText}
              maxLength={maxLength}
            />

            {rightComponent && (
              <View style={{paddingRight: 10}}>{rightComponent}</View>
            )}
          </View>
        </View>
      </View>

      <View style={{paddingLeft: 10, paddingRight: 20}}>{helper}</View>
    </View>
  );
}

export interface MyInputErrorProps {
  iconName?: string;
  text: string;
}

export function MyInputError({
  iconName,
  text,
}: MyInputErrorProps): React.ReactElement<MyInputErrorProps> {
  const theme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  return (
    <View
      style={{
        paddingLeft: 10,
        paddingBottom: 10,
        paddingRight: 10,
        flexDirection: 'row',
        gap: 10,
        alignItems: 'center',
      }}>
      <MyIcon
        name={iconName === undefined ? 'info' : iconName}
        color={theme.red500}
        size={18}
      />

      <Text color="$red500">{text}</Text>
    </View>
  );
}

export interface ConfirmationCodeInputProps {}

export const ConfirmationCodeInput: React.FC<
  ConfirmationCodeInputProps
> = () => {
  const [confirmationCode, setConfirmationCode] = useState([
    '',
    '',
    '',
    '',
    '',
    '',
  ]);
  const inputRefs = useRef<TextInput[]>([]);

  const focusInput = (index: number) => {
    if (inputRefs.current[index]) {
      inputRefs.current[index].focus();
    }
  };

  const handleTextChange = (text: string, index: number) => {
    const newConfirmationCode = [...confirmationCode];
    newConfirmationCode[index] = text;

    // Fokus zum nächsten Input verschieben, wenn der aktuelle Input nicht leer ist
    if (text !== '' && index < confirmationCode.length - 1) {
      focusInput(index + 1);
    }

    setConfirmationCode(newConfirmationCode);
  };

  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
      }}>
      {confirmationCode.map((digit, index) => (
        <TextInput
          key={index}
          ref={ref => (inputRefs.current[index] = ref!)}
          style={{
            height: 40,
            width: 40,
            borderColor: 'gray',
            borderWidth: 1,
            textAlign: 'center',
            margin: 5,
            borderRadius: 5,
          }}
          keyboardType="number-pad"
          maxLength={1}
          onChangeText={text => handleTextChange(text, index)}
          value={digit}
        />
      ))}
    </View>
  );
};
