import React, {forwardRef} from 'react';
import {TextInput, View} from 'react-native';
import {
  capitalizeText,
  Colors,
  fontSz,
  globalStyles,
  hp,
  ms,
} from '../../utils';
import {Text} from '../Text';

interface InputProps {
  value: any;
  onChange?: any;
  onChangeValue?: (value: number | React.SetStateAction<string> | null) => void;
  containerStyle?: any;
  //
  label: any;
  bottomLabel?: any;
  placeholder: any;
  inputStyle?: any;
  prependComponent?: any;
  appendComponent?: 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;
  //
  topComponent?: any;
  beneficiary?: any;
}

const AccountNumberInput: React.ForwardRefRenderFunction<any, InputProps> = (
  props,
  ref,
) => {
  const {
    value,
    containerStyle,
    label,
    placeholder,
    inputStyle,
    prependComponent,
    appendComponent,
    onChange,
    onEndEditing,
    onFocus,
    secureTextEntry,
    keyboardType = 'numeric',
    autoCompleteType = 'off',
    autoCapitalize = 'none',
    errorMsg = '',
    multiline = false,
    numberOfLines = 1,
    maxLength,
    isLoading = false,
    returnKeyLabel,
    returnKeyType,
    editable = true,
    //
    topComponent,
    beneficiary,
  } = props;

  return (
    <View
      style={{position: 'relative', paddingBottom: ms(8), ...containerStyle}}>
      {/* label && icon */}
      <View style={globalStyles.rowBetween}>
        {typeof label === 'string' ? (
          <Text
            fontSize={fontSz(14)}
            fontFamily="Gordita-Regular"
            fontWeight="400"
            text={`${label}`}
            color={Colors.inputBackgroundLight}
          />
        ) : (
          label
        )}
        {topComponent ?? topComponent}
      </View>

      {/* Text Input */}
      <View
        style={{
          flexDirection: 'row',
          height: hp(55),
          paddingHorizontal: ms(10),
          marginTop: ms(4),
          borderRadius: ms(8),
          borderColor: errorMsg.length > 0 ? Colors.error : '#F4F4F4',
          borderWidth: ms(1),
          backgroundColor: '#F4F4F4',
        }}>
        {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>
      {/* bottom message */}
      {errorMsg.length > 0 && (
        <Text
          style={{
            // paddingTop: ms(2.5),
            position: 'absolute',
            bottom: errorMsg.trim().length > 60 ? ms(-25) : ms(-10),
            left: 0,
          }}
          fontSize={fontSz(14)}
          fontFamily="Gordita-Regular"
          fontWeight="400"
          text={`${errorMsg}`}
          color={Colors.error}
        />
      )}
      {errorMsg.length === 0 && beneficiary?.length > 0 && (
        <View
          style={[
            {
              position: 'absolute',
              bottom: ms(-10),
              width: '100%',
              // left: 0,
            },
          ]}>
          <View style={[globalStyles.rowBetween, {width: '100%'}]}>
            <Text
              fontSize={fontSz(14)}
              fontFamily="Gordita-Regular"
              fontWeight="400"
              text={`${capitalizeText(beneficiary)}`}
              color={Colors.inputBackground}
            />
          </View>
        </View>
      )}
    </View>
  );
};

export default forwardRef(AccountNumberInput);