import {
  FormControl,
  FormControlError,
  FormControlErrorText,
  Input as GSInput,
  InputField,
} from '@gluestack-ui/themed';
import { ComponentProps } from 'react';

type Props = ComponentProps<typeof InputField> & {
  isReadOnly?: boolean;
  errorMessage?: string | null;
  isInvalid?: boolean;
};

export function Input({
  isReadOnly = false,
  errorMessage = null,
  isInvalid = false,
  ...others
}: Props) {
  const invalid = !!errorMessage || isInvalid;

  return (
    <FormControl w="$full" mb="$4" isInvalid={invalid}>
      <GSInput
        isInvalid={invalid}
        h="$14"
        borderColor="$gray700"
        borderWidth="$1"
        borderRadius="$md"
        $focus={{
          borderColor: invalid ? '$red500' : '$green500',
        }}
        $invalid={{
          borderColor: '$red500',
        }}
        isReadOnly={isReadOnly}
        opacity={isReadOnly ? 0.5 : 1}>
        <InputField
          bg="$gray700"
          px="$4"
          color="$white"
          fontFamily="$body"
          placeholderTextColor="$gray300"
          {...others}
        />
      </GSInput>

      <FormControlError>
        <FormControlErrorText color="$red500">{errorMessage}</FormControlErrorText>
      </FormControlError>
    </FormControl>
  );
}
