// Metro module 9236 (f9237).
import { forwardRef, useRef, useEffect } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../intl/index.native";
import { Text } from "../../../design/components/Text/native/Text";
import * as _PhoneOrEmailUtils from "../PhoneOrEmailUtils";
import { PhoneOrEmailSelectorForceMode } from "../PhoneOrEmailUtils";
import FreeFormLabel from "../../../design/void/Form/native/FreeFormLabel";
import FreeFormTextInput from "../../../design/void/Form/native/FreeFormTextInput";
import FreeFormErrorLabel from "../../../design/void/Form/native/FreeFormErrorLabel";
let useStyles;
const CountryCodeSelector = function CountryCodeSelector(props) {
  const show = props.show;
  let alpha22 = props.alpha2;
  const { countryCode: countryCode2, onPress } = props;
  const styles = useStyles();
  if (alpha22 == null) {
    alpha22 = "";
  }
  const accessibilityLabel = `${alpha22} ${countryCode2}`;
  return show ? <View style={styles.selectorOuterContainer}>
    <View style={styles.selectorContainer}>
      <PressableOpacity onPress={onPress} style={styles.selectorPressable} androidRippleConfig={{
        borderless: true
      }} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityHint={intl.string(t.GwAW3k)}>
        <Text style={styles.selectorText} variant="text-md/medium" color="mobile-text-heading-primary">{accessibilityLabel}</Text>
      </PressableOpacity>
      <View style={styles.separator} />
    </View>
  </View> : null;
};
useStyles = createStyles({
  label: {
    marginBottom: 8
  },
  input: {
    flexGrow: 1,
    marginBottom: 8
  },
  error: {
    marginBottom: 8
  },
  hint: {
    marginBottom: 8
  },
  selectorOuterContainer: {
    overflow: "hidden"
  },
  selectorContainer: {
    flex: 1,
    flexDirection: "row"
  },
  selectorPressable: {
    justifyContent: "center"
  },
  selectorText: {
    alignSelf: "center"
  },
  separator: {
    borderLeftWidth: 1,
    borderLeftColor: Module712.colors.INTERACTIVE_BACKGROUND_SELECTED,
    marginHorizontal: 12,
    marginVertical: -4
  }
});
const r43 = forwardRef(function({ style, textInputStyle, label, error, value, hint, onChangeText, alpha2, countryCode, onPressCountrySelector, forceMode, ...props }, a1) {
  let shouldShowCountryCodeSelector, current, ref;
  shouldShowCountryCodeSelector = void 0;
  current = void 0;
  ref = void 0;
  const handleChangeText = function handleChangeText(a0) {
    const r12 = _PhoneOrEmailUtils.shouldShowCountryCodeSelector(forceMode, a0) ? countryCode : "";
    if (onChangeText != null) {
      onChangeText(a0, r12);
    }
  };
  const styles = useStyles();
  shouldShowCountryCodeSelector = _PhoneOrEmailUtils.shouldShowCountryCodeSelector(forceMode, value);
  current = {
    handleChangeText,
    value
  };
  ref = useRef(current);
  useEffect(() => {
    ref.current = current;
  });
  useEffect(() => {
    const current2 = ref.current;
    (0, current2.handleChangeText)(current2.value);
  }, [countryCode]);
  return <View style={style}>
    {label != null ? <FreeFormLabel style={styles.label}>{label}</FreeFormLabel> : null}
    <FreeFormTextInput {...props} renderLeadingComponent={() => <CountryCodeSelector show={shouldShowCountryCodeSelector} alpha2={alpha2} countryCode={countryCode} onPress={onPressCountrySelector} />} error={error != null} ref={a1} value={value} style={[styles.input, textInputStyle]} onChangeText={handleChangeText} textContentType={forceMode === PhoneOrEmailSelectorForceMode.PHONE ? "telephoneNumber" : "emailAddress"} keyboardType={forceMode === PhoneOrEmailSelectorForceMode.PHONE ? "phone-pad" : "email-address"} accessibilityLabel={label} accessibilityHint={hint} />
    {error != null ? <FreeFormErrorLabel style={styles.error}>{error}</FreeFormErrorLabel> : null}
    {hint != null ? <Text style={styles.hint} variant="text-xs/medium" color="text-muted">{hint}</Text> : null}
  </View>;
});
export default r43;