// Metro module 10387 (f10388).
import { View } from "react-native";
import { PAN_INPUT_RANGE, extrapolateConfig } from "./InAppNotificationConstants";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useInAppNotificationContext } from "./InAppNotificationContext";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import useMountEffect from "../../../_bundle/useMountEffect";
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
import Emoji from "../../emojis/native/Emoji";
import AvatarUtils from "../../../utils/AvatarUtils";
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    alignItems: "center",
    justifyContent: "center",
    marginTop: Module712.space.PX_12
  },
  notificationRow: {
    ...Module712.shadows.SHADOW_HIGH,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: Module712.space.PX_8,
    backgroundColor: Module712.colors.MOBILE_ALERT_BACKGROUND_DEFAULT,
    paddingStart: Module712.space.PX_8,
    paddingEnd: Module712.space.PX_12,
    paddingVertical: Module712.space.PX_8,
    borderRadius: Module712.radii.round,
    overflow: "hidden"
  },
  textEmoji: {
    fontSize: 20
  },
  imageEmoji: {
    width: 20,
    height: 20
  }
});
const __initData = {
  code: "function ConfirmationToastTsx1(){const{animatedValue,interpolate,notificationGestureY,PAN_INPUT_RANGE,extrapolateConfig}=this.__closure;const value=animatedValue.get();const scale=interpolate(value,[0,1],[0.8,1]);const enterTranslateY=interpolate(value,[0,1],[-20,0]);const gestureY=notificationGestureY.get();const dismissOpacity=interpolate(gestureY,PAN_INPUT_RANGE,[0,1,0],extrapolateConfig);return{transform:[{translateY:enterTranslateY+gestureY},{scale:scale}],opacity:value*dismissOpacity};}"
};
export function ConfirmationToast(props) {
  const { message, reaction } = props;
  const styles = useStyles();
  const notificationGestureY = useInAppNotificationContext().notificationGestureY;
  const sharedValue = useSharedValue(0);
  useMountEffect(() => {
    sharedValue.set(withTiming(1, {
      duration: 200
    }));
  });
  const A = function A() {
    const r16 = sharedValue.get();
    const scale = _ReanimatedRexport.interpolate(r16, [0, 1], [0.8, 1]);
    const r24 = _ReanimatedRexport.interpolate(r16, [0, 1], [-20, 0]);
    const r27 = notificationGestureY.get();
    return {
      transform: [{
        translateY: r24 + r27
      }, {
        scale
      }],
      opacity: r16 * _ReanimatedRexport.interpolate(r27, PAN_INPUT_RANGE, [0, 1, 0], extrapolateConfig)
    };
  };
  A.__closure = {
    animatedValue: sharedValue,
    interpolate: _ReanimatedRexport.interpolate,
    notificationGestureY,
    PAN_INPUT_RANGE,
    extrapolateConfig
  };
  A.__workletHash = 4654280152495;
  A.__initData = __initData;
  return <ReanimatedRexport.View style={[styles.container, useAnimatedStyle(A)]}>
    <View style={styles.notificationRow}>
      {reaction != null ? <Emoji textEmojiStyle={styles.textEmoji} fastImageStyle={styles.imageEmoji} name={reaction.id == null ? reaction.surrogates : ""} src={reaction.id != null ? AvatarUtils.getEmojiURL({
        id: reaction.id,
        animated: reaction.animated,
        size: EMOJI_URL_BASE_SIZE
      }) : reaction.url} /> : <CircleCheckIcon size="md" color={Module712.colors.STATUS_POSITIVE} />}
      <Text variant="text-sm/semibold" color="text-default">{message}</Text>
    </View>
  </ReanimatedRexport.View>;
}