// Metro module 12215 (f12216).
import { useState, useRef, useCallback } from "react";
import { View } from "react-native";
import RelationshipStore from "../../../stores/RelationshipStore";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import { intl, t } from "../../../intl/index.native";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import RelationshipActionCreators from "../../../actions/RelationshipActionCreators";
import KeyboardAwareView from "../../keyboard/native/KeyboardAwareView";
import Alert from "../../../components_native/common/Alert";
import { Text } from "../../../design/components/Text/native/Text";
import { TextField } from "../../../design/components/TextField/native/TextField.native";
import UserUtils from "../../../utils/UserUtils";
const useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_SCRIM,
    justifyContent: "center",
    alignItems: "center"
  },
  title: {
    textAlign: "center"
  },
  description: {
    marginTop: 8,
    marginBottom: 16,
    textAlign: "center",
    lineHeight: 18
  }
});
export default function AddFriendNicknameModal(props) {
  let state, setState, ref, callback;
  const { userId, showUserProfile } = props;
  state = void 0;
  setState = void 0;
  ref = void 0;
  callback = void 0;
  let _handleSubmit2 = function _handleSubmit() {
    const r9 = async () => {
      let current, c30512_3;
      let c30512_4 = 0;
      L15: {
        try {
          if (state) {
            break L15;
          }
          setState(true);
          c30512_4 = 1;
          const current2 = ref.current;
          current = current2;
          if (current2 == null) {
            current = "";
          }
          await RelationshipActionCreators.updateRelationship(userId, current);
          (0, callback)();
          c30512_4 = 0;
          (0, setState)(false);
        } catch ($e) {
          const r27 = $e;
          let r7 = r27;
          c30512_3 = r27;
          if (c30512_4 !== 0) {
            while (true) {
              try {
                const r73 = c30512_3;
                c30512_4 = 0;
                (0, setState)(false);
                throw r73;
              } catch (r70) {
                r7 = r70;
                c30512_3 = r70;
                if (c30512_4 === 0) {
                  break;
                }
              }
            }
          }
          throw r7;
        }
        return void 0;
      }
    };
    _handleSubmit2 = r9;
    return r9.apply(this, arguments);
  };
  const styles = useStyles();
  [state, setState] = useState(false);
  const stateFromStores = useStateFromStores([RelationshipStore], () => RelationshipStore.getNickname(userId));
  let r38 = stateFromStores;
  if (r38 == null) {
    r38 = null;
  }
  ref = useRef(r38);
  const callback2 = useCallback((a0) => {
    ref.current = a0;
  }, []);
  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getUser(userId));
  const r19 = stateFromStores == null ? intl.string(t.BGYkaH) : intl.string(t["8pOYUE"]);
  callback = useCallback(() => {
    ModalActionCreators.pop();
    if (showUserProfile != null) {
      showUserProfile();
    }
  }, [showUserProfile]);
  return <View style={styles.container}>
    <KeyboardAwareView>
      <Alert confirmText={intl.string(t["R3BPH+"])} onConfirm={function handleSubmit() {
        return _handleSubmit2.apply(this, arguments);
      }} cancelText={intl.string(t["ETE/oC"])} onCancel={callback}>
        <Text style={styles.title} accessibilityRole="header" variant="heading-lg/extrabold" color="mobile-text-heading-primary">{r19}</Text>
        <Text style={styles.description} variant="text-sm/medium" color="text-default">
          {intl.string(t["NdQ+lP"])}
        </Text>
        <TextField onChange={callback2} autoFocus placeholder={UserUtils.getName(stateFromStores2)} defaultValue={stateFromStores} maxLength={32} isClearable />
      </Alert>
    </KeyboardAwareView>
  </View>;
};