// Metro module 13042 (f13043).
import { useMemo } from "react";
import { Image as Image2, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { ActivityIndicator } from "../../../design/components/ActivityIndicator/native/ActivityIndicator.native";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    flexDirection: "row",
    height: 80,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    borderColor: Module712.colors.BORDER_STRONG,
    borderWidth: 1,
    borderRadius: Module712.radii.sm,
    overflow: "hidden"
  },
  containerRevamp: {
    borderWidth: 0
  },
  thumbnail: {
    width: 80
  },
  contentContainer: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    paddingLeft: 12,
    paddingRight: 24
  },
  authorView: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 3
  },
  authorThumbnail: {
    height: 16,
    width: 16,
    borderRadius: Module712.radii.sm,
    marginRight: 4
  },
  loadingSpinner: {
    flex: 1
  }
});
export default function ShareEmbed(props) {
  let r36;
  let embed, isLoadingEmbed, styles, memo;
  L9: {
    embed = props.embed;
    isLoadingEmbed = props.isLoadingEmbed;
    const isRevamp = props.isRevamp;
    styles = void 0;
    memo = void 0;
    styles = useStyles();
    const memo5 = useMemo(() => {
      if (embed != null) {
        let uri = embed.thumbnail?.url;
        if (uri == null) {
          uri = embed.image?.url;
        }
        if (uri != null) {
          return {
            uri
          };
        }
      }
    }, [embed]);
    let r24 = useMemo(() => isLoadingEmbed ? <ActivityIndicator style={styles.loadingSpinner} /> : null, [isLoadingEmbed, styles]);
    const memo4 = useMemo(() => {
      const author = embed?.author;
      if (author == null) {
        return null;
      }
      let proxy_icon_url = author.proxy_icon_url;
      if (proxy_icon_url == null) {
        proxy_icon_url = author.icon_url;
      }
      return <View style={styles.authorView}>
        {proxy_icon_url != null && <Image2 style={styles.authorThumbnail} source={{
          uri: proxy_icon_url
        }} resizeMode="cover" />}
        <Text variant="text-xs/semibold" color="mobile-text-heading-primary" ellipsizeMode="tail" lineClamp={1}>{author.name}</Text>
      </View>;
    }, [embed, styles]);
    memo = useMemo(() => {
      const title = embed?.title;
      return title != null ? <Text style={{
        marginVertical: 1
      }} variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} ellipsizeMode="tail">{title}</Text> : null;
    }, [embed]);
    const memo3 = useMemo(() => {
      const description = embed?.description;
      return memo == null ? description != null ? <Text style={{
        marginVertical: 1
      }} variant="text-xs/medium" color="text-default" lineClamp={1} ellipsizeMode="tail">{description}</Text> : null : null;
    }, [embed, memo]);
    const memo2 = useMemo(() => {
      const url = embed?.url;
      return url != null ? <Text style={{
        marginVertical: 1
      }} variant="text-xs/medium" color="text-link" lineClamp={1} ellipsizeMode="tail">{url}</Text> : null;
    }, [embed]);
    if (embed == null) {
      r36 = null;
      if (!isLoadingEmbed) {
        break L9;
      }
    }
    const style = [styles.container, isRevamp ? styles.containerRevamp : void 0];
    if (!isLoadingEmbed) {
      r24 = <>
        {memo5 != null && <Image2 style={styles.thumbnail} source={memo5} resizeMode="cover" />}
        <View style={styles.contentContainer}>
          {memo4}
          {memo}
          {memo3}
          {memo2}
        </View>
      </>;
    }
    r36 = <View style={style}>{r24}</View>;
  }
  return r36;
};