// Metro module 9847 (f9848).
import { useState, useRef, useEffect } from "react";
import { Image as Image2, ScrollView, View } from "react-native";
import { DraftType } from "../../../stores/DraftStore";
import UploadAttachmentStore from "../../../stores/UploadAttachmentStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
import useSafeAreaAvoidingInputs_native from "../../safe_area/useSafeAreaAvoidingInputs.native";
import { getRenderHeaderTextButton } from "../../main_tabs_v2/native/shared_components/HeaderShared";
import { intl, t } from "../../../intl/index.native";
import UploadAttachmentActionCreators from "../../../actions/UploadAttachmentActionCreators";
import AddImageDescriptionModalActionCreators from "./AddImageDescriptionModalActionCreators";
import { TextArea } from "../../../design/components/TextInput/native/TextArea.native";
import ModalStackNavigator from "../../main_tabs_v2/native/utils/ModalStackNavigator";
let useStyles;
const AddDescription = function AddDescription(props) {
  let state, ref, navigation;
  const { source: source2, channelId, id } = props;
  state = void 0;
  ref = void 0;
  navigation = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([UploadAttachmentStore], () => UploadAttachmentStore.getUpload(channelId, id, DraftType.ChannelMessage));
  const windowDimensions_native = useWindowDimensions_native({
    ignoreKeyboard: true
  });
  const { width, height } = source2;
  const aspectRatio = width != null ? height != null ? width !== 0 ? height !== 0 ? width / height : 1 : 1 : 1 : 1;
  let r40 = stateFromStores?.description;
  if (r40 == null) {
    r40 = "";
  }
  let onChange;
  [state, onChange] = useState(r40);
  ref = useRef(state);
  const ref2 = useRef(null);
  const ref3 = useRef(null);
  navigation = useNavigation();
  const insets = useSafeAreaInsetsKeyboardAware_native({
    includeKeyboardHeight: true
  }).insets;
  useSafeAreaAvoidingInputs_native({
    insets,
    inputs: [{
      ref: ref2,
      offset: {
        type: "toBottom"
      }
    }],
    scrollViewRef: ref3
  });
  useEffect(() => {
    ref.current = state;
  }, [state]);
  useEffect(() => {
    navigation.setOptions({
      headerRight: (a0) => getRenderHeaderTextButton(intl.string(t["R3BPH+"]), () => {
        UploadAttachmentActionCreators.update(channelId, id, DraftType.ChannelMessage, {
          ...stateFromStores,
          description: ref.current
        });
        AddImageDescriptionModalActionCreators.close();
      })({
        ...a0
      })
    });
  }, [channelId, id, stateFromStores, navigation]);
  return <ScrollView ref={ref3} style={styles.contentContainer} contentContainerStyle={{
    padding: Module712.space.PX_16,
    paddingBottom: insets.bottom + Module712.space.PX_16
  }}>
    <View style={styles.imageContainer}>
      <Image2 style={[styles.image, {
        aspectRatio,
        maxHeight: windowDimensions_native.height / 2
      }]} source={source2} />
    </View>
    <TextArea ref={ref2} containerStyle={{
      paddingTop: Module712.space.PX_16
    }} label={intl.string(t.eOB2eR)} placeholder={intl.string(t.RNH1jn)} value={state} onChange={onChange} placeholderTextColor={styles.placeholderText.color} maxLength={1000} autoFocus />
  </ScrollView>;
};
useStyles = createStyles({
  contentContainer: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  imageContainer: {
    alignItems: "center",
    borderRadius: Module712.radii.sm
  },
  image: {
    width: "100%",
    resizeMode: "contain",
    height: void 0,
    borderRadius: Module712.radii.sm
  },
  placeholderText: {
    color: Module712.colors.TEXT_MUTED
  }
});
export default function AddImageDescriptionModal(props) {
  const { source, channelId: channelId2, id: id2 } = props;
  return <ModalStackNavigator screenKey="addImageDescriptionModal" title={intl.string(t["5S2AK+"])} render={() => <AddDescription source={source} channelId={channelId2} id={id2} />} />;
};