// Metro module 11971 (f11972).
import { useRef, useEffect, useState, useCallback, useMemo, useLayoutEffect } from "react";
import { ScrollView, View } from "react-native";
import UserStore from "../../../stores/UserStore";
import { STATUS_MAX_LENGTH } from "../Constants";
import { AnalyticEvents, AnalyticsSections, NOOP, Fonts } from "../../../Constants";
import { EmojiIntention } from "../../emojis/EmojiConstants";
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 { Icon } from "../../../design/void/native";
import Module8998 from "../../../_bundle/Module8998";
import getRandomCustomStatusPrompt from "../utils/getRandomCustomStatusPrompt";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { useCustomStatusActivity } from "../utils/userSettingToActivity";
import { useStateFromStores } from "../../../_bundle/Module589";
import computeInitialClearAfter from "../utils/computeInitialClearAfter";
import setCustomStatus from "../setCustomStatus";
import { AccessibilityAnnouncer } from "../../../design/shared";
import removeCustomStatus from "../utils/removeCustomStatus";
import { setAccessibilityFocus } from "../../a11y/native/setAccessibilityFocus.android";
import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
import useSafeAreaAvoidingInputs_native from "../../safe_area/useSafeAreaAvoidingInputs.native";
import maybeShowDiscardChangesAlert from "../../user_settings/profiles/native/maybeShowDiscardChangesAlert";
import { dismissKeyboard } from "../../../utils/native/ChatInputUtils";
import CustomStatusPreview from "./CustomStatusPreview";
import { HeaderTextButton, GenericHeaderTitle } from "../../main_tabs_v2/native/shared_components/HeaderShared";
import { getHeaderCloseButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
import { Text } from "../../../design/components/Text/native/Text";
import ActivityEmoji from "../../activity_status/native/ActivityEmoji";
import FormInput from "../../../design/void/Form/native/FormInput";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import formatClearAfterValue from "../utils/formatClearAfterValue";
import { TrashIcon } from "../../../design/components/Icon/native/redesign/generated/TrashIcon";
import { isAndroid } from "../../../_bundle/Module501";
import { KeyboardAwareScrollView } from "../../../_bundle/Module1595";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { Navigator } from "../../../design/components/Navigator/native/Navigator.native";
let useStyles, EditCustomStatusWithPreview;
const ClearInputButton = function ClearInputButton(props) {
  const onPress2 = props.onPress;
  const styles = useStyles();
  return <PressableOpacity style={{
    borderRadius: 10,
    paddingLeft: 8
  }} accessibilityRole="button" accessibilityLabel={intl.string(t.VkKicb)} onPress={onPress2} hitSlop={{
    top: 8,
    bottom: 8,
    right: 8
  }}>
    <Icon source={Module8998} style={styles.closeIcon} size={Icon.Sizes.SMALL} />
  </PressableOpacity>;
};
EditCustomStatusWithPreview = function EditCustomStatusWithPreview(props) {
  let stateFromStores, state, setState, state2, setState2, state3, setState3, placeholderText, callback, ref2, callback2, callback3, ref3, ref4, memo, callback4;
  const { navigation, onClose, analyticsLocations } = props;
  let prompt3 = props.prompt;
  stateFromStores = void 0;
  state = void 0;
  setState = void 0;
  state2 = void 0;
  setState2 = void 0;
  state3 = void 0;
  setState3 = void 0;
  placeholderText = void 0;
  callback = void 0;
  ref2 = void 0;
  callback2 = void 0;
  callback3 = void 0;
  ref3 = void 0;
  ref4 = void 0;
  memo = void 0;
  callback4 = void 0;
  if (prompt3 == null) {
    prompt3 = getRandomCustomStatusPrompt();
  }
  const ref = useRef(prompt3);
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
      type: AnalyticsSections.EDIT_CUSTOM_STATUS_MODAL_WITH_PREVIEW,
      location_stack: analyticsLocations
    });
  }, [analyticsLocations]);
  const styles = useStyles();
  const customStatusActivity = useCustomStatusActivity();
  stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  const r16 = computeInitialClearAfter();
  let r59 = customStatusActivity?.state;
  if (r59 == null) {
    r59 = "";
  }
  [state, setState] = useState(r59);
  let r65 = customStatusActivity?.emoji;
  if (r65 == null) {
    r65 = null;
  }
  [state2, setState2] = useState(r65);
  [state3, setState3] = useState(r16);
  placeholderText = ref.current != null ? ref.current.label() : intl.string(t.xod367);
  callback = useCallback(() => {
    let current = ref.current;
    if (current == null) {
      current = void 0;
    }
    setCustomStatus({
      text: state,
      emojiInfo: state2,
      clearAfter: state3,
      analyticsLocations,
      prompt: current
    });
    AccessibilityAnnouncer.announce(intl.string(t.Og40Yn));
    onClose();
  }, [state, state2, state3, onClose, analyticsLocations]);
  const callback5 = useCallback(() => {
    removeCustomStatus();
    AccessibilityAnnouncer.announce(intl.string(t.YdUwBS));
    onClose();
  }, [onClose]);
  ref2 = useRef(null);
  callback2 = useCallback(() => {
    setAccessibilityFocus({
      ref: ref2,
      delay: 500
    });
  }, []);
  callback3 = useCallback((a0) => {
    let surrogates;
    if (a0.id == null && (a0.surrogates != null && a0.surrogates !== "")) {
      surrogates = a0.surrogates;
    } else {
      surrogates = a0.name;
      if (surrogates == null) {
        surrogates = "";
      }
    }
    setState2({
      id: a0.id,
      name: surrogates,
      animated: a0.animated
    });
    callback2();
  }, [callback2]);
  const callback7 = useCallback(() => {
    openEmojiPickerActionSheet({
      onPressEmoji: callback3,
      onClose: callback2,
      pickerIntention: EmojiIntention.STATUS
    });
  }, [callback3, callback2]);
  const callback6 = useCallback(() => {
    setState2(null);
    setState("");
  }, [setState2, setState]);
  ref3 = useRef(null);
  const ref5 = useRef(null);
  const insets = useSafeAreaInsetsKeyboardAware_native({
    includeKeyboardHeight: true,
    isKeyboardAwareOnIOS: false
  }).insets;
  const onFocus = useSafeAreaAvoidingInputs_native({
    insets,
    inputs: [{
      ref: ref3
    }],
    scrollViewRef: ref5
  }).onFocus;
  const callback8 = useCallback(() => {
    const current = ref3.current;
    if (current != null) {
      current.blur();
    }
  }, []);
  ref4 = useRef({
    statusText: state,
    statusEmoji: state2,
    clearAfter: state3
  });
  memo = useMemo(() => state !== ref4.current.statusText || state2 !== ref4.current.statusEmoji || state3 !== ref4.current.clearAfter, [state, state2, state3]);
  callback4 = useCallback(() => {
    maybeShowDiscardChangesAlert({
      hasEdits: memo,
      onHasEdits: dismissKeyboard,
      resetPending: NOOP,
      onConfirm: onClose
    });
  }, [memo, onClose]);
  const memo2 = useMemo(() => stateFromStores != null ? <CustomStatusPreview user={stateFromStores} pendingStatusText={state} pendingStatusEmoji={state2} placeholderText={placeholderText} /> : null, [stateFromStores, state, state2, placeholderText]);
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => <HeaderTextButton label={intl.string(t["R3BPH+"])} onPress={callback} disabled={!memo} />,
      headerLeft: getHeaderCloseButton(callback4)
    });
  }, [navigation, callback, memo, callback4]);
  if (stateFromStores == null) {
    return null;
  }
  const r274 = <View style={styles.container}>
    <View style={styles.previewContainer}>{memo2}</View>
    <View style={styles.statusSection}>
      <View style={styles.statusSectionHeader}>
        <Text accessibilityRole="header" variant="text-sm/semibold" color="text-default">
          {intl.string(t.zOdg0A)}
        </Text>
      </View>
      <View style={styles.statusInput}>
        <View style={styles.statusInputRow}>
          <PressableOpacity ref={ref2} accessibilityLabel={intl.string(t.WkfRZP)} accessibilityValue={{
            text: state2?.name
          }} accessibilityRole="button" onPress={callback7}>
            <ActivityEmoji emoji={state2} size={20} style={styles.emoji} withPlaceholder />
          </PressableOpacity>
          <FormInput ref={ref3} maxLength={STATUS_MAX_LENGTH} placeholder={placeholderText} placeholderTextColor={styles.inputPlaceholder.color} accessibilityLabel={intl.string(t.xalUlT)} onSubmitEditing={callback8} onFocus={onFocus} style={styles.status} value={state} onChange={setState} autoCorrect={false} showBorder={false} showTopContainer={false} autoCapitalize="none" inputTextStyle={styles.statusText} multiline submitBehavior="blurAndSubmit" returnKeyType="done" autoFocus />
          {(state2 != null || state !== "") && <ClearInputButton onPress={callback6} />}
        </View>
      </View>
    </View>
    <TableRowGroup hasIcons={false}>
      <TableRow label={intl.string(t["+14vvU"])} arrow onPress={function onPress() {
        dismissKeyboard();
        ActionSheetActionCreators.openLazy(import("./ClearAfterOptionsActionSheet"), "ClearAfterOptionsActionSheet", {
          initialValue: state3,
          onChange: setState3
        });
      }} trailing={<Text variant="text-sm/medium">
        {formatClearAfterValue(state3)}
      </Text>} />
    </TableRowGroup>
    {customStatusActivity != null && <TableRowGroup hasIcons>
      <TableRow icon={<TrashIcon color={Module712.colors.TEXT_FEEDBACK_CRITICAL} />} label={intl.string(t.wO53tu)} onPress={callback5} variant="danger" />
    </TableRowGroup>}
  </View>;
  return isAndroid() ? <ScrollView ref={ref5} keyboardShouldPersistTaps="always" contentContainerStyle={{
    paddingBottom: insets.bottom
  }}>{r274}</ScrollView> : <KeyboardAwareScrollView keyboardShouldPersistTaps="always">{r274}</KeyboardAwareScrollView>;
};
useStyles = createStyles({
  container: {
    flexGrow: 1,
    padding: 16,
    rowGap: 24
  },
  statusSection: {
    rowGap: 8
  },
  statusInput: {
    flexDirection: "column",
    rowGap: 4,
    backgroundColor: Module712.colors.INPUT_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.lg,
    padding: 12
  },
  statusInputRow: {
    flexDirection: "row",
    alignItems: "center"
  },
  emoji: {
    marginRight: 8
  },
  status: {
    color: Module712.colors.TEXT_STRONG,
    lineHeight: 16,
    flexGrow: 1,
    alignSelf: "flex-start",
    paddingVertical: 0,
    paddingHorizontal: 0
  },
  statusText: {
    fontSize: 16,
    lineHeight: 20,
    fontFamily: Fonts.PRIMARY_MEDIUM,
    color: Module712.colors.TEXT_STRONG,
    flexGrow: 1,
    height: "auto",
    textAlignVertical: "center"
  },
  inputPlaceholder: {
    color: Module712.colors.TEXT_MUTED
  },
  previewContainer: {
    alignItems: "center",
    ...Module712.shadows.SHADOW_LOW
  },
  closeIcon: {
    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
    flexShrink: 0
  },
  statusSectionHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  }
});
export default function EditCustomStatusWithPreviewModal(props) {
  const { analyticsLocations: analyticsLocations2, prompt } = props;
  return <Navigator initialRouteName="root" screens={useMemo(() => {
    const analyticsLocations3 = analyticsLocations2;
    const prompt2 = prompt;
    return {
      root: {
        title: intl.string(t.Iuzg8R),
        headerTitle: () => <GenericHeaderTitle title={intl.string(t.Iuzg8R)} />,
        headerLeft: getHeaderCloseButton(ModalActionCreators.pop),
        ignoreKeyboard: true,
        render: (a0, a1) => <EditCustomStatusWithPreview navigation={a1} onClose={ModalActionCreators.pop} analyticsLocations={analyticsLocations3} prompt={prompt2} />
      }
    };
  }, [analyticsLocations2, prompt])} headerStatusBarHeight={isAndroid() ? void 0 : 12} headerStyle={isAndroid() ? void 0 : {
    height: 56
  }} />;
};