// Metro module 11734 (f11735).
import { memo } from "react";
import { View } from "react-native";
import { AVATAR_SIZE_MAP, AvatarSizes } from "../../../../design/void/native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { CHAT_PLACEHOLDER_ROW_MARGIN_TOP, CHAT_PLACEHOLDER_ROW_LINE_HEIGHT, CHAT_PLACEHOLDER_ROW_LINE_MARGIN_TOP } from "./getChatPlaceholderRowHeight";
import getChatPlaceholderRowWidth from "./getChatPlaceholderRowWidth";
const height = AVATAR_SIZE_MAP[AvatarSizes.NORMAL];
const useStyles = createStyles({
  row: {
    paddingLeft: Module712.space.PX_12,
    paddingTop: CHAT_PLACEHOLDER_ROW_MARGIN_TOP,
    flexDirection: "row"
  },
  rowInner: {
    marginHorizontal: Module712.space.PX_12,
    flex: 1
  },
  placeholderAvatar: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
    height,
    width: height,
    borderRadius: Module712.radii.round
  },
  placeholderText: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
    height: CHAT_PLACEHOLDER_ROW_LINE_HEIGHT,
    borderRadius: Module712.radii.sm
  },
  placeholderBody: {
    marginTop: CHAT_PLACEHOLDER_ROW_LINE_MARGIN_TOP,
    width: "100%"
  }
});
const r75 = memo(function ChatPlaceholderRow(props) {
  const lines = props.lines;
  const styles = useStyles();
  const r25 = Math.floor(10 * Math.random());
  const r18 = Math.floor(50 * Math.random()) + 10;
  const r33 = [];
  let key = 0;
  while (key < lines) {
    r33.push(<View key={key} style={[styles.placeholderText, styles.placeholderBody, {
      width: `${getChatPlaceholderRowWidth(r25 + key)}%`
    }]} />);
    key = key + 1;
  }
  return <View style={styles.row}>
    <View style={styles.placeholderAvatar} />
    <View style={styles.rowInner}>
      <View style={[styles.placeholderText, {
        width: `${r18}%`
      }]} />
      {r33}
    </View>
  </View>;
});
export default r75;