// Metro module 10206 (f10207).
import { View } from "react-native";
import GuildRoleStore from "../../../stores/GuildRoleStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { useStateFromStoresArray } from "../../../_bundle/Module589";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import RolePill from "../../../components_native/common/RolePill";
const useStyles = createStyles({
  container: {
    marginTop: 8
  },
  label: {
    marginBottom: 4
  },
  rolesRow: {
    flexDirection: "row",
    flexWrap: "wrap"
  }
});
export default function InviteRolesDisplay(props) {
  const { roleIds, guildId } = props;
  const styles = useStyles();
  const stateFromStoresArray = useStateFromStoresArray([GuildRoleStore], () => roleIds.map((roleId) => GuildRoleStore.getRole(guildId, roleId)).filter((item) => item != null), [roleIds, guildId]);
  return stateFromStoresArray.length !== 0 ? <View style={styles.container}>
    <Text variant="text-xs/semibold" color="text-muted" style={styles.label}>
      {intl.string(t.stcSfI)}
    </Text>
    <View style={styles.rolesRow}>
      {stateFromStoresArray.map((item) => <RolePill key={item.id} role={item} guildId={guildId} />)}
    </View>
  </View> : null;
};