// Metro module 15007 (f15008).
import { memo } from "react";
import { Image as Image2, Pressable } from "react-native";
import GuildAvailabilityStore from "../../../stores/GuildAvailabilityStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import AlertActionCreators from "../../../actions/AlertActionCreators";
import { intl, t } from "../../../intl/index.native";
import { useStateFromStores } from "../../../_bundle/Module589";
import Module14998 from "../../../_bundle/Module14998";
const useStyles = createStyles({
  unavailableGuilds: {
    marginTop: Module712.modules.mobile.GUILD_BAR_ITEM_PADDING,
    justifyContent: "center",
    alignItems: "center"
  },
  unavailableGuildsIcon: {
    width: Module712.modules.mobile.GUILD_BAR_ITEM_SIZE,
    height: Module712.modules.mobile.GUILD_BAR_ITEM_SIZE
  }
});
const r48 = memo(function GuildsBarItemUnavailableGuilds() {
  const styles = useStyles();
  const stateFromStores = useStateFromStores([GuildAvailabilityStore], () => GuildAvailabilityStore.totalUnavailableGuilds);
  return stateFromStores <= 0 ? null : <Pressable accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["MEpX+2"], {
    count: stateFromStores
  })} onPress={() => {
    AlertActionCreators.show({
      title: intl.string(t.R0RpRX),
      body: intl.format(t["TnH05/"], {
        count: stateFromStores
      })
    });
  }} style={styles.unavailableGuilds}>
    <Image2 style={styles.unavailableGuildsIcon} source={Module14998} />
  </Pressable>;
});
export default r48;