// Metro module 11372 (f11373).
import { forwardRef, useEffect, useRef, useCallback } from "react";
import { ScrollView, TouchableOpacity, View } from "react-native";
import { MAX_POLL_QUESTION_LENGTH, POLL_CREATION_DURATION_ACTION_SHEET_KEY } from "../PollsConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { isAndroid } from "../../../utils/PlatformUtils";
import { AlertModal, AlertActionButton } from "../../../design/components/AlertModal/native/AlertModal.native";
import { intl, t } from "../../../intl/index.native";
import { TextInput } from "../../../design/components/TextInput/native/TextInput.native";
import { Icon } from "../../../design/void/native";
import Module11373 from "../../../_bundle/Module11373";
import { Text } from "../../../design/components/Text/native/Text";
import usePollDurationOptions from "../usePollDurationOptions";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import { dismissKeyboard } from "../../../utils/native/ChatInputUtils";
import useTrackImpression from "../../app_analytics/useTrackImpression";
import { ImpressionTypes, ImpressionNames } from "../../../_bundle/Module503";
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
import { closeCreatePollModal } from "./PollCreationModalActionCreators";
import ToastActionCreators from "../../toast/native/ToastActionCreators";
import { PollsIcon } from "../../../design/components/Icon/native/redesign/generated/PollsIcon";
import { AccessibilityAnnouncer } from "../../../_bundle/Module3902";
import useCreatePollFormData from "../useCreatePollFormData";
import { useTrackPollCreationEvents } from "../useTrackPollEvents";
import { useNavigatorBackPressHandler } from "../../../design/components/Navigator/native/useNavigatorBackPressHandler.native";
import { isPollCreationEmpty } from "../PollsUtils";
import { openAlert } from "../../../design/components/AlertModal/native/useAlertStore.native";
import useFocusHelper from "./useFocusHelper";
import { HeaderActionButton } from "../../../design/components/Navigator/native/HeaderActionButton.native";
import Module5176 from "../../../_bundle/Module5176";
import ErrorBlock from "../../guild_role_subscriptions/native/components/ErrorBlock";
import { FormLabel } from "../../../design/void/Form/native/index";
import PollAnswerInput from "./PollAnswerInput";
import { TableCheckboxRow } from "../../../design/components/TableRow/native/TableCheckboxRow.native";
let useStyles, Component, AddAnswerButton, PollDurationSelectionRow;
const UnsavedChangesAlertModal = function UnsavedChangesAlertModal(props) {
  const onConfirm = props.onConfirm;
  return <AlertModal title={intl.string(t.HMrgcp)} content={intl.string(t["Wxa/j8"])} actions={<>
    <AlertActionButton key="confirm" text={intl.string(t.TzJA4g)} onPress={onConfirm} />
    <AlertActionButton key="back" variant="secondary" text={intl.string(t["2BR5R2"])} />
  </>} />;
};
AddAnswerButton = function AddAnswerButton(props) {
  const onPress2 = props.onPress;
  const styles = useStyles();
  const addAnswerButtonDefault = styles.addAnswerButtonDefault;
  const r24 = <Icon source={Module11373} size={Icon.Sizes.LARGE} color={styles.addAnswerIcon.color} />;
  return <TouchableOpacity onPress={onPress2} style={addAnswerButtonDefault} accessibilityRole="button" accessibilityLabel={intl.string(t.B2Uvme)}>
    {r24}
    <Text variant="text-md/medium" color="text-muted">
      {intl.string(t.B2Uvme)}
    </Text>
  </TouchableOpacity>;
};
PollDurationSelectionRow = function PollDurationSelectionRow(props) {
  const { selectedDuration, onChange } = props;
  const r6 = usePollDurationOptions()[selectedDuration];
  return <TableRow label={intl.string(t.bGHzxb)} accessibilityLabel={`${intl.string(t.bGHzxb)} ${r6}`} accessibilityHint={intl.string(t.A4PJ1o)} onPress={function onPress() {
    dismissKeyboard();
    ActionSheetActionCreators.openLazy(import("./PollDurationActionSheet"), POLL_CREATION_DURATION_ACTION_SHEET_KEY, {
      selectedDuration,
      onChange
    });
  }} trailing={<Text variant="text-md/normal" color="text-muted">{r6}</Text>} arrow />;
};
useStyles = createStyles({
  viewPadding: {
    paddingHorizontal: 18
  },
  scrollContainer: {
    paddingVertical: 20,
    gap: 16
  },
  safeAreaContainer: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    flex: 1
  },
  header: {
    flexDirection: "row",
    paddingHorizontal: 18,
    paddingVertical: 10
  },
  actionButton: {
    flex: 0,
    justifyContent: "flex-start",
    minWidth: 48,
    paddingHorizontal: 0,
    marginHorizontal: 0
  },
  postButton: {
    justifyContent: "flex-end"
  },
  title: {
    textAlign: "center",
    flexGrow: 1
  },
  label: {
    fontSize: 14
  },
  answerInputsContainer: {
    marginVertical: 20,
    rowGap: 16
  },
  addAnswerButtonDefault: {
    paddingVertical: isAndroid() ? 10 : 8,
    paddingLeft: 14,
    marginRight: 30,
    display: "flex",
    flexDirection: "row",
    gap: 16,
    alignItems: "center",
    justifyContent: "flex-start",
    backgroundColor: Module712.colors.MESSAGE_BACKGROUND_HOVER,
    borderRadius: Module712.radii.lg
  },
  addAnswerIcon: {
    color: Module712.colors.TEXT_MUTED
  },
  pollConfigSection: {
    borderTopWidth: 1,
    borderColor: Module712.colors.INTERACTIVE_BACKGROUND_HOVER
  }
});
Component = forwardRef(function({ onChange: onChange2, onSubmitEditing, error }, a1) {
  const r2 = error != null && error.length > 0;
  return <TextInput ref={a1} textAlignVertical="center" label={intl.string(t.WBiKnI)} accessibilityLabel={intl.string(t.WBiKnI)} accessibilityHint={r2 ? intl.formatToPlainString(t.jnq5Ho, {
    errorMessage: error
  }) : void 0} placeholder={intl.string(t["/uQqJW"])} onChange={onChange2} isClearable status={r2 ? "error" : "default"} errorMessage={error} maxLength={MAX_POLL_QUESTION_LENGTH} returnKeyType="next" blurOnSubmit={false} onSubmitEditing={onSubmitEditing} textContentType="none" autoFocus autoCorrect />;
});
export default function PollCreation(props) {
  let ref, answers, question, allowMultiSelect, setAllowMultiSelect, canRemoveMoreAnswers, handleAnswerTextChange, handleEmojiSelect, handleAddAnswer, handleRemoveAnswer, handleRemoveAnswerImage, fieldErrors, shouldFocusOnInvalidField, setShouldFocusOnInvalidField, trackPollCreationCancelled, c18787_18;
  const { channel, onCancel } = props;
  ref = void 0;
  answers = void 0;
  question = void 0;
  allowMultiSelect = void 0;
  setAllowMultiSelect = void 0;
  canRemoveMoreAnswers = void 0;
  handleAnswerTextChange = void 0;
  handleEmojiSelect = void 0;
  handleAddAnswer = void 0;
  handleRemoveAnswer = void 0;
  handleRemoveAnswerImage = void 0;
  fieldErrors = void 0;
  shouldFocusOnInvalidField = void 0;
  setShouldFocusOnInvalidField = void 0;
  trackPollCreationCancelled = void 0;
  c18787_18 = void 0;
  const handleCancelClose2 = function handleCancelClose() {
    trackPollCreationCancelled();
    closeCreatePollModal();
    AccessibilityAnnouncer.announce(intl.string(t["+G3oRq"]));
  };
  useTrackImpression({
    type: ImpressionTypes.VIEW,
    name: ImpressionNames.POLL_EDITOR_VIEWED
  });
  useEffect(() => () => {
    if (!ref.current && onCancel != null) {
      onCancel();
    }
  }, [onCancel]);
  const styles = useStyles();
  const insets = useSafeAreaInsetsKeyboardAware_native({
    includeKeyboardHeight: true
  }).insets;
  ref = useRef(false);
  const createPollFormData = useCreatePollFormData(channel, useCallback(() => {
    ref.current = true;
    closeCreatePollModal();
    ToastActionCreators.open({
      key: "POLL_CREATED_SUCCESS",
      IconComponent: PollsIcon,
      content: intl.string(t.OPsckI)
    });
  }, []), useCallback((a0) => {
    AccessibilityAnnouncer.announce(intl.formatToPlainString(t.BByGU4, {
      number: a0.indexToRemove + 1
    }));
  }, []));
  answers = createPollFormData.answers;
  question = createPollFormData.question;
  allowMultiSelect = createPollFormData.allowMultiSelect;
  setAllowMultiSelect = createPollFormData.setAllowMultiSelect;
  let canAddMoreAnswers = createPollFormData.canAddMoreAnswers;
  canRemoveMoreAnswers = createPollFormData.canRemoveMoreAnswers;
  const handleQuestionChange = createPollFormData.handleQuestionChange;
  handleAnswerTextChange = createPollFormData.handleAnswerTextChange;
  handleEmojiSelect = createPollFormData.handleEmojiSelect;
  handleAddAnswer = createPollFormData.handleAddAnswer;
  handleRemoveAnswer = createPollFormData.handleRemoveAnswer;
  handleRemoveAnswerImage = createPollFormData.handleRemoveAnswerImage;
  const handleSubmitPoll = createPollFormData.handleSubmitPoll;
  fieldErrors = createPollFormData.fieldErrors;
  const { duration, setDuration, createPollError, submitting } = createPollFormData;
  shouldFocusOnInvalidField = createPollFormData.shouldFocusOnInvalidField;
  setShouldFocusOnInvalidField = createPollFormData.setShouldFocusOnInvalidField;
  trackPollCreationCancelled = useTrackPollCreationEvents(answers, allowMultiSelect).trackPollCreationCancelled;
  useNavigatorBackPressHandler(() => {
    let r0;
    if (isPollCreationEmpty(question, answers)) {
      trackPollCreationCancelled();
      AccessibilityAnnouncer.announce(intl.string(t["+G3oRq"]));
      r0 = false;
    } else {
      openAlert("poll-creation-unsaved-changes", <UnsavedChangesAlertModal onConfirm={handleCancelClose2} />);
      r0 = true;
    }
    return r0;
  });
  const focusHelper = useFocusHelper({
    onAddAnswer: () => {
      handleAddAnswer();
    }
  });
  c18787_18 = focusHelper;
  useEffect(() => {
    const r13 = Object.keys(fieldErrors);
    if (r13.length > 0) {
      AccessibilityAnnouncer.announce(intl.formatToPlainString(t.w8e4qF, {
        numOfErrors: r13.length
      }));
      if (shouldFocusOnInvalidField) {
        c18787_18.focus(r13[0]);
        setShouldFocusOnInvalidField(false);
      }
    }
  }, [fieldErrors, focusHelper, setShouldFocusOnInvalidField, shouldFocusOnInvalidField]);
  const r152 = [<View style={styles.header}>
    <HeaderActionButton accessibilityLabel={intl.string(t["ETE/oC"])} onPress={function onPress() {
      if (isPollCreationEmpty(question, answers)) {
        trackPollCreationCancelled();
        closeCreatePollModal();
        AccessibilityAnnouncer.announce(intl.string(t["+G3oRq"]));
      } else {
        openAlert("poll-creation-unsaved-changes", <UnsavedChangesAlertModal onConfirm={handleCancelClose2} />);
      }
    }} source={Module5176} style={styles.actionButton} />
    <Text accessibilityRole="header" variant="redesign/heading-18/bold" color="mobile-text-heading-primary" style={styles.title}>
      {intl.string(t.Flr51u)}
    </Text>
    <HeaderActionButton text={intl.string(t.JOj8Zk)} style={[styles.actionButton, styles.postButton]} disabled={submitting} onPress={handleSubmitPoll} />
  </View>, , ,];
  const r164 = [createPollError != null && <ErrorBlock>
    {createPollError == null ? void 0 : createPollError.getAnyErrorMessage()}
  </ErrorBlock>, <Component ref={focusHelper.refWithKey("question")} onChange={handleQuestionChange} onSubmitEditing={focusHelper.focusNext} error={fieldErrors?.question} />, ,];
  const r191 = [<FormLabel text={intl.string(t.oMBfeS)} color="text-subtle" style={styles.label} />, answers.map((a0, a1) => <PollAnswerInput key={a0.localCreationAnswerId} inputRef={c18787_18.refWithKey(`answer-${a0.localCreationAnswerId}`)} answer={a0} index={a1} channelId={channel.id} onSubmitEditing={c18787_18.focusNext} onAnswerTextChange={handleAnswerTextChange} onAnswerEmojiSelect={handleEmojiSelect} onRemoveAnswer={handleRemoveAnswer} onRemoveAnswerImage={handleRemoveAnswerImage} canRemoveAnswer={canRemoveMoreAnswers} error={fieldErrors == null ? void 0 : fieldErrors[`answer-${a0.localCreationAnswerId}`]} />), ,];
  if (canAddMoreAnswers) {
    canAddMoreAnswers = <AddAnswerButton onPress={handleAddAnswer} />;
  }
  r191[2] = canAddMoreAnswers;
  r164[2] = <View style={styles.answerInputsContainer}>{r191}</View>;
  r152[1] = <ScrollView style={styles.viewPadding} contentContainerStyle={styles.scrollContainer} keyboardShouldPersistTaps="handled">{r164}</ScrollView>;
  r152[2] = <View style={styles.pollConfigSection}>
    <PollDurationSelectionRow selectedDuration={duration} onChange={setDuration} />
    <TableCheckboxRow label={intl.string(t["Ux+iQU"])} checked={allowMultiSelect} onPress={() => setAllowMultiSelect(!allowMultiSelect)} />
  </View>;
  return <View style={[styles.safeAreaContainer, {
    paddingTop: insets.top,
    paddingBottom: insets.bottom
  }]}>
    <>{r152}</>
  </View>;
};