// Metro module 8811 (f8812).
import { useCallback, memo } from "react";
import { View } from "react-native";
import { CUSTOM_GIFT_MESSAGE_MAX_LENGTH } from "../../PremiumConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { intl, t } from "../../../../intl/index.native";
import { TextArea } from "../../../../design/components/TextInput/native/TextArea.native";
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
let useStyles;
const GiftCustomMessage = function GiftCustomMessage(props) {
  const { onFocusMessage, setMessagePosition, customGiftMessage, setCustomGiftMessage } = props;
  const styles = useStyles();
  const placeholder = intl.string(t.ZkOo1U);
  const callback = useCallback((a0) => {
    setCustomGiftMessage(a0);
  }, [setCustomGiftMessage]);
  return <View style={styles.container} onLayout={(event) => setMessagePosition(event.nativeEvent.layout.y)}>
    <TextArea label={intl.string(t.B3miE8)} placeholder={placeholder} value={customGiftMessage} onChange={callback} maxLength={CUSTOM_GIFT_MESSAGE_MAX_LENGTH} onFocus={onFocusMessage} />
  </View>;
};
useStyles = createStyles({
  container: {
    marginTop: Module712.space.PX_24,
    marginHorizontal: Module712.space.PX_16
  }
});
const r41 = memo(function({ onFocusMessage, setMessagePosition: setMessagePosition2 }) {
  const nativeGiftContext = useNativeGiftContext();
  return <GiftCustomMessage onFocusMessage={onFocusMessage} setMessagePosition={setMessagePosition2} customGiftMessage={nativeGiftContext.customGiftMessage} setCustomGiftMessage={nativeGiftContext.setCustomGiftMessage} />;
});
export default r41;
export { GiftCustomMessage };