// Metro module 9925 (f9926).
import { useState, useCallback } from "react";
import { View } from "react-native";
import { Fonts } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { isAndroid } from "../../../utils/PlatformUtils";
import useMessageMaxLength from "../../messages/useMessageMaxLength";
import FormInput from "../../../design/void/Form/native/FormInput";
import { intl, t } from "../../../intl/index.native";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
const useStyles = createStyles({
  container: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: Module712.colors.SHARE_CHAT_INPUT_BACKGROUND,
    borderRadius: Module712.modules.mobile.CHAT_INPUT_BORDER_RADIUS,
    borderWidth: Module712.modules.mobile.CHAT_INPUT_PILL_BORDER_WIDTH,
    borderColor: Module712.colors.MOBILE_CHATINPUT_BORDER_DEFAULT,
    paddingHorizontal: Module712.space.PX_12
  },
  chatInput: {
    flex: 1,
    paddingVertical: 0,
    paddingHorizontal: Module712.space.PX_4,
    maxHeight: 80
  },
  chatText: {
    fontSize: 16,
    lineHeight: 20,
    fontFamily: Fonts.PRIMARY_NORMAL,
    color: Module712.colors.TEXT_STRONG,
    paddingTop: Module712.space.PX_8 + (isAndroid() ? 0 : 2),
    paddingBottom: Module712.space.PX_8
  },
  inputPlaceholder: {
    color: Module712.colors.TEXT_MUTED
  },
  emojiButton: {
    paddingTop: Module712.space.PX_8,
    paddingBottom: Module712.space.PX_8,
    alignSelf: "flex-end"
  },
  focused: {
    borderColor: Module712.colors.MOBILE_CHATINPUT_BORDER_ACTIVE
  }
});
export default function ShareChatInput(props) {
  const { text, inputRef, onChange, onSelectionChange, onFocus, onBlur, onPressEmoji, onSend, disabled = false } = props;
  const styles = useStyles();
  const messageMaxLength = useMessageMaxLength();
  let [state, setState] = useState(false);
  const callback = useCallback(() => {
    setState(true);
    onFocus();
  }, [onFocus]);
  const callback2 = useCallback(() => {
    setState(false);
    onBlur();
  }, [onBlur]);
  const style = [styles.container, ,];
  if (state) {
    state = styles.focused;
  }
  style[1] = state;
  return <View style={style}>
    <FormInput ref={inputRef} maxLength={messageMaxLength} placeholder={intl.string(t.ZroO3G)} placeholderTextColor={styles.inputPlaceholder.color} accessibilityLabel={intl.string(t["/+MXmw"])} onSubmitEditing={onSend} onSelectionChange={onSelectionChange} style={styles.chatInput} value={text} onChange={onChange} onFocus={callback} onBlur={callback2} multiline showBorder={false} showTopContainer={false} textAlignVertical="center" inputTextStyle={styles.chatText} editable={!disabled} />
    <PressableOpacity accessibilityLabel={intl.string(t.iZ7Mz9)} accessibilityRole="button" onPress={onPressEmoji} style={styles.emojiButton} disabled={disabled}>
      <ReactionIcon size="md" />
    </PressableOpacity>
  </View>;
};