import React, {forwardRef, useCallback, useState} from 'react';
import {
  TextInput as RNTextInput,
  FocusEvent,
  BlurEvent,
  View,
} from 'react-native';
import {useController} from 'react-hook-form';
import {BottomSheetTextInput} from '@gorhom/bottom-sheet';
import InputContainer from '@components/InputContainer';

import {styles} from './styles';
import {TextInputControllerProps, TextInputProps} from './interfaces';

/**
 * @deprecated Use `_core/TextInput` instead
 */
export const TextInput = forwardRef<RNTextInput, TextInputProps>(
  (
    {
      style,
      errorMessage,
      rightIcon,
      leftIcon,
      label,
      value,
      onFocus,
      onBlur,
      InnerLeftComponent,
      InnerRightComponent,
      helperText,
      showBottomText = true,
      editable = true,
      placeholder = '',
      contentContainerStyle,
      containerStyle,
      onPress,
      showPlaceholderOnFocus = false,
      focusedColor,
      useBottomSheetTextInput,
      ...props
    },
    ref,
  ) => {
    const [focused, setFocused] = useState(false);

    const handleOnFocus = useCallback(
      (e: FocusEvent) => {
        setFocused(true);
        onFocus?.(e);
      },
      [onFocus],
    );

    const handleOnBlur = useCallback(
      (e: BlurEvent) => {
        setFocused(false);
        onBlur?.(e);
      },
      [onBlur],
    );

    return (
      <InputContainer
        disabled={!editable}
        label={label}
        errorMessage={errorMessage}
        rightIcon={rightIcon}
        leftIcon={leftIcon}
        helperText={helperText}
        hasValue={!!value}
        focused={focused}
        focusedColor={focusedColor}
        contentContainerStyle={contentContainerStyle}
        containerStyle={containerStyle}
        showBottomText={showBottomText}>
        <View style={styles.input}>
          {InnerLeftComponent}
          {!useBottomSheetTextInput ? (
            <RNTextInput
              ref={ref}
              style={[
                styles.inputStyle,
                !!label && styles.textInputSpacing,
                style,
              ]}
              value={value}
              placeholder={
                (focused || label) && !showPlaceholderOnFocus ? '' : placeholder
              }
              onFocus={handleOnFocus}
              onBlur={handleOnBlur}
              editable={editable}
              onPress={onPress!}
              {...props}
            />
          ) : (
            <BottomSheetTextInput
              style={[
                styles.inputStyle,
                !!label && styles.textInputSpacing,
                style,
              ]}
              value={value}
              placeholder={
                (focused || label) && !showPlaceholderOnFocus ? '' : placeholder
              }
              onFocus={handleOnFocus}
              onBlur={handleOnBlur}
              editable={editable}
              onPress={onPress!}
              {...props}
            />
          )}
          {InnerRightComponent}
        </View>
      </InputContainer>
    );
  },
);

/**
 * @deprecated Use `_core/TextInputController` instead
 */
export const TextInputController = forwardRef<
  RNTextInput,
  TextInputControllerProps
>(({name, defaultValue, onBlur, onChangeText, formatText, ...props}, ref) => {
  const {field, fieldState, formState} = useController({name, defaultValue});

  const handleChange = (text: string) => {
    const nextValue = formatText?.(text) || text;
    field.onChange(nextValue);
    onChangeText?.(nextValue);
  };

  const handleBlur = (e: BlurEvent) => {
    field.onBlur();
    onBlur?.(e);
  };

  return (
    <TextInput
      {...props}
      ref={ref}
      value={field.value}
      onChangeText={handleChange}
      errorMessage={fieldState.error?.message}
      defaultValue={defaultValue ?? formState.defaultValues?.[name]}
      onBlur={handleBlur}
    />
  );
});

export * from './interfaces';