import React, { forwardRef, useState } from 'react';
import _isEqual from 'lodash/isEqual';
import { View, ViewStyle, TextInputProps, TextStyle, Text } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { TextInput, DefaultTheme } from 'react-native-paper';
import { colors } from '../../theme/colors';
import { responsiveFontSize, responsiveHeight } from 'react-native-responsive-dimensions';

type ConnectCredential = TextInputProps & {
  label: string;
  name: string;
  type?: string;
  isMfa?: boolean;
  error?: string;
  primaryColor?: string;
  onChangeField: Function;
  onSubmitEditing: () => void;
};

const ConnectCredential = React.memo(
  forwardRef(
    (props: ConnectCredential, ref: React.RefObject<any> | null | ((instance: any) => void)) => {
      const { label, name, type, error, onChangeField, onSubmitEditing, ...inputProps } = props;
      const isPassword = type === 'password' || name === 'password';
      const keyboardType = type === 'number' ? 'numeric' : undefined;
      const [visibility, setVisibility] = useState<boolean>(false);

      const toggleVisibility = () => setVisibility(x => !x);

      const handleOnChangeText = (text: string) => {
        onChangeField(name, text);
      };

      const containerStyles: ViewStyle = {
        width: '80%',
        padding: '5%',
      };

      const iconStyles: any = {
        position: 'absolute',
        top: 20,
        right: 20,
      };

      const errorStyles: TextStyle = {
        color: colors.error,
        fontSize: responsiveFontSize(1.5),
        marginVertical: 3,
      };

      return (
        <View style={containerStyles}>
          <View style={{ height: responsiveHeight(12) }}>
            {/* @ts-ignore */}
            <TextInput
              ref={ref}
              autoCorrect={false}
              autoCapitalize="none"
              autoCompleteType="off"
              label={label}
              secureTextEntry={isPassword && !visibility}
              keyboardType={keyboardType}
              onChangeText={handleOnChangeText}
              onSubmitEditing={onSubmitEditing}
              error={Boolean(error)}
              style={{ fontSize: responsiveFontSize(2) }}
              theme={{ ...DefaultTheme, colors: { ...DefaultTheme.colors } }}
              {...inputProps}
            />
            {isPassword && (
              <Icon
                style={iconStyles}
                name={!visibility ? 'visibility-off' : 'visibility'}
                size={26}
                color={DefaultTheme.colors.placeholder}
                onPress={toggleVisibility}
              />
            )}
            {error && (
              <Text style={errorStyles}>{error.charAt(0).toUpperCase() + error.slice(1)}</Text>
            )}
          </View>
        </View>
      );
    },
  ),
  (prevProps, nextProps) => _isEqual(prevProps, nextProps),
);
export default ConnectCredential;