import React, {JSX} from 'react';
import {Text as BaseText, TextInput, View} from 'react-native';
import {Colors, fontSz, hp, ms} from '../../utils';
import {Text} from '../Text';

const Input = (props: {
  containerStyle?: any;
  value: any;
  label: string | JSX.Element;
  placeholder: any;
  inputStyle?: any;
  style?: any;
  prependComponent?: any;
  appendComponent?: any;
  onChange?: any;
  onEndEditing?: any;
  onFocus?: any;
  secureTextEntry?: any;
  keyboardType?:
    | 'default'
    | 'email-address'
    | 'numeric'
    | 'phone-pad'
    | 'number-pad'
    | 'decimal-pad'
    | undefined;
  autoCompleteType?:
    | 'off'
    | 'birthdate-day'
    | 'birthdate-full'
    | 'birthdate-month'
    | 'birthdate-year'
    | 'cc-csc'
    | 'cc-exp'
    | 'cc-exp-day'
    | 'cc-exp-month'
    | 'cc-exp-year'
    | 'cc-number'
    | 'email'
    | 'gender'
    | 'name'
    | 'name-family'
    | 'name-given'
    | 'name-middle'
    | 'name-middle-initial'
    | 'name-prefix'
    | 'name-suffix'
    | 'password'
    | 'password-new'
    | 'postal-address'
    | 'postal-address-country'
    | 'postal-address-extended'
    | 'postal-address-extended-postal-code'
    | 'postal-address-locality'
    | 'postal-address-region'
    | 'postal-code'
    | 'street-address'
    | 'sms-otp'
    | 'tel'
    | 'tel-country-code'
    | 'tel-national'
    | 'tel-device'
    | 'username'
    | 'username-new'
    | 'off'
    | undefined;
  autoCapitalize?: 'none' | undefined;
  errorMsg?: string | undefined;
  multiline?: boolean | undefined;
  numberOfLines?: number;
  maxLength?: number;
  isLoading?: boolean;
  returnKeyLabel?: string;
  returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
  editable?: boolean;
  showAsterisk?: boolean;
}) => {
  const {
    value,
    containerStyle,
    style,
    label,
    placeholder,
    inputStyle,
    prependComponent,
    appendComponent,
    onChange,
    onEndEditing,
    onFocus,
    secureTextEntry,
    keyboardType = 'default',
    autoCompleteType = 'off',
    autoCapitalize = 'none',
    errorMsg = '',
    multiline = false,
    numberOfLines = 1,
    isLoading = false,
    returnKeyLabel,
    returnKeyType,
    editable = true,
    maxLength,
    showAsterisk,
  } = props;
  return (
    <View
      style={{position: 'relative', paddingBottom: ms(8), ...containerStyle}}>
      {/* label */}
      {label && (
        <>
          {typeof label === 'string' ? (
            <BaseText
              style={{
                fontSize: fontSz(14),
                fontFamily: 'Gordita-Regular',
                fontWeight: '400',
                color: Colors.inputBackgroundLight,
              }}>
              {label}
              {showAsterisk && (
                <Text
                  fontSize={fontSz(14)}
                  fontFamily="Gordita-Regular"
                  fontWeight="400"
                  text={'*'}
                  color={Colors.debitRed}
                />
              )}
            </BaseText>
          ) : (
            label
          )}
        </>
      )}

      {/* Text Input */}
      <View
        style={{
          flexDirection: 'row',
          height: hp(55),
          paddingHorizontal: ms(14),
          marginTop: ms(4),
          borderRadius: ms(8),
          borderColor: errorMsg.length > 0 ? Colors.error : '#F4F4F4',
          borderWidth: ms(1),
          backgroundColor: '#F4F4F4',
          ...style,
        }}>
        {prependComponent}

        <TextInput
          style={{
            flex: 1,
            ...inputStyle,
            color: Colors.baseBlueText,
            fontFamily: 'Gordita-Medium',
            opacity: editable ? 1 : 0.5,
          }}
          placeholder={placeholder}
          value={value}
          placeholderTextColor={'#C4C4C4'}
          onChangeText={text => onChange(text)}
          onEndEditing={text => onEndEditing(text)}
          onFocus={text => onFocus()}
          secureTextEntry={secureTextEntry}
          keyboardType={keyboardType}
          autoComplete={autoCompleteType}
          autoCapitalize={autoCapitalize}
          multiline={multiline}
          numberOfLines={numberOfLines}
          returnKeyLabel={returnKeyLabel}
          returnKeyType={returnKeyType}
          editable={editable}
          maxLength={maxLength}
        />

        {appendComponent}
      </View>
      {/* error message */}
      <Text
        style={{
          // paddingTop: ms(2.5),
          position: 'absolute',
          bottom: ms(-10),
          left: 0,
        }}
        fontSize={fontSz(14)}
        fontFamily="Gordita-Regular"
        fontWeight="400"
        text={`${errorMsg}`}
        color={Colors.error}
      />
    </View>
  );
};

export default Input;