import React, {ReactNode} from 'react';
import {
  Pressable,
  PressableProps,
  StyleProp,
  View,
  ViewStyle,
} from 'react-native';
import Animated from 'react-native-reanimated';
import Text from '@components/Text';
import Icon, {IconName} from '@components/Icon';
import {INPUT_COLORS} from '@components/constants';
import {componentStyles} from '@components/styles';
import {useInstanceProp} from '@redux/selectors';
import {commonStyles} from '@shared/styles';

import {styles} from './styles';
import {useAnimatedInput} from './useAnimatedInput';

const AnimatedText = Animated.createAnimatedComponent(Text);

export interface InputContainerProps {
  children?: ReactNode;
  contentContainerStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  errorMessage?: string;
  rightIcon?: IconName;
  leftIcon?: IconName;
  label?: string;
  helperText?: string;
  hasValue?: boolean;
  focused?: boolean;
  focusedColor?: string;
  disabled?: boolean;
  onPress?: PressableProps['onPress'];
  showBottomText?: boolean;
}

/**
 * @deprecated Use `_HuGo/Input` instead
 */
function InputContainer({
  children,
  contentContainerStyle,
  containerStyle,
  errorMessage,
  rightIcon,
  leftIcon,
  label,
  helperText,
  hasValue,
  focused,
  focusedColor,
  disabled,
  onPress,
  showBottomText = true,
}: InputContainerProps) {
  const instanceColor = useInstanceProp('color');
  const elevateLabel = hasValue || focused;
  const {animatedLabelStyle, animatedInputStyle} =
    useAnimatedInput(elevateLabel);
  const activeColor = focusedColor || instanceColor;

  const labelColor = focused
    ? activeColor
    : errorMessage
    ? INPUT_COLORS.error
    : INPUT_COLORS.label;

  return (
    <View style={contentContainerStyle}>
      <Pressable
        onPress={onPress}
        disabled={!onPress || disabled}
        style={[
          styles.container,
          !!errorMessage && styles.error,
          focused && {borderColor: activeColor},
          disabled && componentStyles.inputDisabled,
          containerStyle,
        ]}>
        <Animated.View style={[styles.input, !!label && animatedInputStyle]}>
          {leftIcon && (
            <Icon size="sm" name={leftIcon} color={INPUT_COLORS.icon} />
          )}
          <View style={commonStyles.flex}>{children}</View>
          {rightIcon && (
            <Icon size="sm" name={rightIcon} color={INPUT_COLORS.icon} />
          )}
        </Animated.View>
        {label && (
          <AnimatedText
            color={labelColor}
            style={[
              styles.innerLabel,
              animatedLabelStyle,
              !!leftIcon && !elevateLabel && styles.labelLeft,
            ]}>
            {label}
          </AnimatedText>
        )}
      </Pressable>
      {showBottomText && (
        <Text
          variant={errorMessage ? 'error' : 'helper'}
          style={componentStyles.helperTextStyle}>
          {errorMessage || helperText}
        </Text>
      )}
    </View>
  );
}

export default InputContainer;