// Metro module 10321 (f10322).
import { useEffect } from "react";
import { View } from "react-native";
import UserStore from "../../../../stores/UserStore";
import { UserNotificationSettings } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useStateFromStores } from "../../../../_bundle/Module589";
import UserUtils from "../../../../utils/UserUtils";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
import * as _timingPresets from "../../../../design/animation/reanimated/timing/timingPresets";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { Avatar, AvatarSizes } from "../../../../design/void/native";
import Module10322 from "../../../../_bundle/Module10322";
const useStyles = createStyles({
  card: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    overflow: "hidden",
    borderRadius: 10,
    padding: 16
  },
  cardContent: {
    display: "flex",
    flexDirection: "row"
  },
  cardMessage: {
    marginLeft: 12,
    maxWidth: 240
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  }
});
const __initData = {
  code: "function NotificationSettingsMockMessageTsx1(){const{withTiming,opacity,timingStandard}=this.__closure;return{opacity:withTiming(opacity.get(),timingStandard)};}"
};
export default function NotificationSettingsMockMessage(props) {
  const styles = useStyles();
  let r20 = UserUtils.getName(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
  if (r20 == null) {
    r20 = "Roka";
  }
  const r33 = props.notificationSetting === UserNotificationSettings.NO_MESSAGES;
  let c17870_0 = r33;
  const sharedValue = useSharedValue(r33 ? 0.8 : 0);
  const h = () => ({
    opacity: _timing.withTiming(sharedValue.get(), _timingPresets.timingStandard)
  });
  h.__closure = {
    withTiming: _timing.withTiming,
    opacity: sharedValue,
    timingStandard: _timingPresets.timingStandard
  };
  h.__workletHash = 6531430956793;
  h.__initData = __initData;
  const animatedStyle = useAnimatedStyle(h);
  const r73 = props.notificationSetting === UserNotificationSettings.ALL_MESSAGES ? <Text variant="text-sm/medium" color="text-default">
    {intl.string(t.WYyzI5)}
  </Text> : <View>
    <Text variant="text-sm/medium" color="text-default">
      <Text variant="text-sm/normal" color="text-link">
        @
        {r20}
        {" "}
      </Text>
      {intl.string(t.WYyzI5)}
    </Text>
  </View>;
  useEffect(() => {
    sharedValue.set(c17870_0 ? 0.8 : 0);
  }, [sharedValue, r33]);
  return <View style={styles.card}>
    <View style={styles.cardContent}>
      <View>
        <Avatar source={Module10322} size={AvatarSizes.LARGE_48} />
      </View>
      <View style={styles.cardMessage}>
        <Text variant="text-sm/semibold">
          {intl.string(t.qSq0tD)}
        </Text>
        {r73}
      </View>
    </View>
    <ReanimatedRexport.View style={[animatedStyle, styles.overlay]} />
  </View>;
};