import React, {PropsWithChildren, ReactNode} from 'react';
import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native';
import {useTheme} from '@shared/theme';

import {InputSize} from '../../interfaces';
import {useInputColors} from '../../hooks/useInputColors';
import {useInputSize} from '../../hooks/useInputSize';
import {INPUT_ICONS} from '../../constants';
import {styles} from './styles';

interface Props extends PropsWithChildren {
  isSuccess?: boolean;
  isError?: boolean;
  focused?: boolean;
  disabled?: boolean;
  size?: InputSize;
  LeftComponent?: ReactNode;
  RightComponent?: ReactNode;
  onPress?: () => void;
  pointerEvents?: PressableProps['pointerEvents'];
  style?: StyleProp<ViewStyle>;
  showStateIcon?: boolean;
  accessible?: boolean;
}

export function InputBox({
  children,
  isSuccess,
  isError,
  focused,
  disabled,
  size,
  onPress,
  pointerEvents,
  style,
  LeftComponent = null,
  RightComponent = null,
  showStateIcon = true,
  accessible = false,
}: Props) {
  const {iconSizes} = useTheme();
  const {inputBorder, inputBackground, helperColor} = useInputColors({
    isSuccess,
    isError,
    focused,
    disabled,
  });

  const sizeStyle = useInputSize({size});

  const StateIcon = focused
    ? null
    : isSuccess
    ? INPUT_ICONS.success
    : isError
    ? INPUT_ICONS.error
    : null;

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      pointerEvents={pointerEvents}
      style={[
        styles.box,
        {backgroundColor: inputBackground, borderColor: inputBorder},
        sizeStyle,
        style,
      ]}
      accessible={accessible}>
      {!!LeftComponent && LeftComponent}
      {children}
      {!!RightComponent && RightComponent}
      {showStateIcon && StateIcon && (
        <StateIcon size={iconSizes.x6} color={helperColor} />
      )}
    </Pressable>
  );
}
