// Metro module 8650 (f8651).
import { memo, useCallback } from "react";
import { ActivityIndicator, Image as Image2, Pressable, ScrollView, View } from "react-native";
import { getParser } from "../../../markup/CustomMarkup.native";
import { intl, t } from "../../../../intl/index.native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { getPosterUrl, getPollExpiryLabel } from "../../AnnouncementMessageUtils";
import { Text } from "../../../../design/components/Text/native/Text";
import { ImageWithPlaceholder } from "../../../../components_native/common/ImageWithPlaceholder";
import { dateFormat } from "../../../../utils/DateUtils";
import { ReactionIcon } from "../../../../design/components/Icon/native/redesign/generated/ReactionIcon";
import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
import useGameAnnouncements from "../../hooks/useGameAnnouncements";
import { GameProfileTrackActionActions } from "../../GameProfileAnalyticUtils";
import GameProfileActionCreators_native from "../../GameProfileActionCreators.native";
import navigateToGameAnnouncement from "../../navigateToGameAnnouncement";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { ChevronSmallRightIcon } from "../../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
let c5627_12, parser, c5627_14, useStyles, MessageAnnouncementCard, PollAnnouncementCard, Component;
const EmbedAnnouncementCard = function EmbedAnnouncementCard(props) {
  const { message, onPress: onPress2, guildId: guildId2, channelId: channelId2 } = props;
  const styles2 = useStyles();
  if (parser == null) {
    parser = getParser();
  }
  const r23 = parser;
  let r43 = message.media?.proxyUrl;
  if (r43 == null) {
    r43 = message.media?.url;
  }
  let uri = r43 != null ? getPosterUrl(r43, 160, c5627_12) : null;
  if (uri == null) {
    uri = r43;
  }
  const embedSource = message.embedSource;
  if (embedSource == null) {
    return null;
  }
  const r14 = embedSource.color != null ? {
    borderLeftColor: embedSource.color
  } : void 0;
  const props2 = {
    style: styles2.card,
    onPress: () => onPress2(message.id),
    accessibilityRole: "button",
    accessibilityLabel: message.title,
    children: null
  };
  const r70 = [embedSource.url != null && <Text variant="text-xs/medium" color="text-link" lineClamp={1}>{embedSource.url}</Text>, ,];
  const r90 = [embedSource.authorName != null && <View style={styles2.embedAuthorRow}>
    {embedSource.authorIconUrl != null && <Image2 source={{
      uri: embedSource.authorIconUrl
    }} style={styles2.embedAuthorIcon} />}
    <Text variant="text-xs/semibold" color="text-strong" lineClamp={1}>{embedSource.authorName}</Text>
  </View>, message.media != null && uri != null && <View style={styles2.embedMedia}>
    <ImageWithPlaceholder uri={uri} placeholder={message.media.placeholder} placeholderVersion={message.media.placeholderVersion} style={styles2.mediaImage} />
  </View>, message.title != null && <Text variant="text-md/semibold" color="mobile-text-heading-primary" lineClamp={2}>
    {r23(message.title, true, {
      guildId: guildId2,
      channelId: channelId2
    })}
  </Text>, message.body.length > 0 && <Text variant="text-sm/medium" color="text-default" lineClamp={3}>
    {r23(message.body, true, {
      guildId: guildId2,
      channelId: channelId2
    })}
  </Text>, ,];
  const r142 = [embedSource.providerIconUrl != null && <Image2 source={{
    uri: embedSource.providerIconUrl
  }} style={styles2.embedProviderIcon} />, <Text variant="text-xs/medium" color="text-muted">
    {embedSource.providerName != null ? `${embedSource.providerName} · ` : ""}
    {dateFormat(new Date(message.timestamp), "LL")}
  </Text>, ,];
  let r169 = message.reactionCount > 0;
  if (r169) {
    const r182 = [<ReactionIcon size="xs" color={Module712.colors.TEXT_MUTED} />, ,];
    const reactionCount = message.reactionCount;
    if (!(c5627_14 != null && c5627_14.locale === intl.currentLocale)) {
      c5627_14 = {
        locale: intl.currentLocale,
        format: new Intl.NumberFormat(intl.currentLocale)
      };
    }
    r182[1] = <Text variant="text-xs/medium" color="text-muted">
      {c5627_14.format.format(reactionCount)}
    </Text>;
    r169 = <View style={styles2.reactionInfo}>{r182}</View>;
  }
  r142[2] = r169;
  r90[4] = <View style={styles2.metadataRow}>{r142}</View>;
  r70[1] = <View style={[styles2.embedContentArea, r14]}>{r90}</View>;
  props2.children = <View style={styles2.cardBody}>{r70}</View>;
  return <Pressable {...props2} />;
};
MessageAnnouncementCard = function MessageAnnouncementCard(props) {
  const { message: message2, onPress: onPress3, guildId: guildId2, channelId: channelId2 } = props;
  const styles2 = useStyles();
  if (parser == null) {
    parser = getParser();
  }
  const r20 = parser;
  let r39 = message2.media?.proxyUrl;
  if (r39 == null) {
    r39 = message2.media?.url;
  }
  let uri = r39 != null ? getPosterUrl(r39, 160, c5627_12) : null;
  if (uri == null) {
    uri = r39;
  }
  const props2 = {
    style: styles2.card,
    onPress: () => onPress3(message2.id),
    accessibilityRole: "button",
    accessibilityLabel: message2.title,
    children: null
  };
  const children = [message2.media != null && uri != null && <View style={styles2.smallCardMedia}>
    <ImageWithPlaceholder uri={uri} placeholder={message2.media.placeholder} placeholderVersion={message2.media.placeholderVersion} style={styles2.mediaImage} />
  </View>, ,];
  const r83 = [message2.title != null && <Text variant="text-md/semibold" color="mobile-text-heading-primary" lineClamp={2}>
    {r20(message2.title, true, {
      guildId: guildId2,
      channelId: channelId2
    })}
  </Text>, message2.body.length > 0 && <Text variant="text-sm/medium" color="text-default" lineClamp={3}>
    {r20(message2.body, true, {
      guildId: guildId2,
      channelId: channelId2
    })}
  </Text>, ,];
  const r115 = [<Text variant="text-xs/medium" color="text-muted">
    {dateFormat(new Date(message2.timestamp), "LL")}
  </Text>, ,];
  let r117 = message2.reactionCount > 0;
  if (r117) {
    const r130 = [<ReactionIcon size="xs" color={Module712.colors.TEXT_MUTED} />, ,];
    const reactionCount = message2.reactionCount;
    if (!(c5627_14 != null && c5627_14.locale === intl.currentLocale)) {
      c5627_14 = {
        locale: intl.currentLocale,
        format: new Intl.NumberFormat(intl.currentLocale)
      };
    }
    r130[1] = <Text variant="text-xs/medium" color="text-muted">
      {c5627_14.format.format(reactionCount)}
    </Text>;
    r117 = <View style={styles2.reactionInfo}>{r130}</View>;
  }
  r115[1] = r117;
  r83[2] = <View style={styles2.metadataRow}>{r115}</View>;
  children[1] = <View style={styles2.cardBody}>{r83}</View>;
  props2.children = children;
  return <Pressable {...props2} />;
};
PollAnnouncementCard = function PollAnnouncementCard(props) {
  const { message: message3, onPress: onPress4 } = props;
  const styles = useStyles();
  const poll = message3.poll;
  if (poll == null) {
    return null;
  }
  const r15 = poll.answers.slice(0, 3);
  const count = poll.answers.length - r15.length;
  return <Pressable style={styles.card} onPress={() => onPress4(message3.id)} accessibilityRole="button" accessibilityLabel={poll.question.text}>
    <View style={styles.cardBody}>
      <Text variant="text-md/semibold" color="mobile-text-heading-primary">{poll.question.text}</Text>
      <View style={styles.pollAnswers}>
        {r15.map((item) => {
          let text = item.poll_media.text;
          if (text == null) {
            text = "";
          }
          return <View key={item.answer_id} style={styles.pollAnswerOption}>
            <Text variant="text-sm/medium" color="text-default" lineClamp={1}>{text}</Text>
          </View>;
        })}
        {count > 0 && <Text variant="text-xs/medium" color="text-muted" style={styles.pollMoreOptions}>
          {intl.format(t["mv/nIa"], {
            count
          })}
        </Text>}
      </View>
      <View style={styles.metadataRow}>
        <Text variant="text-xs/medium" color="text-muted">
          {intl.format(t.t0FTsH, {
            createdAt: new Date(message3.timestamp),
            expiryLabel: getPollExpiryLabel(poll)
          })}
        </Text>
      </View>
    </View>
  </Pressable>;
};
c5627_12 = 120;
parser = null;
c5627_14 = null;
useStyles = createStyles({
  container: {
    gap: Module712.space.PX_8
  },
  smallCardsScroller: {
    marginHorizontal: -Module712.space.PX_16,
    overflow: "visible"
  },
  smallCardsContainer: {
    flexDirection: "row",
    gap: Module712.space.PX_12,
    paddingHorizontal: Module712.space.PX_16
  },
  sectionHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: Module712.space.PX_8
  },
  loadingContainer: {
    height: 120,
    alignItems: "center",
    justifyContent: "center"
  },
  card: {
    flexDirection: "column",
    borderRadius: Module712.radii.lg,
    overflow: "hidden",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    borderWidth: 1,
    borderColor: Module712.colors.BORDER_SUBTLE,
    width: 160
  },
  cardBody: {
    flex: 1,
    flexDirection: "column",
    gap: Module712.space.PX_4,
    overflow: "hidden",
    padding: Module712.space.PX_12
  },
  smallCardMedia: {
    height: 120,
    overflow: "hidden",
    flexShrink: 0
  },
  mediaImage: {
    width: "100%",
    height: "100%",
    resizeMode: "cover"
  },
  metadataRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8,
    marginTop: "auto"
  },
  reactionInfo: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_4
  },
  embedContentArea: {
    flex: 1,
    gap: Module712.space.PX_4,
    borderLeftWidth: 4,
    borderLeftColor: Module712.colors.BORDER_SUBTLE,
    borderTopLeftRadius: Module712.radii.xs,
    borderBottomLeftRadius: Module712.radii.xs,
    paddingLeft: Module712.space.PX_8
  },
  embedAuthorRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_4
  },
  embedAuthorIcon: {
    width: 20,
    height: 20,
    borderRadius: Module712.radii.round
  },
  embedProviderIcon: {
    width: 16,
    height: 16
  },
  embedMedia: {
    overflow: "hidden",
    borderRadius: Module712.radii.sm,
    aspectRatio: 1.7777777777777777
  },
  pollAnswers: {
    flexDirection: "column",
    gap: Module712.space.PX_4,
    flex: 1
  },
  pollAnswerOption: {
    paddingVertical: Module712.space.PX_8,
    paddingHorizontal: Module712.space.PX_12,
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  pollMoreOptions: {
    paddingHorizontal: Module712.space.PX_12
  }
});
Component = memo(function(a0) {
  return a0.message.poll != null ? <PollAnnouncementCard {...a0} /> : a0.message.embedSource != null ? <EmbedAnnouncementCard {...a0} /> : <MessageAnnouncementCard {...a0} />;
});
export default function GameProfileAnnouncements(props) {
  let callback;
  const { gameId, invite, closeModal, trackAction, scrollOffsetRef } = props;
  callback = void 0;
  const styles2 = useStyles();
  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
  const gameAnnouncements = useGameAnnouncements(gameId, 10);
  const { messages, channelId, guildId, loading } = gameAnnouncements;
  const callback2 = useCallback(() => {
    let guildId2 = invite == null ? void 0 : invite.guild?.id;
    if (guildId2 == null) {
      guildId2 = guildId;
    }
    if (guildId2 != null && channelId != null) {
      trackAction(GameProfileTrackActionActions.Announcements);
      GameProfileActionCreators_native.setGameProfilePendingReturn({
        gameId,
        channelId,
        initialScrollOffset: scrollOffsetRef.current
      });
      closeModal();
      navigateToGameAnnouncement({
        invite,
        guildId: guildId2,
        channelId,
        analyticsLocationStack: analyticsLocations
      });
    }
  }, [trackAction, closeModal, invite, guildId, channelId, analyticsLocations, gameId, scrollOffsetRef]);
  callback = useCallback((a0) => {
    let guildId2 = invite == null ? void 0 : invite.guild?.id;
    if (guildId2 == null) {
      guildId2 = guildId;
    }
    if (guildId2 != null && channelId != null) {
      trackAction(GameProfileTrackActionActions.AnnouncementsItem);
      GameProfileActionCreators_native.setGameProfilePendingReturn({
        gameId,
        channelId,
        initialScrollOffset: scrollOffsetRef.current
      });
      closeModal();
      navigateToGameAnnouncement({
        invite,
        guildId: guildId2,
        channelId,
        messageId: a0,
        analyticsLocationStack: analyticsLocations
      });
    }
  }, [trackAction, closeModal, invite, guildId, channelId, analyticsLocations, gameId, scrollOffsetRef]);
  return loading ? <View style={styles2.container}>
    <View style={styles2.sectionHeader}>
      <Text variant="heading-sm/semibold" color="mobile-text-heading-primary">
        {intl.string(t.B0BV3Y)}
      </Text>
    </View>
    <View style={styles2.loadingContainer}>
      <ActivityIndicator />
    </View>
  </View> : channelId == null ? null : messages.length !== 0 ? <View style={styles2.container}>
    <View style={styles2.sectionHeader}>
      <Text variant="heading-sm/semibold" color="mobile-text-heading-primary">
        {intl.string(t.B0BV3Y)}
      </Text>
      <Button text={intl.string(t.budhsM)} variant="tertiary" size="sm" icon={<ChevronSmallRightIcon size="sm" />} iconPosition="end" onPress={callback2} />
    </View>
    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles2.smallCardsScroller} contentContainerStyle={styles2.smallCardsContainer} decelerationRate="fast" snapToInterval={172} snapToStart={false} snapToEnd={false}>
      {messages.map((a0) => <Component key={a0.id} message={a0} onPress={callback} guildId={guildId} channelId={channelId} />)}
    </ScrollView>
  </View> : null;
};