// Metro module 11385 (f11386).
import { useMemo, useCallback } from "react";
import { Keyboard, TouchableOpacity, View } from "react-native";
import ChannelStore from "../../../stores/ChannelStore";
import { DraftType } from "../../../stores/DraftStore";
import { MAX_POLL_ANSWER_LENGTH, POLL_CREATION_IMAGE_INPUT_ACTION_SHEET_KEY } from "../PollsConstants";
import { EmojiIntention } from "../../emojis/EmojiConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useRenderPollAnswerImage from "./useRenderPollAnswerImage";
import { intl, t } from "../../../intl/index.native";
import { filterOutUUID } from "../PollsUtils";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { Icon } from "../../../design/void/native";
import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
import UploadAttachmentActionCreators from "../../../actions/UploadAttachmentActionCreators";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import Module6577 from "../../../_bundle/Module6577";
import { FormInput } from "../../../design/void/Form/native/index";
import Module4149 from "../../../_bundle/Module4149";
import PollCreationInputError from "./PollCreationInputError";
let useStyles;
const ImageInput = function ImageInput(props) {
  const { channelId: channelId2, localCreationAnswerId: localCreationAnswerId2, image, iconSrc } = props;
  let openExpressionPicker3 = props.openExpressionPicker;
  const { emojiSize = 24, containerStyle, imageSize, answerIndex, openImageInputActionSheet: openImageInputActionSheet2 } = props;
  const styles = useStyles();
  const renderPollAnswerImage = useRenderPollAnswerImage(channelId2, localCreationAnswerId2, image, imageSize, emojiSize);
  const { renderImage, upload, setUploadSize } = renderPollAnswerImage;
  const memo = useMemo(() => {
    if (image?.emoji != null) {
      return intl.formatToPlainString(t.vcC7Qn, {
        imageName: image.emoji.name,
        answerNumber: answerIndex + 1
      });
    }
    if (upload != null) {
      let filename = upload.item.filename;
      if (filename == null) {
        filename = "";
      }
      return intl.formatToPlainString(t.vcC7Qn, {
        imageName: filterOutUUID(filename),
        answerNumber: answerIndex + 1
      });
    }
    return intl.formatToPlainString(t.ieNrxk, {
      answerNumber: answerIndex + 1
    });
  }, [image, upload, answerIndex]);
  const callback = useCallback((a0) => {
    setUploadSize(a0.nativeEvent.layout.width);
  }, [setUploadSize]);
  const r2 = upload != null || image?.emoji != null;
  if (r2) {
    openExpressionPicker3 = openImageInputActionSheet2;
  }
  return <PressableOpacity accessibilityRole="button" accessibilityLabel={memo} onPress={openExpressionPicker3} onLongPress={r2 ? void 0 : openImageInputActionSheet2} onLayout={imageSize == null ? callback : void 0} style={[containerStyle, upload != null && styles.uploadContainer]}>
    {r2 ? <View>{renderImage}</View> : <Icon source={iconSrc} />}
  </PressableOpacity>;
};
useStyles = createStyles({
  defaultContainer: {
    flexDirection: "row",
    alignItems: "center"
  },
  defaultImageAndTextContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Module712.colors.INPUT_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.lg,
    flex: 1,
    overflow: "hidden"
  },
  cannotRemove: {
    marginRight: 30
  },
  defaultImageContainer: {
    width: 60,
    height: 48,
    justifyContent: "center",
    alignItems: "center"
  },
  pollAnswerTextInput: {
    flex: 1,
    paddingStart: 0
  },
  defaultRemoveButtonContainer: {
    paddingLeft: 6,
    height: 48,
    justifyContent: "center",
    color: Module712.colors.TEXT_MUTED
  },
  uploadContainer: {
    alignItems: "flex-start"
  },
  errorInput: {
    borderColor: Module712.colors.BORDER_FEEDBACK_CRITICAL,
    borderWidth: 2
  }
});
export default function PollAnswerInput(props) {
  let localCreationAnswerId, handleSaveAltText2;
  const { answer, index, inputRef, channelId, onAnswerTextChange, onAnswerEmojiSelect } = props;
  let canRemoveAnswer = props.canRemoveAnswer;
  const { onRemoveAnswer, onRemoveAnswerImage, onSubmitEditing, error } = props;
  localCreationAnswerId = void 0;
  const openExpressionPicker2 = function openExpressionPicker() {
    const channel = ChannelStore.getChannel(channelId);
    if (channel != null) {
      Keyboard.dismiss();
      openEmojiPickerActionSheet({
        channel,
        onPressEmoji: (a0) => {
          onAnswerEmojiSelect(a0, index);
        },
        pickerIntention: EmojiIntention.POLLS,
        startExpanded: false,
        autoFocus: false
      });
    }
  };
  handleSaveAltText2 = function handleSaveAltText(a0) {
    UploadAttachmentActionCreators.update(channelId, answer.localCreationAnswerId, DraftType.Poll, {
      description: a0
    });
  };
  const styles = useStyles();
  const image2 = answer.image;
  localCreationAnswerId = answer.localCreationAnswerId;
  let r7 = error != null && error.length > 0;
  const style = [styles.defaultContainer, canRemoveAnswer ? !canRemoveAnswer : styles.cannotRemove];
  const r88 = [<View style={[styles.defaultImageAndTextContainer, r7 ? styles.errorInput : r7]}>
    <ImageInput channelId={channelId} localCreationAnswerId={localCreationAnswerId} image={image2} openExpressionPicker={openExpressionPicker2} openImageInputActionSheet={function openImageInputActionSheet() {
      ActionSheetActionCreators.openLazy(import("./ImageInputActionSheet"), POLL_CREATION_IMAGE_INPUT_ACTION_SHEET_KEY, {
        channelId,
        index,
        answer,
        onSaveAltText: handleSaveAltText2,
        onRemoveAnswerImage,
        openExpressionPicker: openExpressionPicker2
      });
    }} iconSrc={Module6577} containerStyle={styles.defaultImageContainer} imageSize={48} answerIndex={index} />
    <FormInput ref={inputRef} textAlignVertical="center" showTopContainer={false} showBorder={false} placeholder={intl.string(t.NNHVlv)} onChange={(event) => onAnswerTextChange({
      text: event,
      index,
      localCreationAnswerId
    })} onSubmitEditing={onSubmitEditing} blurOnSubmit={false} style={styles.pollAnswerTextInput} textContentType="none" accessibilityLabel={intl.formatToPlainString(t["3+V8G9"], {
      answerNumber: index + 1
    })} accessibilityHint={r7 ? intl.formatToPlainString(t.jnq5Ho, {
      errorMessage: error
    }) : void 0} maxLength={MAX_POLL_ANSWER_LENGTH} returnKeyType="next" required autoCorrect aria-invalid={error} />
  </View>, ,];
  if (canRemoveAnswer) {
    canRemoveAnswer = <TouchableOpacity onPress={() => onRemoveAnswer(index)} accessibilityRole="button" style={styles.defaultRemoveButtonContainer} accessibilityLabel={intl.formatToPlainString(t["22fjEc"], {
      answerNumber: index + 1
    })}>
      <Icon size={Icon.Sizes.MEDIUM} source={Module4149} color={styles.defaultRemoveButtonContainer.color} />
    </TouchableOpacity>;
  }
  r88[1] = canRemoveAnswer;
  const r119 = [<View style={style}>{r88}</View>, ,];
  if (r7) {
    r7 = <PollCreationInputError message={error} />;
  }
  r119[1] = r7;
  return <>{r119}</>;
};