// Metro module 12827 (f12828).
import { useState, useEffect } from "react";
import { Image as Image2, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { intl, t } from "../../../../intl/index.native";
import Module12828 from "../../../../_bundle/Module12828";
import Module12829 from "../../../../_bundle/Module12829";
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
import Module12830 from "../../../../_bundle/Module12830";
import Module12831 from "../../../../_bundle/Module12831";
import Module12832 from "../../../../_bundle/Module12832";
import Module12833 from "../../../../_bundle/Module12833";
import { Card } from "../../../../design/components/Card/native/Card.native";
import { TextIcon } from "../../../../design/components/Icon/native/redesign/generated/TextIcon";
import { Text } from "../../../../design/components/Text/native/Text";
import { HermesBuiltin } from "../../../../_hermes/prelude";
const useStyles = createStyles({
  container: {
    width: "100%",
    maxWidth: 275,
    position: "relative",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 24,
    marginBottom: 24
  },
  card: {
    padding: 0,
    width: "100%"
  },
  cardBackground: {
    width: "90%",
    height: 12,
    borderTopLeftRadius: Module712.radii.lg,
    borderTopRightRadius: Module712.radii.lg,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  header: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    borderBottomColor: Module712.colors.BORDER_SUBTLE,
    borderBottomWidth: 1
  },
  content: {
    height: 150,
    paddingVertical: 8,
    paddingHorizontal: 16,
    display: "flex",
    justifyContent: "flex-end",
    overflow: "hidden"
  },
  message: {
    display: "flex",
    paddingVertical: 8,
    flexDirection: "row"
  },
  messageAvatar: {
    width: 40,
    height: 40,
    marginRight: 12
  },
  messageContent: {
    display: "flex",
    flex: 1
  },
  starMedium: {
    height: 25,
    width: 15
  },
  starSmall: {
    height: 15,
    width: 10
  },
  starGreen: {
    position: "absolute",
    top: 5,
    left: -28
  },
  starBlue: {
    position: "absolute",
    top: -15,
    left: -10
  },
  starPink: {
    position: "absolute",
    bottom: -18,
    right: -22
  },
  starPurple: {
    position: "absolute",
    bottom: -30,
    right: -2
  }
});
const __initData = {
  code: "function NUFChannelIllustrationTsx1(){const{interpolate,messageListAnimation}=this.__closure;return{transform:[{translateY:interpolate(messageListAnimation.get(),[0,1],[50,0])}]};}"
};
export default function NUFChannelIllustration() {
  const styles = useStyles();
  const [state, setState] = useState([]);
  const sharedValue = useSharedValue(0);
  const sharedValue2 = useSharedValue(0);
  useEffect(() => {
    let c27373_1;
    let c27373_0 = setTimeout(() => setState((prevState) => {
      const r2 = [,];
      const r0 = HermesBuiltin.arraySpread(r2, prevState, 0);
      const message = intl.string(t["5alrl0"]);
      r2[r0] = {
        name: intl.string(t["9m/HsX"]),
        avatar: Module12828,
        message
      };
      return r2;
    }), 500);
    c27373_1 = setTimeout(() => setState((prevState) => {
      const r2 = [,];
      const r0 = HermesBuiltin.arraySpread(r2, prevState, 0);
      const message = intl.string(t["5Oo+vS"]);
      r2[r0] = {
        name: intl.string(t["AW1kM+"]),
        avatar: Module12829,
        message
      };
      return r2;
    }), 2000);
    return () => {
      clearTimeout(c27373_0);
      clearTimeout(c27373_1);
    };
  }, []);
  useEffect(() => {
    if (state.length >= 2) {
      sharedValue2.set(withTiming(1, {
        duration: 250
      }));
    }
  }, [sharedValue2, state]);
  useEffect(() => {
    sharedValue.set(0);
    sharedValue.set(withTiming(1, {
      duration: 200
    }));
  }, [sharedValue, state]);
  const b = function b() {
    return {
      transform: [{
        translateY: _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [50, 0])
      }]
    };
  };
  b.__closure = {
    interpolate: _ReanimatedRexport.interpolate,
    messageListAnimation: sharedValue
  };
  b.__workletHash = 1240710065054;
  b.__initData = __initData;
  const animatedStyle = useAnimatedStyle(b);
  return <View style={styles.container}>
    <Image2 source={Module12830} style={[styles.starSmall, styles.starBlue]} />
    <Image2 source={Module12831} style={[styles.starMedium, styles.starPink]} />
    <Image2 source={Module12832} style={[styles.starMedium, styles.starGreen]} />
    <Image2 source={Module12833} style={[styles.starSmall, styles.starPurple]} />
    <View style={styles.cardBackground} />
    <Card style={styles.card} shadow="low" border="subtle">
      <View style={styles.header}>
        <TextIcon size="sm" />
        <Text variant="text-md/bold" allowFontScaling={false}>
          {" "}
          {intl.string(t.aLOLry)}
        </Text>
      </View>
      <View style={styles.content}>
        <ReanimatedRexport.View style={animatedStyle}>
          {state.map((item) => <View key={item.message} style={styles.message}>
            <Image2 source={item.avatar} style={styles.messageAvatar} />
            <View style={styles.messageContent}>
              <Text variant="text-md/semibold" allowFontScaling={false}>{item.name}</Text>
              <Text variant="text-md/medium" allowFontScaling={false}>{item.message}</Text>
            </View>
          </View>)}
        </ReanimatedRexport.View>
      </View>
    </Card>
  </View>;
};