// Metro module 13884 (f13885).
import { useMemo, useCallback } from "react";
import { Pressable, View } from "react-native";
import GuildStore from "../../../stores/GuildStore";
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
import Module712 from "../../../_bundle/Module712";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
import { sortGuildIdsByFrecency, ChangeDirection } from "../ActivityPrivacyUpsellUtils";
import { intl, t } from "../../../intl/index.native";
import { Text } from "../../../design/components/Text/native/Text";
import { GuildIconPile } from "../../../design/components/Pile/native/GuildIconPile.native";
import { ChevronLargeRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronLargeRightIcon";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import ToastActionCreators from "../../toast/native/ToastActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { Button } from "../../../design/components/Button/native/Button.native";
let useStyles, StoreGuildIcon, GuildCard;
const renderSuccessIcon = function renderSuccessIcon() {
  return <CircleCheckIcon size="sm" color={Module712.colors.STATUS_POSITIVE} secondaryColor={Module712.colors.WHITE} />;
};
StoreGuildIcon = function StoreGuildIcon(props) {
  const guildId = props.guildId;
  return <GuildIcon guild={useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId))} size={GuildIconSizes.XSMALL} />;
};
GuildCard = function GuildCard(props) {
  let c20770_2;
  const { guildIds, direction, onPress } = props;
  c20770_2 = void 0;
  const styles = useStyles();
  const memo = useMemo(() => sortGuildIdsByFrecency(guildIds), [guildIds]);
  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(memo[0]));
  const r24 = direction === ChangeDirection.RESTRICTING ? intl.string(t.e6Kpa7) : intl.string(t.cy4G4y);
  let guildName = stateFromStores?.name;
  if (guildName == null) {
    guildName = "";
  }
  const r58 = stateFromStores != null && memo.length > 1;
  const r21 = memo.length !== 4 ? memo.slice(0, 3) : memo;
  c20770_2 = r21;
  const stateFromStoresArray = useStateFromStoresArray([GuildStore], () => c20770_2.map((item) => {
    let r7 = GuildStore.getGuild(item)?.name;
    if (r7 == null) {
      r7 = "";
    }
    return r7;
  }), [r21]);
  const Component = onPress != null ? Pressable : View;
  return <Component style={styles.card} onPress={onPress}>
    <View style={styles.cardInfo}>
      <Text variant="text-md/semibold" color="text-strong">
        {intl.format(t["0fkj8J"], {
          count: guildIds.length
        })}
      </Text>
      <View style={styles.statusRow}>
        <Text variant="text-sm/medium" color={direction === ChangeDirection.RESTRICTING ? "text-feedback-positive" : "text-muted"}>{r24}</Text>
        <Text variant="text-sm/medium" color="text-muted" lineClamp={1} style={styles.guildSummary}>
          {intl.format(r58 ? t["8ZLbvR"] : t["+NoTYm"], {
            guildName
          })}
        </Text>
      </View>
    </View>
    <GuildIconPile size={GuildIconSizes.XSMALL} names={stateFromStoresArray} totalCount={memo.length}>
      {r21.map((item) => <StoreGuildIcon key={item} guildId={item} />)}
    </GuildIconPile>
    {onPress != null && <View style={styles.chevron}>
      <ChevronLargeRightIcon color={Module712.colors.TEXT_SUBTLE} size="xs" />
    </View>}
  </Component>;
};
useStyles = createStyles({
  container: {
    paddingVertical: Module712.space.PX_24,
    paddingHorizontal: Module712.space.PX_24
  },
  title: {
    marginBottom: Module712.space.PX_8
  },
  description: {
    marginBottom: Module712.space.PX_24
  },
  card: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
    borderRadius: Module712.radii.md,
    padding: Module712.space.PX_16,
    marginBottom: Module712.space.PX_24,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  cardInfo: {
    flex: 1,
    marginRight: Module712.space.PX_12
  },
  statusRow: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: Module712.space.PX_4,
    paddingBottom: 2
  },
  guildSummary: {
    flexShrink: 1
  },
  chevron: {
    marginLeft: Module712.space.PX_8
  },
  buttonsContainer: {
    gap: Module712.space.PX_8
  }
});
export default function BaseUpsellActionSheet(props) {
  const { direction, affectedGuildIds, title, subtitle, confirmText, toastContent, onConfirm, onCardPress } = props;
  const styles = useStyles();
  const callback = useCallback(() => {
    onConfirm();
    ActionSheetActionCreators.hideActionSheet();
    ToastActionCreators.open({
      key: "ACTIVITY_PRIVACY_UPSELL_TOAST",
      content: toastContent,
      icon: renderSuccessIcon
    });
  }, [onConfirm, toastContent]);
  const callback2 = useCallback(() => {
    ActionSheetActionCreators.hideActionSheet();
  }, []);
  return <BottomSheet startExpanded>
    <View style={styles.container}>
      <Text style={styles.title} accessibilityRole="header" variant="heading-xl/bold" color="text-strong">{title}</Text>
      <Text style={styles.description} variant="text-md/medium" color="text-default">{subtitle}</Text>
      <GuildCard guildIds={affectedGuildIds} direction={direction} onPress={onCardPress} />
      <View style={styles.buttonsContainer}>
        <Button variant="primary" size="md" text={confirmText} onPress={callback} />
        <Button variant="secondary" size="md" text={intl.string(t.X1rGEm)} onPress={callback2} />
      </View>
    </View>
  </BottomSheet>;
};