import type { ComponentProps, ReactElement, ReactNode, Ref } from 'react';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import type { NativeSyntheticEvent, NativeTouchEvent, StyleProp, TextInputProps, ViewStyle } from 'react-native';
import { Text, TextInput, View } from 'react-native';
import { tw } from '../../core/tailwind';
import { Icon } from './Icon';

export type TextFieldProps = ComponentProps<typeof TextInput> & {
  ref?: Ref<TextInput>;
  label?: string;
  errorText?: string | undefined;
  containerStyle?: StyleProp<ViewStyle>;
  textFieldStyle?: StyleProp<TextInputProps>;
  labelStyle?: StyleProp<ViewStyle>;
  leftIcon?: string | ReactElement;
  rightIcon?: string | ReactElement;
  beforeText?: ReactNode;
  bordered?: boolean;
  bgStyle?: StyleProp<ViewStyle>;
  required?: boolean;
  focus?: boolean;
  iconStyle?: any;
};

export const TextField = forwardRef<TextInput, TextFieldProps>((props, ref) => {
  const inputRef = useRef<TextInput | null>(null);
  const {
    label,
    errorText,
    value,
    onBlur,
    onFocus,
    onChangeText,
    containerStyle,
    textFieldStyle,
    labelStyle,
    leftIcon,
    rightIcon,
    onPressIn,
    bordered = true,
    required,
    iconStyle,
    bgStyle,
    ...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" {...iconStyle} />;
    }
    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.style(
          `flex-row items-center flex-row items-center gap-2 px-2 border border-transparent rounded-s ${
            bgStyle ? bgStyle : 'bg-light'
          }`,
          {
            'border-primary shadow-md': isFocused,
            'border-red-500': !!errorText,
            'border-gray-100': bordered,
          }
        )}
      >
        {leftIcon ? <View>{renderIcon(leftIcon)}</View> : null}
        <TextInput
          ref={inputRef}
          style={[tw`text-dark grow px-4 py-3`, textFieldStyle]}
          placeholderTextColor={tw.color('text-gray-100')}
          value={value}
          onBlur={(event) => {
            setIsFocused(false);
            onBlur?.(event);
          }}
          onFocus={(event) => {
            setIsFocused(true);
            onFocus?.(event);
          }}
          onPressIn={handlePressIn}
          onChangeText={onChangeText}
          {...restOfProps}
        />
        {rightIcon ? <View>{renderIcon(rightIcon)}</View> : null}
      </View>
      {errorText ? <Text style={tw`text-red-500 mt-4`}>{errorText}</Text> : null}
    </View>
  );
}) as React.FC<TextFieldProps>;