// Metro module 15383 (f15384).
import { useMemo } from "react";
import { View } from "react-native";
import { createICYMIStyles } from "./createICYMIStyles";
import Module712 from "../../../_bundle/Module712";
import useChatPlaceholderAnimatedStyles from "../../chat/native/placeholder/useChatPlaceholderAnimatedStyles";
import ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import { Separator } from "./ICYMIShared";
let styles;
const ICYMILoadingItem = function ICYMILoadingItem() {
  const r18 = styles();
  const styles2 = useChatPlaceholderAnimatedStyles({
    visible: true,
    animated: true
  });
  const memo = useMemo(() => ({
    avatarTitle: Math.floor(10 * Math.random()),
    title: Math.floor(10 * Math.random()),
    subtitle: Math.floor(10 * Math.random())
  }), []);
  const { avatarTitle, title, subtitle } = memo;
  const r42 = [<ReanimatedRexport.View style={[r18.backgroundColor, r18.avatar, styles2]} />, ,];
  const style = [r18.backgroundColor, r18.avatarTitle, styles2, ,];
  const r0 = 100 * Math.sin(avatarTitle);
  style[3] = {
    width: `${(r0 - Math.floor(r0)) * 30 + 30}%`
  };
  r42[1] = <ReanimatedRexport.View style={style} />;
  const r64 = [<View style={r18.avatarRow}>{r42}</View>, , , ,];
  const style2 = [r18.backgroundColor, r18.title, styles2, ,];
  const r74 = 100 * Math.sin(title);
  style2[3] = {
    width: `${(r74 - Math.floor(r74)) * 25 + 75}%`
  };
  r64[1] = <ReanimatedRexport.View style={style2} />;
  const style3 = [r18.backgroundColor, r18.subtitle, styles2, ,];
  const r97 = 100 * Math.sin(subtitle);
  style3[3] = {
    width: `${(r97 - Math.floor(r97)) * 25 + 75}%`
  };
  r64[2] = <ReanimatedRexport.View style={style3} />;
  r64[3] = <ReanimatedRexport.View style={[r18.backgroundColor, r18.image, styles2]} />;
  return <>
    <View style={r18.container}>{r64}</View>
    <Separator />
  </>;
};
styles = createICYMIStyles((a0) => ({
  backgroundColor: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  container: {
    padding: a0.margin
  },
  avatarRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: a0.margin
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: Module712.radii.md,
    marginRight: Module712.space.PX_12
  },
  avatarTitle: {
    height: 18,
    borderRadius: 10,
    flexShrink: 1
  },
  title: {
    height: Module712.space.PX_16,
    marginBottom: Module712.space.PX_12,
    borderRadius: 10,
    flexShrink: 1
  },
  subtitle: {
    height: Module712.space.PX_16,
    marginBottom: a0.margin,
    borderRadius: 10,
    flexShrink: 1
  },
  image: {
    width: "100%",
    height: 240,
    borderRadius: Module712.radii.lg
  },
  separator: {}
}));
export function ICYMILoading() {
  return <>
    <ICYMILoadingItem />
    <ICYMILoadingItem />
  </>;
}