// Metro module 11389 (f11390).
import { useState, useCallback } from "react";
import { TouchableOpacity, View } from "react-native";
import { MAX_POLL_ANSWER_LENGTH } from "../PollsConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useRenderPollAnswerImage from "./useRenderPollAnswerImage";
import { closeEditPollCreationImageAltTextModal } from "./EditPollCreationImageAltTextModalActionCreators";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import { intl, t } from "../../../intl/index.native";
import { Icon, Spacer, ClearButtonVisibility } from "../../../design/void/native";
import Module7699 from "../../../_bundle/Module7699";
import { Text } from "../../../design/components/Text/native/Text";
import KeyboardAwareView from "../../keyboard/native/KeyboardAwareView";
import FormHeader from "../../guild_member_verification/native/components/form_fields/FormHeader";
import { FormInput } from "../../../design/void/Form/native/index";
const useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    flex: 1
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 18,
    paddingTop: 10
  },
  separator: {
    borderBottomWidth: 1,
    borderColor: Module712.colors.INTERACTIVE_BACKGROUND_HOVER
  },
  contentContainer: {
    flex: 1,
    justifyContent: "center"
  },
  imageContainer: {
    borderRadius: Module712.radii.lg,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
    overflow: "hidden",
    aspectRatio: 1
  },
  formContainer: {
    paddingHorizontal: 16
  },
  textInput: {
    backgroundColor: Module712.colors.REDESIGN_CHAT_INPUT_BACKGROUND,
    borderRadius: Module712.radii.lg
  }
});
export default function EditPollCreationImageAltTextModal(props) {
  const { channelId, answer, onSave, imageSize } = props;
  const styles = useStyles();
  const renderPollAnswerImage = useRenderPollAnswerImage(channelId, answer.localCreationAnswerId, answer.image, imageSize, imageSize);
  const renderImage = renderPollAnswerImage.renderImage;
  let r38 = renderPollAnswerImage.upload?.description;
  if (r38 == null) {
    r38 = "";
  }
  const [state, onChange] = useState(r38);
  const callback = useCallback(() => {
    if (state != null) {
      onSave(state);
    }
    closeEditPollCreationImageAltTextModal();
  }, [onSave, state]);
  return <SafeAreaPaddingView top style={styles.container}>
    <View style={styles.header}>
      <TouchableOpacity onPress={closeEditPollCreationImageAltTextModal} activeOpacity={0.5} accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)}>
        <Icon source={Module7699} />
      </TouchableOpacity>
      <Text variant="redesign/heading-18/bold" color="mobile-text-heading-primary">
        {intl.string(t.Cq44Rg)}
      </Text>
      <TouchableOpacity onPress={callback} activeOpacity={0.5}>
        <Text variant="text-md/medium" color="text-brand">
          {intl.string(t["R3BPH+"])}
        </Text>
      </TouchableOpacity>
    </View>
    <View style={styles.separator} />
    <KeyboardAwareView style={styles.contentContainer}>
      <View style={styles.imageContainer}>{renderImage}</View>
      <View style={styles.formContainer}>
        <Spacer size={27} />
        <FormHeader>
          {intl.string(t["/2Gnoa"])}
        </FormHeader>
        <FormInput showTopContainer={false} showBorder={false} multiline={false} value={state} onChange={onChange} clearButtonVisibility={ClearButtonVisibility.WITH_CONTENT} style={styles.textInput} textContentType="none" maxLength={MAX_POLL_ANSWER_LENGTH} autoFocus autoCorrect accessibilityLabel={intl.string(t["/2Gnoa"])} />
        <Spacer size={27} />
      </View>
    </KeyboardAwareView>
  </SafeAreaPaddingView>;
};