import React, {FC} from 'react';
import {TextInputProps} from 'react-native';
import {
  Wrapper,
  InputWrapper,
  StyledTextInput,
  Error,
  Label,
  FlagWrapper,
  Flag,
  CountryCode,
} from '@styles/components/text-input';

interface IField extends TextInputProps {
  label?: string;
  error?: string;
  onChangeText?: ((text: string) => void) | undefined;
  value?: string;
  showCountryFlag?: boolean;
}

const Field: FC<IField> = ({
  label,
  onChangeText,
  value,
  error,
  showCountryFlag = true,
  ...rest
}) => (
  <Wrapper>
    {!!label && <Label>{label}</Label>}
    <InputWrapper>
      {showCountryFlag && (
        <FlagWrapper>
          <Flag source={require('@assets/images/auth/india-flag.png')} />
          <CountryCode>+91</CountryCode>
        </FlagWrapper>
      )}
      <StyledTextInput
        onChangeText={onChangeText}
        value={value}
        {...rest}
        testID="phNumInp"
      />
    </InputWrapper>
    {!!error && <Error>{error}</Error>}
  </Wrapper>
);

export default Field;