// Metro module 11050 (f11051).
import { View } from "react-native";
import GuildRoleStore from "../stores/GuildRoleStore";
import { createStyles } from "../design/components/Styles/native/createStyles";
import { useStateFromStores } from "../_bundle/Module589";
import RolePill from "./common/RolePill";
const useStyles = createStyles({
  wrapper: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center"
  }
});
export default function MemberRolesList(props) {
  const { userRoles, guild, style } = props;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([GuildRoleStore], () => GuildRoleStore.getSortedRoles(guild.id));
  const r23 = <View />;
  return userRoles != null ? userRoles.length > 0 ? <View style={[styles.wrapper, style]}>
    {stateFromStores.filter((stateFromStore) => userRoles.includes(stateFromStore.id)).sort((a, b) => {
      const guild_connections = a.tags?.guild_connections;
      const guild_connections2 = b.tags?.guild_connections;
      const r12 = guild_connections !== null;
      const r13 = guild_connections2 !== null;
      return r12 ? r13 ? r12 ? 0 : r13 ? -1 : 0 : 1 : r12 ? 0 : r13 ? -1 : 0;
    }).map((item) => <RolePill key={item.id} role={item} guildId={guild.id} />)}
  </View> : r23 : r23;
};