import { forwardRef, ReactElement, useImperativeHandle, useRef, useState } from 'react';
import {
  NativeSyntheticEvent,
  NativeTouchEvent,
  StyleProp,
  Text,
  TextInput,
  View,
  ViewProps,
  ViewStyle,
} from 'react-native';
import TextInputMask from 'react-native-text-input-mask';
import { Icon } from '../../components';
import { tw } from '../../core/tailwind';

export type MaskedTextFieldProps = React.ComponentProps<typeof TextInput> & {
  ref?: React.RefObject<TextInput>;
  label?: string;
  mask?: string;
  errorText?: string | undefined;
  containerStyle?: StyleProp<ViewStyle>;
  textFieldStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<ViewProps>;
  leftIcon?: string | ReactElement;
  rightIcon?: string | ReactElement;
  bordered?: boolean;
  required?: boolean;
  focus?: boolean;
};

export const MaskedTextField: React.FC<MaskedTextFieldProps> = forwardRef<TextInput, MaskedTextFieldProps>(
  (props, ref) => {
    const inputRef = useRef<TextInput>(null);
    const {
      label,
      errorText,
      value,
      onBlur,
      onFocus,
      onChangeText,
      mask,
      containerStyle,
      textFieldStyle,
      labelStyle,
      leftIcon,
      rightIcon,
      onPressIn,
      bordered = true,
      required,
      ...restOfProps
    } = props;
    const [isFocused, setIsFocused] = useState(false);

    useImperativeHandle<TextInput, any>(ref, () => ({
      focus: () => inputRef.current?.focus(),
    }));

    const handlePressIn = (e: NativeSyntheticEvent<NativeTouchEvent>) => {
      onPressIn?.(e);
    };

    const renderIcon = (icon: string | React.ReactElement) => {
      if (typeof icon === 'string' || icon instanceof String) {
        return <Icon name={icon as string} size={25} color="red" />;
      }
      return icon;
    };

    return (
      <View style={[tw`mb-5`, containerStyle]}>
        {label ? (
          <View style={tw`flex-row`}>
            <Text style={[tw.style('ml-4 mb-1 text-dark text-xs font-bold'), labelStyle]}>{label}</Text>
            <Text style={tw.style({ hidden: !required, color: 'red' })}>*</Text>
          </View>
        ) : null}
        <View style={tw`flex-row`}>
          {leftIcon ? <View style={tw`absolute z-10 left-2 top-2`}>{renderIcon(leftIcon)}</View> : null}
          <TextInputMask
            ref={inputRef}
            mask={mask ? mask : ''}
            style={[
              tw.style('w-full px-4 py-3 bg-light border border-transparent  rounded-s', {
                'border-primary shadow-md': isFocused,
                'border-red-500': !!errorText,
                'pl-10': !!leftIcon,
                'pr-10': !!rightIcon,
                'border-gray-100': bordered,
              }),
              textFieldStyle,
            ]}
            placeholderTextColor={tw.color('text-gray-100')}
            value={value}
            onBlur={(event) => {
              setIsFocused(false);
              onBlur?.(event);
            }}
            onFocus={(event) => {
              setIsFocused(true);
              onFocus?.(event);
            }}
            onPressIn={handlePressIn}
            onChangeText={(_formatted, extracted) => {
              return onChangeText?.(extracted ? extracted : '');
            }}
            {...restOfProps}
          />
          {rightIcon ? <View style={tw`absolute z-10 right-2 top-2`}>{renderIcon(rightIcon)}</View> : null}
        </View>
        {errorText ? <Text style={tw`mt-4 text-red-500`}>{errorText}</Text> : null}
      </View>
    );
  }
) as React.FC<MaskedTextFieldProps>;