// Metro module 10388 (f10389).
import _slicedToArray from "../../../_bundle/_slicedToArray";
import { useEffect, useRef, useState, useMemo, useLayoutEffect, useCallback } from "react";
import { StyleSheet, Keyboard, View } from "react-native";
import ChannelStore from "../../../stores/ChannelStore";
import { EmojiIntention } from "../../emojis/EmojiConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useMobileVisualRefreshConfig } from "../../themes/experiments/MobileVisualRefreshExperiment";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
import { ChatInputReplyBar } from "../../chat_input/native/ChatInputContextBar";
import { useNullableMessageAuthor } from "../../messages/useMessageAuthor";
import useChannelName from "../../channel/useChannelName";
import { useInputStyles } from "../../../design/components/Input/native/InputFieldContainer.native";
import { trackInAppNotificationAccessoryClicked } from "./InAppNotificationUtils";
import { InAppNotificationAccessoryTypes } from "../InAppNotificationTypes";
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
import MessageParser from "../../messages/MessageParser";
import MessageActionCreators from "../../../actions/MessageActionCreators";
import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
import getEmojiText from "../../emojis/utils/getEmojiText";
import { IconButton } from "../../../design/components/Button/native/IconButton.native";
import { ArrowAngleLeftUpIcon } from "../../../design/components/Icon/native/redesign/generated/ArrowAngleLeftUpIcon";
import { intl, t } from "../../../intl/index.native";
import { NativeTextInput } from "../../../design/components/Input/native/NativeTextInput.native";
import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
import { SendMessageIcon } from "../../../design/components/Icon/native/redesign/generated/SendMessageIcon";
let useStyles, c6955_13;
let env6955 = {};
const AnimatedChatInputReplyBar = function AnimatedChatInputReplyBar(props) {
  const { replying, pendingReply, pendingReplyAuthor, onToggleReplyMention: onToggleReplyMention2 } = props;
  const chatInputFloating = useMobileVisualRefreshConfig({
    location: "MessageReplyInput"
  }).chatInputFloating;
  const styles = useStyles();
  const sharedValue = useSharedValue(0);
  useEffect(() => {
    const r12 = {
      duration: 150
    };
    if (replying) {
      sharedValue.set(withTiming(1, r12));
    } else {
      sharedValue.set(withTiming(0, r12));
    }
  }, [replying, sharedValue]);
  const y = () => ({
    height: _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [0, 40]),
    opacity: sharedValue.get()
  });
  y.__closure = {
    interpolate: _ReanimatedRexport.interpolate,
    sv: sharedValue,
    REPLY_BAR_HEIGHT: 40
  };
  y.__workletHash = 878601267127;
  y.__initData = c6955_13;
  return <ReanimatedRexport.View style={[styles.replyBarContainer, chatInputFloating ? styles.replyBarRedesign : styles.replyBarNoRedesign, useAnimatedStyle(y)]}>
    <ChatInputReplyBar pendingReply={pendingReply} pendingReplyAuthor={pendingReplyAuthor} onToggleReplyMention={onToggleReplyMention2} chatInputFloatingOverride />
  </ReanimatedRexport.View>;
};
useStyles = createStyles({
  inputContainer: {
    flexDirection: "column",
    gap: 0,
    backgroundColor: Module712.colors.MOBILE_ALERT_BACKGROUND_DEFAULT,
    padding: 0,
    marginHorizontal: Module712.space.PX_16,
    marginBottom: Module712.space.PX_4,
    borderRadius: Module712.radii.lg,
    overflow: "hidden"
  },
  iconsContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4
  },
  input: {
    flex: 1,
    borderRadius: Module712.radii.none,
    border: 0,
    color: Module712.colors.TEXT_DEFAULT
  },
  inputRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    paddingHorizontal: Module712.space.PX_12,
    paddingVertical: Module712.space.PX_12
  },
  placeholderText: {
    color: Module712.colors.INPUT_PLACEHOLDER_TEXT_DEFAULT
  },
  replyBarContainer: {
    justifyContent: "center",
    alignContent: "center",
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: Module712.colors.BORDER_MUTED,
    overflow: "hidden"
  },
  replyBarNoRedesign: {
    paddingLeft: Module712.space.PX_12,
    paddingRight: Module712.space.PX_8
  },
  replyBarRedesign: {
    paddingLeft: Module712.space.PX_4
  }
});
c6955_13 = {
  code: "function MessageReplyInputTsx1(){const{interpolate,sv,REPLY_BAR_HEIGHT}=this.__closure;return{height:interpolate(sv.get(),[0,1],[0,REPLY_BAR_HEIGHT]),opacity:sv.get()};}"
};
export function MessageReplyInput(props) {
  let c17919_0;
  let env17918 = {
    $parent: env6955
  };
  const notification = props.notification;
  env17918[0] = notification;
  const onMessageSent = props.onMessageSent;
  env17918[1] = onMessageSent;
  env17918[2] = void 0;
  env17918[3] = void 0;
  env17918[4] = void 0;
  env17918[5] = void 0;
  env17918[6] = void 0;
  env17918[7] = void 0;
  env17918[8] = void 0;
  env17918[9] = void 0;
  env17918[10] = void 0;
  env17918[11] = void 0;
  env17918[12] = void 0;
  env17918[13] = void 0;
  env17918[14] = void 0;
  const ref = useRef(null);
  env17918[2] = ref;
  const r31 = _slicedToArray(useState(""), 2);
  const value = r31[0];
  env17918[3] = value;
  const onChangeText = r31[1];
  env17918[4] = onChangeText;
  const r34 = _slicedToArray(useState(false), 2);
  const loading = r34[0];
  env17918[5] = loading;
  env17918[6] = r34[1];
  const r38 = _slicedToArray(useState(false), 2);
  const replying2 = r38[0];
  env17918[7] = replying2;
  env17918[8] = r38[1];
  const r43 = _slicedToArray(useState(true), 2);
  const r24 = r43[0];
  env17918[9] = r24;
  env17918[10] = r43[1];
  const styles = useStyles();
  const message = notification.message;
  env17918[11] = message;
  const channel = notification.channel;
  env17918[12] = channel;
  const nullableMessageAuthor = useNullableMessageAuthor(message);
  const channelName = useChannelName(channel, true);
  const styles2 = useInputStyles({});
  const memo = useMemo(() => {
    const channel = env17918[12];
    return {
      shouldMention: env17918[9],
      showMentionToggle: !channel.isPrivate(),
      channel,
      message: env17918[11]
    };
  }, [r24, channel, message]);
  env17918[13] = memo;
  useLayoutEffect(() => {
    const current = env17918[2].current;
    if (current != null) {
      current.focus();
    }
  }, []);
  c17919_0 = void 0;
  c17919_0 = async (c30217_0) => {
    let c30217_1;
    L18: {
      L17: {
        c30217_1 = void 0;
        if (env17918[5] === true) {
          break L18;
        }
        const id = c30217_0.channel.id;
        const r12 = env17918[3];
        if (r12.length === 0) {
          break L18;
        }
        if (id != null) {
          trackInAppNotificationAccessoryClicked(c30217_0, InAppNotificationAccessoryTypes.SEND_MESSAGE_BUTTON);
          (0, env17918[6])(true);
          triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
          await MessageActionCreators.sendMessage(id, MessageParser.parse(ChannelStore.getChannel(id), r12), false, {
            ...env17918[7] ? MessageActionCreators.getSendMessageOptionsForReply(env17918[13]) : {},
            location: "InAppNotification"
          });
          (0, env17918[1])();
          (0, env17918[6])(false);
          (0, env17918[4])("");
          break L17;
        }
        break L18;
      }
      return void 0;
    }
  };
  env17918[14] = useCallback(function() {
    return c17919_0.apply(this, arguments);
  }, [value, onMessageSent, memo, replying2, loading]);
  const r73 = [notification.channel, ,];
  const id = notification.guild?.id;
  const r77 = () => {
    Keyboard.dismiss();
    const r16 = {
      onPressEmoji: (a0) => {
        let c30218_0 = getEmojiText(a0);
        (0, env17918[4])((a0) => `${a0} ${c30218_0}`);
        const current = env17918[2].current;
        if (current != null) {
          current.focus();
        }
      },
      pickerIntention: EmojiIntention.CHAT,
      channel: null,
      guildId: null,
      startExpanded: false
    };
    const r17 = env17918[0];
    let channel = r17.channel;
    if (channel == null) {
      channel = void 0;
    }
    r16.channel = channel;
    let guildId = r17.guild?.id;
    if (guildId == null) {
      guildId = void 0;
    }
    r16.guildId = guildId;
    openEmojiPickerActionSheet(r16);
  };
  r73[1] = id;
  const callback = useCallback(r77, r73);
  return <View style={styles.inputContainer}>
    <AnimatedChatInputReplyBar replying={replying2} pendingReply={memo} pendingReplyAuthor={nullableMessageAuthor} onToggleReplyMention={() => (0, env17918[10])(!env17918[9])} />
    <View style={styles.inputRow}>
      <IconButton variant={replying2 ? "secondary" : "icon-only"} size="sm" icon={<ArrowAngleLeftUpIcon size="sm" color={Module712.colors.CHAT_INPUT_ICON_DEFAULT_TINT} />} onPress={() => {
        trackInAppNotificationAccessoryClicked(env17918[0], InAppNotificationAccessoryTypes.REPLY_TOGGLE);
        (0, env17918[8])(!env17918[7]);
      }} accessibilityLabel={intl.string(t["5IEsGx"])} />
      <NativeTextInput ref={ref} style={[styles.input, styles2.text]} placeholderTextColor={styles.placeholderText.color} placeholder={intl.formatToPlainString(t["8lzR/R"], {
        channel: channelName
      })} autoFocus value={value} onChangeText={onChangeText} />
      <View style={styles.iconsContainer}>
        <IconButton variant="icon-only" size="sm" icon={<ReactionIcon size="sm" color={Module712.colors.CHAT_INPUT_ICON_DEFAULT_TINT} />} onPress={callback} accessibilityLabel={intl.string(t.sMOuuS)} />
        <IconButton variant="primary" size="sm" accessibilityLabel={intl.string(t.TXNS7S)} icon={<SendMessageIcon size="sm" color={Module712.colors.WHITE} />} onPress={() => (0, env17918[14])(env17918[0])} loading={loading} />
      </View>
    </View>
  </View>;
}