import { useRef } from 'react';
import { StyleProp, Text, View, ViewStyle } from 'react-native';
import { tw } from '../../core/tailwind';
import PhoneInputRN from 'react-native-phone-number-input';
import { FieldValues, UseFormReturn } from 'react-hook-form';

const PhoneInput = PhoneInputRN as any;

export type PhoneNumberFieldProps = React.ComponentProps<typeof PhoneInput> & {
  label?: string;
  errorText?: string | undefined;
  containerStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<ViewStyle>;
  required?: boolean;
  form?: UseFormReturn<FieldValues>;
  name?: string;
};

export const PhoneNumberField = (props: PhoneNumberFieldProps) => {
  const { label, errorText, editable, containerStyle, labelStyle, required, name, form, ...restOfProps } = props;
  const phoneInputRef = useRef<PhoneInputRN>(null);

  return (
    <View style={[tw`mb-5`, containerStyle]}>
      {label ? (
        <View style={tw`flex-row`}>
          <Text style={[tw.style('ml-4 mb-1 text-dark text-xs font-bold'), labelStyle]}>{label}</Text>
          <Text style={tw.style({ hidden: !required, color: 'red' })}>*</Text>
        </View>
      ) : null}
      <View style={tw`flex-row`}>
        <PhoneInput
          ref={phoneInputRef}
          defaultCode="US"
          layout="first"
          containerStyle={tw`bg-light border border-transparent rounded-s border-gray-100 w-full`}
          textContainerStyle={tw`bg-light p-0`}
          textInputStyle={tw`text-xs`}
          codeTextStyle={tw`text-xs`}
          disabled={editable}
          withDarkTheme
          onChangeFormattedText={(t: string) => {
            if (form) {
              form.setValue(name, t);
              if (phoneInputRef.current && !phoneInputRef.current.isValidNumber(t)) {
                form.setError(name, { type: 'custom', message: 'Invalid phone number' });
              } else {
                form.clearErrors(name);
              }
            }
          }}
          {...restOfProps}
        />
      </View>
      {errorText ? <Text style={tw`text-red-500 mt-4`}>{errorText}</Text> : null}
    </View>
  );
};